Как оформить форму обратной связи. Форма обратной связи на PHP с отправкой на e-mail

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

• < form method= "post" action= "mail.php" > …

  
  для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).

• < input maxlength= "30" type= "text" name= "name" />

  
  Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.

• < label for = "name" > Имя:

  
  Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.

• < input type= "submit" value= "Отправить" />

  
  О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.

• < div class = "right" >

  
  использованы только для дальнейшего визуального оформления формы.

Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:

Мы использовали данный код:

form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Ваше сообщение успешно отправлено

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "

Вернуться назад

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.

После чистки тегов добавляем отправку сообщения:

mail ("почта_для_получения_сообщений@gmail.com" , "Письмо с адрес_вашего_сайта" , "Вам написал: " . $name . "
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

ВАЖНО!

Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Теперь по пунктам забираем состав проверки:

Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.

Трудно сейчас представить сайт без формы для обратной связи.

Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.

Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.

Можно воспользоваться следующими универсальными решениями:

• прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
• Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов
• Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.

Тем не менее, расширенных знаний по сайтопостроению от пользователей зачастую не требуется — универсальность и широкий выбор решений позволяют установить желаемую форму обратной связи любым из вышеизложенных способов.

Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте . Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.

Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz ).

По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:

Существуют конструкторы форм обратной связи, не требующие поддержки РНР. Рассмотрим один из них. После перехода по ссылке вы увидите окно, внося настройки в которое, можно создать желаемую форму.

После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».

Полученный код нужно просто скопировать на выбранную страницу сайта.

Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код:

Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:

В этой довольно универсальной системе управления форму обратной связи можно настроить с помощью компонента «Контакты». Он довольно простой, но тем не менее его функциональности вполне хватает для нормальной работы формы.

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, нужно поставить галочку «Да» в строке «Опубликовано».

Настройки нужно сохранить, нажав одноименную кнопку в правом верхнем углу окна. Категория есть, осталось создать страницу с контактной формой. Для этого нужно зайти во вкладку «Контакты» и нажать на кнопку «Новый» в правом верхнем углу.

Заполняем открывшееся диалоговое окно. Обязательно заполняем строку «Название», строку «Псевдоним»,. Ставим галочку «Да» в строке «Опубликовано» и указываем категорию данного контакта. Перейдя немного ниже, обнаружим окно «Связь с пользователем», где нужно указать контактное лицо-получатель сообщений.

Обязательно заполняется и поле «Информация», где необходимо указать положение формы на сайте и электронный адрес получателя. Остальные пункты меню заполнять можно по желанию.

Форма обратной связи настроена, осталось расположить ее на сайте. Для этих целей надо перейти на административную панель и, выбрав вкладку «Меню», определиться с местом отражения пункта.

В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».

Откроется страница, на которой нужно задать название пункта меню, прописать его псевдоним, включить его отражение и в поле основных параметров «Выберите контакт» указать контактные данные, к которым будет привязан этот пункт меню. Сохраняем настройки.

Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:

В этой системе форму обратной связи можно создать, также прибегнув к помощи плагинов. Самый популярный и функциональный — плагин Contact Form 7.

После этого нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи

Добрый день, друзья! В этой статье я расскажу, с помощью php и ajax. Настроить и установить форму обратной связи без перезагрузки на Ваш сайт. А так же я записал подробный видео урок по этой теме.

На самом деле, мне регулярно приходят сообщения с просьбами рассказать, как создать форму обратной связи без перезагрузки , как сделать форму подписки без перезагрузки , как настроить такую форму на сайте и ещё очень много подобных вопросов.

Сразу скажу, что это довольно сложная тема сама по себе, а рассказать нужно так, чтобы её смогли понять и усвоить и те люди, которые совсем не разбираются в программировании на PHP и JavaScript (ajax). Эта статья не для новичков, и если Вы плохо разбираетесь в HTML и совсем не знаете PHP, то разобраться Вам будет трудновато.

