G|Translate: English EN Français FR Deutsch DE Italiano IT Русский RU Español ES

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

4.4/5 - (8 голосов)

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

Как сделать форму обратной связи на 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.phpmethod="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 страницы отправки без ссылки. Долго искал причину…..
Письма-то заполнены тестовой информацией и приходят в папку «Спам», а для этой папки ссылки и картинки отключена. Смешно.
Если письмо приходит в папку «Входящие» — то со ссылками все в порядке.

ВАЖНО.

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

Подпишитесь в VKontakte - нажмите кнопку
Подпишитесь в Telegram - нажмите кнопку
Наша группа ODNOKLASSNIKI

Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла




Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)

В Вашем браузере должна быть настроена обработка ссылок mailto

site_post@bk.ru

или просто скопируйте адрес e-mail



Почитать в разделе

Как отправить e-mail с сайта?

Хотим получать заявки с сайта по почте или другие важные уведомления. Нужно отправить письмо с сайта. Как это сделать? Есть несколько способов. Используем сервер SMTP хостера Делается просто, но не всегда работает :( на части хостингов достаточно указывать получателя, на некоторых хостингах предварительно нужно создать служебный ящик и указать его в заголовках $headers иногда функция mail() просто отключена, что избежать спамовых почтовых рассылок (необходимо решать с саппортом) Итого: работает, но не всегда при переезде сайта на другой хостинг всё может сломаться Через функцию mail() php  ВАЖНО: функция работает - но все заголовку нужно указывать. Если части...
(Читать полностью...)

  • Всего статей в разделе: 5
  • Показано статей в списке: 4
  • Сортировка: название по алфавиту

Загадочные буквы MX, SPF, DKIM для EMAIL

Вот такая сложная картинка Вся эта красота нужна для того, что бы получатель письма email мог проверить истинность отправителя. Настраивается у хостера в разделе "записи DNS" для текущего домена. Лень спамеров всё это заполнять - позволяет сервисам электронной почты отправлять кривые письма сразу в папку СПАМ. По самим терминам: MX запись  (от англ. Mail eXchanger) — тип DNS-записи, предназначенный для маршрутизации электронной почты с использованием протокола SMTP. DMARC (Domain-based Message Authentication, Reporting and Conformance) -  идентификация сообщений, создание отчётов и определение соответствия по доменному имени — это техническая спецификация, созданная группой...
(Читать полностью...)

Кодировка картинок Base64

Base64 — стандарт кодирования двоичных данных при помощи только 64 символов ASCII.   Алфавит кодирования содержит  латинские символы A-Z, a-z и 0-9 (62 знака) и 2 дополнительных символа, зависящих от системы реализации. Каждые 3 исходных байта кодируются 4 символами (увеличение на ¹⁄₃). Вот пример. Слева закодированный текст в Base64 - справа его расшифровка. Это конечно здорово, но возникает вопрос Зачем нужна кодировка Base64 Объем данных  увеличивается на 1/3. Да, это как бы делает не читаемым  текстом для человека - но это же просто кодировка. Декодеров полно. А где еще у нас есть двоичные данные? Изображения и картинки! Вот, например самая первая картинка,...
(Читать полностью...)

Коды ошибок почтового сервера

Код SMTP ошибок состоит из 3 цифр, каждая из которых имеет свое значение. Первая цифра указывает на то, был ли принят и обработан ваш запрос. Существует 5 значений для первой цифры кода SMTP ошибки Сервер принял команду, но не предпринял никаких действий, так как ожидает подтверждения на выполнение запрашиваемых действий. Действие было успешно выполнено, и сервер готов принимать новую команду. Сервер принял команду, но для её завершения требуется дополнительная информация. Возник временный сбой. Если не последует изменений при повторении команды — попробуйте ещё раз. Сервер столкнулся с неустранимой ошибкой, ваша команда не будет обработана. Если код начинается с цифры 2...
(Читать полностью...)

Протокол MailTo

Это волшебство, позволяющее одним кликом мышки на сайте написать письмо Вспомним HTML для ссылок MailTo Базовая конструкция HTML для создания ссылки email <a href="mailto:info@mydomen.ru">Напишите нам</a> Вы сразу получаете бланк нового письма с указанными адресом email   Поддерживается расширенный формат - можно дополнительно указывать все остальные параметры письма после знака "?" Тема письма <a href="mailto:info@mydomen.ru?subject=Тестовое письмо">Напишите нам</a> Получатели письма в  копии (и скрытые получатели тоже) <a...
(Читать полностью...)

X

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