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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?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. Не уходит письмо. Не заполнено обязательное поле. Для упрощения процесса необходимо организовать автоматическую проверку и отображать поля с ошибками пользователю.