От автора: приветствую вас, друзья. Данная статья будет продолжением , в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.
Исходные файлы текущей статьи вы можете скачать по .
В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.
Начнем с синтаксиса функции mail . Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:
to — email получателя (также можно указать несколько адресов, перечислив их через запятую);
subject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:
Ваше сообщение отправлено
"; }else{ echo "Ошибка!
"; }< ? php $ to = "[email protected]" ; // адрес получателя $ subject = "Заказ обратного звонка" ; // тема письма $ message = "Имя: {$_POST["name"]}\r\n" ; // добавляем имя в текст $ message . = "Телефон: {$_POST["phone"]}" ; // добавляем телефон в текст $ headers . = "Content-type: text/plain; charset=utf-8" . "\r\n" ; // установливаем кодировку $ headers . = "From: [email protected]" . "\r\n" ; // добавляем отправителя if (mail ($ to , $ subject , $ message , $ headers ) ) { echo
" Ваше сообщение отправлено } else { echo
" Ошибка! |
Это минимальный код, который уже позволит сформировать сообщение для отправки. Давайте проверим, как он работает:
Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка \userdata\temp\email\. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:
Отлично! Осталось несколько моментов, которые не помешает поправить в JS скрипте. Например, необходимо выводить сообщение не простым текстом, а именно кодом HTML, а также очищать поля формы после отправки сообщения. Итоговый JS код будет таким:
$(function(){ $("#recall").submit(function(e){ e.preventDefault(); var data = $(this).serialize(); $.ajax({ url: "mail.php", type: "POST", data: data, beforeSend: function(){ $("#submit").next().text("Отправляю..."); }, success: function(res){ $("#recall").find("input").val(""); $("#submit").next().html(res); }, error: function(){ alert("Ошибка!"); } }); }); });
$ (function () { $ ("#recall" ) . submit (function (e ) { e . preventDefault () ; var data = $ (this ) . serialize () ; $ . ajax ({ url : "mail.php" , type : "POST" , data : data , beforeSend : function () { $ ("#submit" ) . next () . text ("Отправляю..." ) ; |
Вы знаете, что до 80% пользователей покидают ваш сайт, не заполнив заявку потому, что форма обратной связи на вашем сайте далека от идеала? Или вы уверены в том, что ваша форма заявок идеальна и имеет максимальную конверсию?
Все чаще наши новые клиенты, которые обращаются к нам в студию, при обсуждении создания и продвижения сайта, задаются вопросом о конверсии. Это абсолютно правильный вопрос, когда речь идет об интернет-маркетинге, т.к если сайт не приносит клиентов, то и смысла инвестировать в него время и деньги нет никакого. В сегодняшнем блоге мы расскажем об одно из факторов, который сильно влияет на количество клиентов с сайта компании. Этот фактор - формы обратной связи, или как их еще называют - «формы захвата». Какая она - идеальная форма обратной связи.
Сразу отметим, что в зависимости от сегмента бизнеса эта форма может отличаться, т.к у каждого бизнеса свои задачи, свои форматы взаимодействия с клиентами. Именно форма «общается» с клиентом пока ваш менеджер обзванивает другие контакты и ждет новые заявки.
Форма обратной связи на сайте важна. Вы ведёте покупателя к совершению покупки или заказу услуги ненавязчиво и осторожно. Используете всё, что можно, начиная с удобного интерфейса и заканчивая отличными условиями продажи. Но когда клиент добирается до формы заказа - он уходит. Вся работа насмарку. Вряд ли он когда-нибудь вернётся к вам снова. Этого можно избежать, просто изменив форму обратной связи.
Для чего нужна форма обратной связи
Не только для совершения заказа/покупки. С помощью формы обратной связи вы выясняете у пользователей, что им нравится/не нравится, какие есть «косяки» в работе компании и даже получаете готовые советы по её улучшению. Разговор с пользователями - это:
а) повышение лояльности к вашей компании;
б) возможность быстро отреагировать на запрос, снизить негатив и сохранить клиента;
в) возможность улучшить продукт или сервис;
г) способ увеличить продажи.
Главная ошибка, которую совершают неопытные владельцы сайта - перегруженная форма обратной связи. Пользователей отпугивает большой набор полей, которые необходимо заполнить, чтобы сделать запрос в вашу компанию. Они не хотят предоставлять лишнюю информацию о себе, даже если вы обещаете им конфиденциальность. Мы собрали для вас несколько правил оформления идеальной формы.
Правило №1. Максимально упрощайте форму
Какую из этих форм вы заполните охотнее?
Или такую
Оставляйте только самые важные поля. Посетители большинства сайтов не любят заполнять большое количество полей
Если правило упрощения формы выполнили, то стоит ожидать увеличение конверсии на 30–60 %.
Совет. Уберите всё лишнее, оставьте 2–3 поля или даже 1. Обычно это «Имя», «номер телефона или e-mail». Если у вас интернет-магазин и вы делаете форму для заказа, то полей будет немного больше: «Имя», «№ телефона или E-mail», «Вариант доставки», «Количество товара», «Адрес». Смотрите, для каких целей вы делаете форму обратной связи, и максимально упрощайте её.
Правило №2. Форма должна быть заметна
Форма обратной связи или заявки с сайта должна быть заметной, иначе посетитель может просто ее не заметить и не заполнить. Вы даже можете поместить некий анимированный элемент, который позволит еще больше акцентировать внимание.
Правило №3. Минимум «обязательных полей»
Одно обязательное поле - телефон
Часто на сайтах компаний можно наблюдать не только перегруженную лишними полями форму, но и обязательность заполнения этих полей. Формулировка «обязательное поле» присутствует на 99 % сайтов. Хотите увеличить конверсию? Уберите обязательное заполнение всех полей, кроме телефона. Если человек захочет, он сам заполнит те поля, которые считает нужными, но основное поле - номер телефона, которое позволит перезвонить клиенту и уточнить всю остальную информацию. Главное не забудьте составить правильные скрипты для менеджеров.
В каких случаях конверсия с форм падает:
- Падение конверсии на 3 %, если вы просите заполнить поле с указанием возраста
- Падение конверсии на 10 %, если необходимо ввести ФИО
- Падение конверсии на 2 %, если вас интересует, в каком населенном пункте живет посетитель
- Падение конверсии на 4 %, если необходимо заполнить адрес проживания
Если поля о доставке, адресе и ФИО присутствуют в интернет магазине, то пользователь конечно же их заполняет и на конверсию это не влияет. Но если вы хотите, чтобы он заполнил данные, чтобы отправить вам заявку, то конверсия безусловно будет падать.
Правило №4. Ссылки в форме (условия обращения)
Если у вас есть необходимость отправить посетителя прочитать условия обращения, обработки заявок, заказов и прочее, то делайте эти ссылки непосредственно в блоке формы. При клике на такую ссылку лучше показать всплывающее окно с информацией, которое легко закрыть и перейти к заполнению формы.
Пример такой формы:
Старайтесь минимизировать количество текста и условий в форме, т.к пользователю будет лень все перечитывать и он просто закроет форму, не отправив вам свои данные. Также ошибки в данной форме - слишком большое количество обязательных полей.
Правило №5. Согласие на обработку данных
Даже несмотря на то, что данные в форме могут быть заполнены не верно и не носить характер персональных данных, данный чекбокс необходимо поставить. Уже были судебные претенденты, по которым ответчики должны были заплатить штраф за невыполнение данного требования Законодательства.
Правило №6. Выпадающих списков быть не должно
Если у вас форма представляет из себя калькулятор, то выпадающий список приемлем. Но если вы заставляете человека выбирать в какой отдел вашей компании он хочет обратиться, то это снизит конверсию, т.к пользователи хотят быстро оформить форму, не думая над лишней информацией.
Правило №7. Уберите каптчу с формы
Ввод каптчи может снижать конверсию до 40%. Это объясняется тем, что часто каптча вообще не читается, либо при вводе данных сообщает о некорректности ввода символов. Если раньше каптча была оправлена тем, что без нее могло приходить много спама, то теперь есть технологии, которые защищают форму от ввода данных спам-роботами и без ввода каптчи.
В студии artcell мы как раз используем такую технологию. Как можете заметить каптчи в наших формах нет и СПАМ мы не получаем.
Правило №8. Автоуведомление о том, что форма отправлена
После того как форма заполнена и отправлена обязательно должно появиться сообщение о том, что данные отправлены и менеджер перезвонит в ближайшее время. Если такого уведомления не будет, то пользователь не понимает отправились данные или нет, стоит ожидать звонка из компании или нет. Данное уведомление позволит избавить вас от дублирования заявок от одного и того же пользователя.
Правило №9. Уведомление по sms
Отправьте автоматическое уведомление на номер посетителя, если в вашей форме было поле для ввода телефона. Это позволит персонализировать ваше обращение, а пользователю лишний раз напомнит название вашей компании.
Так какая она - идеальная форма обратной связи?
Выделена в рамку или цветом, что позволяет ее сделать более заметной на фоне остальной информации на сайте
Минимум полей для заполнения
Одно или два обязательных поля
Отсутствие полей с выпадающими списками
Наличие чекбокса для согласия на обработку получаемых данных
Наличие ссылок и доп.условий сразу в форме без лишних переходов на другие страницы сайта
Отсутствие каптчи
У вас идеальная форма заявки, но клиентов все равно мало? Прочитайте этот блог в нашем журнале и вы найдете ответ на свой вопрос. Если ваш сайт плохо продвигается в поисковых системах, то вам будет полезна данная информация .
Если у вас не получается сделать форму связи идеальной и вы хотите обратиться за помощью к профессионалам, то заполните заявку ниже и наш менеджер перезвонит в ближайшее время.
Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.
UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)
Формат самой формы так же включает файл обработчик на языке php, дополнительно для работы понадобится библиотека jquery и скрипты, но обо всем по порядку, не буду долго грузить — переходим к обзору и разбору нашей обратной связи.
Форма обратной связи html — структура работы
Внешний вид нашей формы выглядит следующим образом
В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))
Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.
Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:
Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:
Исходный код обработчика формы
Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | < 1) { $error .= "Введите ваше сообщение. <".$tel."> ".$error." ";
}
}
?>
|
";
}
// Проверка телефона
function ValidateTel($valueTel)
{
$regexTel = "/^{7,12}$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true: false;
}
if(!$tel)
{
$error .= "Пожалуйста введите телефон.
";
}
if($tel && !ValidateTel($tel))
{
$error .= "Введите корректный телефон.
";
}
if(!$error)
// Проверка сообщения (length)
if(!$message || strlen($message) < 1)
{
$error .= "Введите ваше сообщение.
";// В этой строчке ставиться минимальное ограничение на написание букв.
}
if(!?utf-8?b?". base64_encode($name) ."?=";
$message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n";
$mail = mail("[email protected]", $subject, $message,
"From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion());
if($mail)
{
echo "OK";
}
}
else
{
echo "
Работоспособность формы
Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.
Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .
Заполненная форма с тестовыми данными
Письмо на почтовом ящике
Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php
Все работает отлично, будет приятно услышать вашу обратную связь (конструктивную критику) в комментариях, если появились затруднения и с чем-то не справляетесь — смело пишите мне в VK (в контактных данных найдете). Надеюсь вам понравился и дизайн и функционал данного симбиоза формы обратной связи (заказа услуг, заявки) и триггера, призывающего к действию. Всем удачи в работе и позитивного настроя, пока))
Подготовлено при поддержке,
Здравствуйте дорогие читатели, сегодня хочу рассказать вам о том, как я создаю формы, для получения контактных данных пользователя.
На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.
Создание формы обратной связи – html разметка
Обычно мне хватает трех полей, и в большинстве случаев, я использую такую разметку для создания контактной формы:
Попробуйте открыть в браузере данный код и посмотрите что у вас получилось, в зависимости от того, какой интернет-обозреватель используете, должно выглядеть примерно так:
Если возникнут какие-нибудь вопросы по разметке, смело задавайте их в комментариях, постараюсь подробно ответить, а в статье не буду описывать каждый элемент, чтобы не увеличивать ее размер. Кроме того, элементы достаточно просты.
Создание формы обратной связи — css разметка
Давайте зададим стили нашей форме и приведем ее к читабельному виду:
/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }
Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:
Transition: .6s;
Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:
Создание формы обратной связи — php разметка
Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.
Структура у него, как у обычного html файла, это может быть страничка, на которой вы напишите «Спасибо, ваша заявка принята. После обработки заявки наши менеджеры свяжутся с вами»
То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.
"; $msg .= "
Cообщение с сайта
\r\n"; $msg .= "От кого: ".$username."
\r\n"; $msg .= "Почта: ".$usermail."
\r\n"; $msg .= "Сайт: ".$usertel."
\r\n"; $msg .= ""; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "
Давайте немного поясню код:
$sendto = "[email protected]"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты
Тут, думаю, — понятно.
Теперь давайте сформируем заголовок письма.
$subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
Строка $subject = «Новое сообщение»; — отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.
Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:
$headers = "From: " . strip_tags($usermail) . "\r\n";
То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.
Теперь зададим внешний вид письма. Вы можете оформить его как угодно, а я предлагаю следующую структуру:
$msg = "
"; $msg .= "Cообщение с сайта
\r\n"; $msg .= "От кого: ".$username."
\r\n"; $msg .= "Почта: ".$usermail."
\r\n"; $msg .= "Телефон: ".$usertel."
\r\n"; $msg .= "";Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.
Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:
If(@mail($sendto, $subject, $msg, $headers)) { echo "
Я сделал так, что в любом из случаев выведется картинка с соответствующим текстом. Вы можете вместо картинки вывести полноценную страницу. Просто пропишите код, вместо картинки.
Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;
То есть через 4 секунды пользователя автоматически вернет на главную страницу!
Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!
Кстати, если вам нужна форма обратной связи без перезагрузки страницы, то почитать о том как ее установить можно в
Может быть, кому-то не очень понятен материал, но если вы в точности повторите мои действия, то у вас обязательно будет работать контактная форма. Возникнут вопросы — пишите в комментариях, постараюсь ответить! До встречи на блоге!
P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:
- Тестируете форму не на сервере.
- Тестируете форму на бесплатном хостинге.
- Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.
В этих случаях письма не будут приходить к вам на почту.
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
23/07/2014 12/07/2018
dimadv7