На написание этой статьи, подготовку исходного кода формы и запись видео урока я потратил целый день работы. Но я думаю, что это сделал не зря, и эта статья Вам очень понравится.

Итак, давайте посмотрим, как же будет выглядеть и работать наша .

Нажимая кнопку «Отправить» вверху над формой обратной связи появится подсказка «Сообщение обрабатывается…»

Если посетитель Вашего сайта не заполнил форму или ввёл не корректные данные, то появится сообщение об ошибке.

Если же всё было заполнено верно, то текст из формы обратной связи отправится на Ваш e-mail, а человеку будет показано сообщение об успешной отправке.

Ну а теперь друзья переходим к коду.
HTML-код формы обратной связи без перезагрузки будет выглядеть так:

HTML- это скелет нашей формы. Давайте её немного украсим, добавив CSS-стилей:

SidebarForm { background: #f6f6f6; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; width: 420px; } #cor5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .sidebarForm h4 { font: 14px Verdana; color: #333333; text-align: left; padding: 10px 10px 0 10px; } .sidebarForm label { font: 12px Verdana; color: #333; padding: 10px; } .sidebarForm .input { width: 170px; height: 20px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .input input { width: 165px; height: 26px; background: white; margin: -3px 0 0 -5px; padding: 0px 8px; border: none; background: transparent; } .sidebarForm .textarea { height: 70px; width: 320px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .textarea textarea { width: 316px; height: 66px; background: white; border: none; resize:none; } .sidebarForm button { border: 2px #ccc solid; width: 150px; height: 25px; font: 12px Verdana; font-weight: 700; color: #FFFFFF; background-color: #cc0000; padding-bottom: 2px; margin: 5px 0 15px 135px; }

Информация из нашей формы обратной связи после нажатия на кнопку «Отправить», отправляется на сервер (в обработчик) в фоновом режиме, без перезагрузки страницы в браузере. За это отвечает JavaScript-код:

$(document).ready(function() { // Форма обратной связи................................./ var regVr22 = "

Сообщение обрабатывается...

Спасибо, "; var resultStat = "! Ваше сообщение отправлено!

"; var oll = (messageResp + posName + resultStat); if(response == 1){ $("#loadBar").html(oll).fadeIn(3000); $("#posName").val(""); $("#posEmail").val(""); $("#posText").val(""); } else { $("#loadBar").html(response).fadeIn(3000); } } }); return false; }); });

В обработчике нам необходимо проверить что отправил посетитель, и если всё в порядке отправить письмо админу сайта. А посетителю сообщить, что его письмо успешно отправлено! Пишем php-код:

header("Content-type: text/html; charset=utf-8"); //********************************************** if(empty($_POST["js"])){ $log ==""; $error="no"; //флаг наличия ошибки $posName = addslashes($_POST["posName"]); $posName = htmlspecialchars($posName); $posName = stripslashes($posName); $posName = trim($posName); $posEmail = addslashes($_POST["posEmail"]); $posEmail = htmlspecialchars($posEmail); $posEmail = stripslashes($posEmail); $posEmail = trim($posEmail); $posText = addslashes($_POST["posText"]); $posText = htmlspecialchars($posText); $posText = stripslashes($posText); $posText = trim($posText); //Проверка правильность имени if(!$posName || strlen($posName)>20 || strlen($posName) Неправильно заполнено поле \"Ваше имя\" (3-15 символов)!"; $error="yes"; } //Проверка email адреса function isEmail($posEmail) { return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|((?|||)\.){3}(?|||))$/i" ,$posEmail)); } if($posEmail == "") { $log .= "

Ошибка!

В коде представлены необходимые комментарии и пояснения. Более подробно я рассказываю в видео ниже.

Как видите, форма обратной связи без перезагрузки страницы готова. Вы можете её доработать под свои нужды, добавить новые поля, поставить каптчу и т.д. Также на основе кода этой формы Вы можете создавать формы подписки, форму добавления комментариев и др. их принцип работы одинаковый.

Как Вам статья? Надеюсь, тема: «Как создать форму обратной связи без перезагрузки страницы » была Вам интересна, и Вы нашли здесь для себя что-то полезное. Не забудьте подписаться на обновление моего сайта по e-mail.
Внимание! Всех приглашаю в свою

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

• image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
• js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
• index.html — индексный файл нашего одностраничника
• index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Вызываем окно и вводим данные для тестовой проверки нашей формы

Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи

У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

Вы знаете, что до 80% пользователей покидают ваш сайт, не заполнив заявку потому, что форма обратной связи на вашем сайте далека от идеала? Или вы уверены в том, что ваша форма заявок идеальна и имеет максимальную конверсию?

Все чаще наши новые клиенты, которые обращаются к нам в студию, при обсуждении создания и продвижения сайта, задаются вопросом о конверсии. Это абсолютно правильный вопрос, когда речь идет об интернет-маркетинге, т.к если сайт не приносит клиентов, то и смысла инвестировать в него время и деньги нет никакого. В сегодняшнем блоге мы расскажем об одно из факторов, который сильно влияет на количество клиентов с сайта компании. Этот фактор - формы обратной связи, или как их еще называют - «формы захвата». Какая она - идеальная форма обратной связи.

Сразу отметим, что в зависимости от сегмента бизнеса эта форма может отличаться, т.к у каждого бизнеса свои задачи, свои форматы взаимодействия с клиентами. Именно форма «общается» с клиентом пока ваш менеджер обзванивает другие контакты и ждет новые заявки.

Форма обратной связи на сайте важна. Вы ведёте покупателя к совершению покупки или заказу услуги ненавязчиво и осторожно. Используете всё, что можно, начиная с удобного интерфейса и заканчивая отличными условиями продажи. Но когда клиент добирается до формы заказа - он уходит. Вся работа насмарку. Вряд ли он когда-нибудь вернётся к вам снова. Этого можно избежать, просто изменив форму обратной связи.

Не только для совершения заказа/покупки. С помощью формы обратной связи вы выясняете у пользователей, что им нравится/не нравится, какие есть «косяки» в работе компании и даже получаете готовые советы по её улучшению. Разговор с пользователями - это:

а) повышение лояльности к вашей компании;

б) возможность быстро отреагировать на запрос, снизить негатив и сохранить клиента;

в) возможность улучшить продукт или сервис;

