Форма обратной связи

Рассмотрим самый простой вариант формы обратной связи.

Как сделать форму обратной связи на HTML? Вот такую?

Работу формы можно посмотреть на сайте www.titovsergei.ru

Честный ответ — никак, HTML — это язык разметки (т.е. можно сделать только «скелет» формы), а нам нужны действия с данными. Как минимум нужна связка HTML+PHP. Причем данная связка будет работать только на сервере хостера (где есть поддержка PHP) и не будет работать на локальном ПК (нужна установка как минимум Denwer).

Итого наша форма будет в виде связки HTML+PHP. Из Java (на стороне пользователя) только событие onclick для подтверждения отправки формы. Все проверки и обработки происходят на сервере PHP.

Кроме того, мы будем получать в письме информацию, на какой странице нашего сайта пользователь заполнил форму. А то как бывает — приходит письмо с формы обратной связи: «Сколько это стоит?», а что ЭТО — не написано. И гадай, с какой страницы это было отправлено, ведь обычно форма обратной связи существует на всех страницах сайта.

Чем меньше полей — тем лучше. И форма должна быть сразу на экране в видимой части сайта сразу после загрузки:
— т.е. не должно быть отдельной кнопки типа «написать сообщение» при нажатии на которую открывается форма
— и форма не должна быть внизу сайта, где ее можно увидеть только после прокрутки (порядка 70% посетителей страницу не прокручивают)

Чем длиннее путь пользователя до завершения заполнения, тем ниже конверсия (

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

Поле E-mail служит только для НАПОМИНАНИЯ пользователю, что нужно его указать. Если пользователь не хочет указывать свой e-mail, он его не укажет. И проверка формата e-mail нам не поможет.

Без проверки = абракадабра
С проверкой  = абракадабра@mail.ru

И чем помогла проверка корректности e-mail? Только время пользователя зря потратили. А если пользователь захочет указать свою почту — он ее укажет, он и так без проверки ее помнит.

КАПЧА тоже не особо нужна. Да, будет часть писем от ботов — но Вы не потеряете нужное Вам письмо и потенциального клиента.
Варианты защиты от ботов без КАПЧА — можно почитать здесь.

ВАЖНО: необходимо мотивировать пользователя СОВЕРШИТЬ действие. Сравните два варианта формы.

В чем разница? В первой форме пользователю просто предлагается отправить сообщение. Какое сообщение, откуда?
Для чего надпись «форма обратной связи»?

Во втором варианте всё намного лучше — пользователю в явном виде предлагают:
— написать сообщение
— отправить это сообщение
Вот такая мелочь немного поднимает конверсию.

Еще немного мелочей для увеличения конверсии.

1. Для стационарных устройств желательно обеспечить постоянное нахождение формы на экране:
— т.е. не надо ничего нажимать для открытия формы
— использование «липкого» дизайна, что бы при прокрутке форма всегда оставалась на экране

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

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

<form action= "../form/form.php" method= "POST">
<p>Имя:    <input type= "text" name= "name" value=""> </p>
<p>E-mail: <input type= "text" name= "email" value=""></p>
<input type= "text" name= "tel" style="display:none" value="">
<p>Форма обратной связи: </p><p> <textarea rows= "5" cols="30" name= "message" value=""></textarea></p>
<p style="margin-left:-9999px">
<input type="text" name="adress" value="">
</p>
<input type= "submit" value= "Отправить" onclick="return confirm('Отправить заполненную форму автору сайта?')">
</form>

Ничего сложного — описание трех полей ввода и кнопка «Отправить». Всем полям изначально добавляем пустое значение value=»», что бы потом проверка на пустоту проходила корректно.
Вся основная магия будет происходить в файле form.php, который мы вызываем из папки, расположенной в корне сервера «form/form.php».

ВАЖНО! Указание должно быть с двумя точками «../form/form.php» (указание на корень сайта), иначе вызов «form/form.php» будет работать только на главной странице, а на остальных страницах внутри каталогов будет генерироваться 404 ошибка!

Т.е. вместо правильного варианта
http://mysite.ru/form/form.php

получится кривая ссылка вида
http://mysite.ru/catalog/form/form.php

ВАЖНО: проверяйте, как все это работает в разных CMS. Движок должен заменить две точки на доменное имя и в коде страницы должно быть вот так:
http://mysite.ru/form/form.php

В HTML только кусочек магии — дополнительное окно с подтверждением перед отправкой — событие onclick

Вот такое модальное вплывающее окно.

Если пользователь выбирает «ОК» — данные из формы отправляются на сервер, если «Отмена» — возврат обратно в редактирование формы.

Для внимательных — а что за четвертое поле name= «tel», к тому же со стилем «display:none»? Это поле — невидимка, реальные пользователи на экране не увидят и заполнить не смогут — это ловушка для тупых ботов. Суть ловушки — 90% ботов заполняют все поля на найденной форме (особенно поле с таким «сладким» названием tel), живой человек не увидит и не заполнит.

Не следует путать с невидимым полем <input type= «hidden» name= «tel» value= «123-45-67»> — этот вариант для заранее определенного поля с данными без возможности изменения, бот не сможет внести данные.

Для особо внимательных — еще одно поле name= «adress» с его выводом за пределами экрана (смещение минус 9999 пикселей) — это тоже для ботов. При определенных усилиях живой человек его тоже может заполнить — необходимо после заполнения полей использовать клавишу «Tab» вместо мышки, после поля «Текст сообщения» курсор пропадет и можно будет на клавиатуре что-нибудь набрать (Вы этого не увидите), следующий «Tab» переместит фокус на кнопку «Отправить».
С таким заполненным полем письмо с сервера отправлено не будет.

Комментарий.

Более простой вариант (сделать стиль внутри формы у поля)

<input type= "text" name= "adress" style="margin-left:-9999px value="">

работать в невидимом варианте не будет, браузер покажет это поле у левой границы экрана.

Комментарий.

Конечно не все 100% спама отрежется с этими ловушками (роботы больно умные пошли), но на 70-80% блокировок можно рассчитывать:)

