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

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

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

К другим функциям сервиса можно отнести:

• анкетирование (для изучения своей целевой аудитории и их предпочтений);
• оформление заказа;
• запрос обратного звонка менеджера или узкоспециализированного эксперта.

Форма обратной связи предусматривает 2 варианта коммуникации с пользователем:

1. Отправку сообщения на почтовый адрес владельца или администратора. Далее происходит обмен письмами через электронную почту или совершается звонок потенциальному клиенту по указанному номеру.
2. Отправку в систему управления. Запросы обрабатываются на сайте в диалоговом окне по механизму «вопрос — ответ».

Форма может быть размещена:

• на отдельной странице при наличии в ней множества полей;
• на странице «Контакты».

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

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

• имя;
• адрес электронной почты;
• телефон для связи;
• адрес сайта;
• текстовый комментарий.

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

Основные характеристики формы обратной связи предусматривают:

• защиту от спама;
• возможность полноценной работы без перезагрузки страницы;
• отправку заполненных форм на почту или загрузку на специально отведенный ресурс.

Контактная форма, созданная на HTML, должна включать три основных элемента:

• HTML код (отвечает за структуру сервиса и количество разделов);
• РНР скрипт (необходим для отправки сведений, указанных в форме, и их обработки);
• CSS стиль (добавляет цветовое исполнение и эффекты, устанавливает размеры полей).

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

• может снизиться производительность сайта;
• они содержат «ненужные» скрипты, замедляющие загрузку страниц.

Код HTML хорошо гармонирует с популярными платформами по созданию сайтов типа WordPress, Joomla, OpenCart (достаточно его вставить через административный ресурс).

Простая форма может быть представлена в следующем виде:

<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
<div class="form-zvonok">
<div>
<label>Имя <span>*</span></label>
<input type='text' name='username' required></div>
<div>
<label>Номер телефона (с кодом) <span>*</span></label>
<input type='text' name='usernumber' required></div>
<div>
<label>Сообщение</label>
<input type='text' name='question'>
</div>
<input class="bot-send-mail" type='submit' value='Послать заявку'>
</div>
</form>

Тег «<form></form>» применяется для обозначения формы в HTML (внутри него отражаются все необходимые параметры). Основные атрибуты кода можно представить в виде следующего списка:

1. Autocomplete="off". Этот атрибут характеризует отключение функции автозаполнения в форме. При повторном переходе необходимо вносить сведения заново. Применение этого параметра является вынужденной мерой, поскольку при автозаполнении высока вероятность передачи «устаревших» (ранее введенных данных о пользователе).
2. Action='email.php'. Здесь указывается название файла со скриптом, использующимся для обработки сведений из формы и отправки сообщения. В случае нахождения файла в том же месте, где и форма, достаточно указать его название. Если размещения разные, то необходимо ввести путь к файлу.
3. Method='post'. Это скрытый вариант отправки сведений без отображения в адресной строке.
4. Class="form-zvonok". Атрибут помогает компоновать поля ввода и подписи к ним. У тега <form> предусмотрено два обязательных атрибута:

• action;
• method — метод отправки данных на сервер (GET или POST).

Находится в контейнере «<div>.

Для вывода полей формы обратной связи используется тег <input> со следующими возможными характеристиками:

• type (отвечает за ввод исходных данных: адреса сайта, текстового сообщения, электронной почты или мобильного телефона);
• name (название поля; при использовании одинаковых полей необходимо присвоить наименование каждому из них);
• placeholder (это подсказка для пользователя; можно удалить без ущерба структуре формы для сайта);
• required (отражает обязательные поля для заполнения; владелец сайта самостоятельно определяет обязательные и необязательные разделы);
• pattern=" (проверяет корректность введенной информации, например, в разделе «электронная почта» должен обязательно присутствовать элемент «@»);
• name=bezspama (это невидимое поле с защитой от спама).

Тег <button></button> является завершающим в коде и используется для отправки сообщения.
В код можно добавлять дополнительные поля через следующие действия:

• в тег <form> необходимо вставить код, содержащий <input type="tel" name="phone">;
• на базе «masked_input₁.4.1-min.js» можно создать маску для телефона (при необходимости);
• ввести в «form-processing.php» код для валидации телефона;
• добавить строчку для замены в шаблоне письма «email.tpl».

Рассмотрим классический пример:

<?php
$to = "email@tut.by";//почтовый ящик для отправки текстового сообщения
$subject = "Тема ";//Тема
$message = "Message, текстовое сообщение!";//Сообщение, письмо
$headers = "Content-type: text/plain; charset=utf-8 \r\n";//Шапка сообщения,
//здесь указывается тип письма, отправитель, адресат (кому отправить ответ на письмо)
mail ($to, $subject, $message, $headers);
?>

Для отправки сообщения из формы обратной связи необходимо в атрибуте $to email@tut.by поменять значение переменной на адрес электронной почты. В рассмотренном примере:

• $subject отражает тему сообщения и упрощает процедуру фильтрации сообщений программными продуктами;
• $message — это непосредственно письмо или само сообщение;
• $headers — это шапка сообщения с указанием типа письма и кодировки.

Обработку скрипта рассмотрим на примере:

<?php
$to = "email@tut.by";//электронный адрес для отправки сообщений
$subject = "Тема ";//Тема
$message = "Message, сообщение!";//Сообщение, письмо
$headers = "Content-type: text/plain; charset=utf-8 \r\n";//Шапка сообщения,
//указан тип письма, отправитель и адресат
// Проверка или метод запроса POST
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Поочередная проверка или были переданные параметры формы, или они не пустые
if(isset($_POST["username"]){
//Если параметр есть, присваиваем ему переданное значение
$name =trim(strip_tags($_POST["username"]));
}
if(isset($_POST["usernumber"]))
{
$number = trim(strip_tags($_POST["usernumber"]));
}
if (isset( $_POST["question"])) {
$question = trim(strip_tags($question));
}
// Формируем письмо
$message = "<html>";
$message .= "<body>";
$message .= "Телефон: ".$number;
$message .= "<br />";
$message .= "Имя: ".$name;
$message .= "<br />";
$message .= "Вопрос: ".$question;
$message .= "</body>";
$message .= "</html>";
// Окончание тела письма
// Отправка письма
mail ($to, $subject, $message, $headers);
}
else
{
exit;
}
?>

Сначала проверяем код на предмет использования метода POST. Для этих целей используем:

if(isset($_POST["username"])
{
//при наличии параметра присваиваем ему переданное значение
$name = trim(strip_tags($_POST["username"]));
}

В данном примере:

• функция strip_tags() используется для удаления HTML и PHP тегов (чтобы исключить перехват информации злоумышленниками);
• функция trim() удаляет лишние пробелы;
• функция mail() отвечает за отправку сообщения.

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

Дополнительно можно внедрить:

• функцию загрузки файлов в форму обратного звонка по коду <input type="file" value="Выберите файл">;
• выбор даты по коду <input type="date" />;
• выпадающий список (с помощью тега <select>);
• иные элементы списка через <option>;
• зависимые (атрибут type=«radio») и независимые (атрибут type=»checkbox») переключатели.

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

.obratnuj-zvonok{
width: 100%;
max-width: 350px;
}

.form-zvonok{
width: 100%;
display: flex;
flex-direction: column;
padding: 0 20px;
box-sizing: border-box;
}

.form-zvonok div{
padding: 15px 0;
}

.bot-send-mail{
box-sizing: border-box;
width: 100%;
}

.form-zvonok label,.form-zvonok input{
display: block;
width: 100%;
box-sizing: border-box;
}

.form-zvonok label{
margin-bottom: 5px;
font-weight: bold;
}

.form-zvonok input{
padding: 10px 15px;
margin-top: 10px;
}

.form-zvonok label span{
color: red;
}

.form-zvonok .bot-send-mail{
padding: 15px;
margin-top: 10px;
background: none;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
background-color: #009b97;
cursor: pointer;
border: 3px #009b97 solid;
border-radius: 5px;
}

.form-zvonok .bot-send-mail:hover{
color: #009b97;
background-color: #fff;


Сначала сделаем ширину. В идеале ширина дива должна быть равна ширине родительского блока. Максимальная ширина принимает значение 350px. Не рекомендуем делать больше, так как форма окажется растянутой.

Теперь займемся упорядочиванием полей. Для начала их обернем в div и поставим отображение в flex. Отступы сверху и снизу добавят упорядоченность в структуру (20px). Итак, получится:

.form-zvonok{
width: 100%;
display: flex;
flex-direction: column;
padding: 0 20px;
box-sizing: border-box;
}

Здесь подпись и поля для ввода сообщения обернуты в div:

<div><label>Имя <span>*</span></label>
<input type='text' name='username' required></div>

Поработаем с кнопкой «Отправить». Сделаем ее ширину идентичной этому показателю у родительского блока. Далее box-sizing присваиваем border-box (функцию расчета ширины по границе).

.bot-send-mail{
box-sizing: border-box;
width: 100%;
}

Аналогичные действия проводим для подписи полей, чтобы получить:

.form-zvonok label,.form-zvonok input{
display: block;
width: 100%;
box-sizing: border-box;
}

Остается поработать над привлекательным внешним видом подписей и полей для ввода сведений.

.form-zvonok label{
margin-bottom: 5px;
font-weight: bold;
}

.form-zvonok input{
padding: 10px 15px;
margin-top: 10px;
}

Для изменения цвета используем следующий стиль:

.form-zvonok .bot-send-mail:hover{
color: #009b97;
background-color: #fff;
}

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

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

Сначала в код необходимо добавить дополнительный раздел (поле для ввода) и вопрос. Рассмотрим на примере:

<p>
<label for="bezspama">4+4*4=:</label>
<input name="bezspama" type="text" required />
</p>

Обращаем внимание, что математическое выражение может быть любым.

Далее необходимо заменить сведения в РНР обработчике. Он должен проверять не пустоту данных, а правильность ввода ответа на вопрос или математическое действие. Можно одновременно настроить два варианта защиты антиспам.

1. Появление иероглифов на кодировке Windows-1251. Для решения проблемы вводятся два дополнительных параметра для функции htmlspecialchars. В результате строка примет следующий вид:

$название = htmlspecialchars($_POST["название"], ENT_COMPAT, 'cp1251').

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

$from = "Reply-To: $email \r\n"

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

3. Не получается убрать капчу. Воспользуйтесь простыми рекомендациями:

• удалите данный блок из HTML кода;
• установите значение false для константы HAS_CHECK_CAPTCHA (расположена в обработчике).

4. Не уходит письмо. Не заполнено обязательное поле. Для упрощения процесса необходимо организовать автоматическую проверку и отображать поля с ошибками пользователю.