г) способ увеличить продажи.

Главная ошибка, которую совершают неопытные владельцы сайта - перегруженная форма обратной связи. Пользователей отпугивает большой набор полей, которые необходимо заполнить, чтобы сделать запрос в вашу компанию. Они не хотят предоставлять лишнюю информацию о себе, даже если вы обещаете им конфиденциальность. Мы собрали для вас несколько правил оформления идеальной формы.

Какую из этих форм вы заполните охотнее?

Или такую

Оставляйте только самые важные поля. Посетители большинства сайтов не любят заполнять большое количество полей

Совет. Уберите всё лишнее, оставьте 2–3 поля или даже 1. Обычно это «Имя», «номер телефона или e-mail». Если у вас интернет-магазин и вы делаете форму для заказа, то полей будет немного больше: «Имя», «№ телефона или E-mail», «Вариант доставки», «Количество товара», «Адрес». Смотрите, для каких целей вы делаете форму обратной связи, и максимально упрощайте её.

Форма обратной связи или заявки с сайта должна быть заметной, иначе посетитель может просто ее не заметить и не заполнить. Вы даже можете поместить некий анимированный элемент, который позволит еще больше акцентировать внимание.

Часто на сайтах компаний можно наблюдать не только перегруженную лишними полями форму, но и обязательность заполнения этих полей. Формулировка «обязательное поле» присутствует на 99 % сайтов. Хотите увеличить конверсию? Уберите обязательное заполнение всех полей, кроме телефона. Если человек захочет, он сам заполнит те поля, которые считает нужными, но основное поле - номер телефона, которое позволит перезвонить клиенту и уточнить всю остальную информацию. Главное не забудьте составить правильные скрипты для менеджеров.