Что должно быть в файле form.php

ВАЖНО.
Файл PHP — это простой текстовый файл. Его кодировка должна быть в utf-8, что бы не было проблем с разными хостингами (точнее с версиями PHP на разных хостингах). Причем не просто в utf-8, а UTF-8 without BOM.

Используем редактор Notepad++ (идеальный вариант для простого редактирования PHP). При создании нового файла сразу выбираем Convert to UTF-8 without BOM.

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

ВАЖНО.
Если файл, сохраненный с приставкой without BOM с открыть в обычном блокноте, что-то изменить и сохранить — сохранение будет уже обычное utf-8. И после загрузки на хостинг скрипт перестанет работать. Вот такие у нас хостинги.

Задаем  e-mail админа, куда будут приходить письма с формы

$adminemail="post@titovsergei.ru";

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

$backurl=$_SERVER['HTTP_REFERER'];

Будем обеспечивать базовую защиту от:
— хакеров
— спам-ботов
— хулиганов

1. Защита от хакеров — убираем тэги HTML/PHP из введенного текста

Принимаем данные с формы:
— $name=$_POST[‘name’] — вот так неправильно, можно словить вредоносный код в полях формы
— $name=trim(strip_tags($_POST[‘name’])) — вот так правильно, с помощью функций PHP убираем лишние пробелы по краям (функция trim) и убираем все тэги HTML / PHP в заполненном поле (функция strip_tags)

Через некоторое время через форму обратной связи начнут приходить странные письма — поле «От» и «Почта» заполнены явным бредом, а вот поле «Текст сообщения» (оно же message) — пустое. Понятно, что роботы развлекаются, но почему так странно? И таких писем 5 штук в час.
Это боты не развлекаются — они пытаются сломать Ваш сайт, отправляя в поле «Текст сообщения» тэги HTML/PHP. Но мы при приеме переменной ее от этих тэгов очищаем и видим пустое поле :)

Ставим отдельную проверку на пустоту самого сообщения.

if (empty($message))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // на выход из PHP
}

Если нет текстового сообщения — то там такое письмо не нужно

2. Защита от спам-ботов — проверяем заполнения поля tel. Если в поле есть данные — значит пришел бот в гости, выходим из скрипта PHP, письмо не отправляется.

// Оценка поля tel — должно быть пустым 1

if (!empty($tel))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // выход из скрипта PHP
}

Второе защитное поле

// Оценка поля adress — должно быть пустым — от ботов 2

if (!empty($adress))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // выход из скрипта PHP
}

