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

Как сделать форму обратной связи на 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? Только время пользователя зря потратили. А если пользователь захочет указать свою почту - он ее укажет, он и так без проверки ее помнит.

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

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

<form action= "../form/post.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="", что бы потом проверка на пустоту проходила корректно.
Вся основная магия будет происходить в файле post.php, который мы вызываем из папки, расположенной в корне сервера "form/post.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% блокировок можно рассчитывать:)

Что должно быть в файле post.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="Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра."; 

Получаем информацию о странице, на которой был пользователь и заполнял форму
$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
}

Условие сделано с инверсией через знак "!" перед empty: т.е. если поле не пустое -> функция empty() даст ложь -> инверсия в истину -> выполнение выхода

Использование стоп-слов.

Очевидно, что слов http (мошенники, реклама или ссылочное продвижение) viagra виагра (реклама дешевых "аналогов") - не должно быть в тексте сообщения. Делаем проверку на вхождение в текст сообщения.

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']);

Итого файл form.php полностью ниже:

────────────────────────────────────────────────────────────┐
<?
// ----------------------------конфигурация-------------------------- //
$adminemail="Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра."; // e-mail админа
$backurl=$_SERVER['HTTP_REFERER']; // url страницы заполнения формы
//Получаем заголовок страницы
$f=join('', file($backurl));
$begin=strpos(strtolower($f), "<title>", 0);
$end=strpos(strtolower($f), '</title>', $begin);
$backtitle=substr($f, $begin, $end-$begin);
$backtitle = strip_tags($backtitle);
// title страницы заполнения формы
//---------------------------------------------------------------------- //
// Принимаем данные с формы с убиранием пробелов по краям и тэгов внутри
$name=trim(strip_tags($_POST['name']));
$email=trim(strip_tags($_POST['email']));
$tel=trim(strip_tags($_POST['tel'])); // ловушка для ботов 1
$message=trim(strip_tags($_POST['message']));
$adress=trim(strip_tags($_POST['adress'])); // ловушка для ботов 2
//---------------------------------------------------------------------- //
//проверка на пустоту трех полей одновременно - от хулиганов
if (empty($name) && empty($email) && empty($message))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // на выход из PHP
}
//проверка на пустоту поля сообщения - есть нет текста (хакеры), то не нужно письма
if (empty($message))
{
header("Location: ".$_SERVER['HTTP_REFERER']); // возврат на страницу с формой с ее очисткой
exit(); // на выход из 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
}
// формируем тело письма
$msg = "Текст: $message
Данные страницы:
title: $backtitle
url : $backurl
Данные отправителя:
e-mail: $email
Name : $name ";
// Отправляем письмо админу
mail("$adminemail", "seotable.ru от $name <$email>", $msg, "Content-type:text/plain; Charset=utf-8 \r\n");
// Возврат на ту же страницу сайта с очисткой - иначе останемся внутри скрипта
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); // три параметра
}


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

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

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

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

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

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

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

Некоторые хостинги требуют для отправки наличие созданного почтового ящика у себя на сервере вида Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. и указания его в явном виде в качестве 4-го параметра:

Вот так не совсем правильно - письма пойдут в папку "спам", 
mail("$adminemail", "Тема сообщения", $msg, "From: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. \r\n");

Вот так правильно - нужно еще скрытое поле добавить (внутри письма) с адресом для ответа
mail("$adminemail", "Тема сообщения", $msg, "From: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. \r\n Reply-To: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.");

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



 


  • Юзабилити (1333)

  • Форма обратной связи (1013)

    Рассмотрим самый простой вариант формы обратной связи. Как сделать форму обратной связи на HTML? Вот такую?Работу формы можно посмотреть на сайте www.titovsergei.ruЧестный ответ - никак, HTML - это язык разметки (т.е. можно сделать только "скелет" формы), а нам нужны действия с данными. Как минимум нужна связка HTML+PHP. Причем данная связка будет работать только...

  • Раздел "контакты" (661)

    Мы хотим получить от пользователя обратную связь.Можно использовать:1. Форму обратной связи на сайте2. Номер телефона для связи3. Адрес электронной почтыНадо исходить из того, что бы пользователю было как можно проще. В этом отношении идеальный вариант - форма обратной связи. Нужно только написать и нажать кнопку "Отправить". Для варианта телефон...

  • Якорь html (653)

    Три основных вопроса:1. Что это?2. Зачем мне это нужно?3. Как это работает?1. Итак - что это?Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Ссылка с якорем содержит символ #, после которого идёт идентификатор.Переход пользователя по ссылке на якорь приводит...

  • Хлебные крошки (453)

  • Глубина просмотра (350)

    Что такое глубина просмотра, зачем она нужна и где ее можно посмотреть?Глубина просмотра сайта - один из основных параметров сайта, который сильно влияет на его продвижение. Количество просмотренных страниц делится на число визитов - получается в среднем, сколько страниц просмотрел один...

  • Заголовки и шрифты (334)

    Зачем нужно как-то выделять заголовки на web-странице? Просто выделение жирным шрифтом недостаточно для робота - он не поймет, что это. То ли что-то важное выделили, то ли это заголовок.Для заголовков используются тэги h1, h2, h3 и h4. На странице должен быть только один тэг h1, остальных тэгов...