В каких случаях конверсия с форм падает:

• Падение конверсии на 3 %, если вы просите заполнить поле с указанием возраста
• Падение конверсии на 10 %, если необходимо ввести ФИО
• Падение конверсии на 2 %, если вас интересует, в каком населенном пункте живет посетитель
• Падение конверсии на 4 %, если необходимо заполнить адрес проживания

Если поля о доставке, адресе и ФИО присутствуют в интернет магазине, то пользователь конечно же их заполняет и на конверсию это не влияет. Но если вы хотите, чтобы он заполнил данные, чтобы отправить вам заявку, то конверсия безусловно будет падать.

Если у вас есть необходимость отправить посетителя прочитать условия обращения, обработки заявок, заказов и прочее, то делайте эти ссылки непосредственно в блоке формы. При клике на такую ссылку лучше показать всплывающее окно с информацией, которое легко закрыть и перейти к заполнению формы.

Пример такой формы:

Старайтесь минимизировать количество текста и условий в форме, т.к пользователю будет лень все перечитывать и он просто закроет форму, не отправив вам свои данные. Также ошибки в данной форме - слишком большое количество обязательных полей.

Даже несмотря на то, что данные в форме могут быть заполнены не верно и не носить характер персональных данных, данный чекбокс необходимо поставить. Уже были судебные претенденты, по которым ответчики должны были заплатить штраф за невыполнение данного требования Законодательства.

Если у вас форма представляет из себя калькулятор, то выпадающий список приемлем. Но если вы заставляете человека выбирать в какой отдел вашей компании он хочет обратиться, то это снизит конверсию, т.к пользователи хотят быстро оформить форму, не думая над лишней информацией.

Ввод каптчи может снижать конверсию до 40%. Это объясняется тем, что часто каптча вообще не читается, либо при вводе данных сообщает о некорректности ввода символов. Если раньше каптча была оправлена тем, что без нее могло приходить много спама, то теперь есть технологии, которые защищают форму от ввода данных спам-роботами и без ввода каптчи.

В студии artcell мы как раз используем такую технологию. Как можете заметить каптчи в наших формах нет и СПАМ мы не получаем.

После того как форма заполнена и отправлена обязательно должно появиться сообщение о том, что данные отправлены и менеджер перезвонит в ближайшее время. Если такого уведомления не будет, то пользователь не понимает отправились данные или нет, стоит ожидать звонка из компании или нет. Данное уведомление позволит избавить вас от дублирования заявок от одного и того же пользователя.

Отправьте автоматическое уведомление на номер посетителя, если в вашей форме было поле для ввода телефона. Это позволит персонализировать ваше обращение, а пользователю лишний раз напомнит название вашей компании.

Так какая она - идеальная форма обратной связи?

Выделена в рамку или цветом, что позволяет ее сделать более заметной на фоне остальной информации на сайте

Минимум полей для заполнения

Одно или два обязательных поля

Отсутствие полей с выпадающими списками

Наличие чекбокса для согласия на обработку получаемых данных

Наличие ссылок и доп.условий сразу в форме без лишних переходов на другие страницы сайта

Отсутствие каптчи

У вас идеальная форма заявки, но клиентов все равно мало? Прочитайте этот блог в нашем журнале и вы найдете ответ на свой вопрос. Если ваш сайт плохо продвигается в поисковых системах, то вам будет полезна данная информация .

Если у вас не получается сделать форму связи идеальной и вы хотите обратиться за помощью к профессионалам, то заполните заявку ниже и наш менеджер перезвонит в ближайшее время.