3. Защита от хулиганов — проверка на наличие данных в любом поле. Если все три поля пустые — письмо не отправляется, выход из скрипта PHP.

if (empty($name) && empty($email) && empty($message))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // на выход из PHP
}

Собираем (от кого, страница отправки, мыло, тест сообщения) сообщение админу и отправляем с помощью функции mail() — это уже должен хостинг поддерживать. Точнее хостин почти всегда поддерживает, просто иногда функция mail() по умолчанию выключена, необходимо связаться с саппортом, что бы они ее включили.

Подробнее про функцию mail() в PHP здесь.

При формировании сообщения можно использовать символы:
\n — newline (перевод строки)
\r — carriage return (возврат каретки)

Возвращаемся пользователя на текущую страницу (иначе он останется на странице …../form.php) и очищаем поля формы.

header("Location: ".$_SERVER['HTTP_REFERER']);

Получаем письмо такого вида:
— есть данные страницы отправки (url & title)
— есть данные отправителя
— есть ссылки (не просто URL) для страницы отправки и почты

Можно добавить проверку формата e-mail и подставлять в качестве отправителя почтовый адрес, который был указан в форме обратной связи (если проверка успешно пройдена). И можно сразу в своей почте нажимать «Ответить».

Примерно в таком виде:

if ($email соответствует формату эл.почты)
{
$from  = "From: $name <$email> \r\n Reply-To: $email \r\n"; // формируем 4-й параметр для mail()
mail("$adminemail", "Сайт: сообщение от $name $email", $msg, $from); // четыре параметра
}
else
{
mail("$adminemail", "Сайт: сообщение от $name $email", $msg); // три параметра
}

Здесь можно прочитать подробнее:  Как отправить email с сайта?

Теперь понятно, как в принципе устроена форма обратной связи. Для систем управления сайтами существуют специализированные плагины, можно посмотреть Joomla и WordPress. Можно использовать плагины, а можно и этот вариант — через модуль HTML.

Возможные проблемы

1. После нажатия «Отправить» получается ошибка 404. Т.е. не найден наш файл php, который форму обрабатывает. Это особенно актуально для систем управления сайтом, где свои сложные отношения с папками и директориями. Тогда необходимо указать явно расположение файла от корня сайта (т.е. с полным именем сайта), например в папке form

<form action="https://seotable.ru/form/seotable.php" method="POST">

2. Все сделано, как написано, но письма не приходят. Это норма :( К сожалению, работа скрипта PHP сильно зависит от настроек сервера PHP на конкретном сервере хостинга.

Вариантов несколько:
— функция mail() выключена на хостинге для блокировки спама
— работа функции mail() на хостинге настроена по другому — например, обязательным является 4-й параметр
— Ваша почта не принимает писем, считая их спамом

Практически по всем трем случаям необходимо связаться с саппортом хостинга с объяснением ситуации и просьбой помочь :)

Некоторые хостинги требуют для отправки наличие созданного почтового ящика у себя на сервере вида no-reply@mydomen.ru и указания его в явном виде в качестве 4-го параметра:

3. Письма приходят, но в не читаемом виде, неправильная кодировка

Тут вариантов может еще больше (где неправильная кодировка?) — на сервере, в CMS и так далее… Простой путь решения — добавить в функцию mail() явное указание,  в какой кодировке отправлять, лучше всего использовать utf-8

mail(«$adminemail», «Тема сообщения», $msg, «Content-type:text/plain; Charset=utf-8 \r\n»); // вариант для отправки текстовых сообщений

mail(«$adminemail», «Тема сообщения», $msg, «Content-type:text/html; Charset=utf-8 \r\n»); // вариант для отправки сообщений в формате html

Сообщение может содержать графические html-элементы, сслыки и тп. Необходимо заниматься форматирование страницы в html, иначе всё придет в виде одной строки.

4. Совсем дурацкий вариант

Письма приходят, но в тексте ссылки не сформированы, URL страницы отправки без ссылки. Долго искал причину…..
Письма-то заполнены тестовой информацией и приходят в папку «Спам», а для этой папки ссылки и картинки отключена. Смешно.
Если письмо приходит в папку «Входящие» — то со ссылками все в порядке.

ВАЖНО.

Данный код работает — но это код для примера. Можно пользоваться на небольших сайтах.