Делаем хорошую форму обратной связи

Часто бывает, что появляется необходимость в размещении формы обратной связи на странице контактов, так как она позволяет отправлять пользователю информацию прямо с сайта.

В данной статье я постараюсь рассказать, как в течении 5 минут, быстро и просто, можно создать отличную форму обратной связи и разместить её у себя на сайте.

Рассмотрим два этапа создания формы:

1. Создание html кода формы

Есть неплохой сервис, созданий формы обратной связи, предоставляющий возможность создания и размещения. Ну что же, приступим! Переходим по ссылке, и начинаем создавать html форму, указываю необходимы цвета и параметры, а также размеры формы. Чтобы указать размеры, просто потащите за правый нижний угол блока формы и раздвиньте её на необходимую вам ширину и высоту. После чего необходимо нажать на кнопку «Настроил!». После чего вам будет предложено вставить код вашей формы у себя на сайте.

Если вы хотите пользоваться этим сервисом до конца, то есть использовать их обработчик отправки писем, то спокойно можно вставлять данный код не задумываясь и следовать дальнейшим указаниям.

НО, в коде который вам предложат будет два скрытых блога с рекламой. Первый невидимый блок после кнопки «Отправить»:

</pre>
<div id="show_ipwhois" style="display: none; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 4px;"><a href="http://ip-whois.net/test-speed-internet/"><small>скорость интернета</small></a></div>
<pre>

и второй – ссылка на картинке с капчей:

<a title="тестирование интернет скорости" onclick="return show_ipwhois()" href="http://ip-whois.net/test-speed-internet/" target="_blank"><img style="float: left; border: none;" src="http://ip-whois.net/forma-obratnoj-svyazi/images/capcha.php" alt="" /></a>

Не будем рассматривать тот случай когда нам всё равно на рекламу, и мы готовы просто пользоваться обработчиком отправки писем предоставленным данным сервисом. Мы будем использовать свой обработчик, а вот готовую красивую форму и JavaScript проверки полей мы позаимствуем у сервиса. Правда придётся отказаться от капчи.

Итак, удаляем блоки с рекламой, капчу, при этом не забудьте в javaScript’e удалить проверку на капчу, т.е находим:

res = res && (document.getElementById("name").value != "") && (document.getElementById("msg").value != "") && (re.exec(document.getElementById("email").value) != null) && (document.getElementById("capcha").value != "");

и заменяем на:

res = res && (document.getElementById("name").value != "") && (document.getElementById("msg").value != "") && (re.exec(document.getElementById("email").value) != null);

Далее находим  строку:

</pre>
<form id="callbackForm" action="http://ip-whois.net/forma-obratnoj-svyazi/?route=mail" method="post">

и меняем в ней action=»http://ip-whois.net/forma-obratnoj-svyazi/?route=mail» на action=»ваш_сайт/sendmail.php» , или другими словами вставляем адрес вашего обработчика отправки (ниже я расскажу как его создать, это будет второй этап) .

Всё, собственно, теперь код формы и её стиля можно закидывать к себе на сайт и вставлять в нужном месте. Переходим ко второму этапу – создание обработчика отправки сообщений.

2. Создание обработчика для отправки сообщений с сайта

Продолжая пример, создаём в корне сайта файл sendmail.php и вставляем в него следующий код:

/* Проверка на заполнение полей */
if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['msg'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['msg'];

/* Убираем все лишние пробелы и переносы строк  и преобразуем все теги html в символы*/
$name = htmlspecialchars(trim($name));
$email = htmlspecialchars(trim($email));
$message = htmlspecialchars(trim($message));

/* Формируем сообщение */
$yourmail = "ВАША_ПОЧТА"; // вставьте сюда ваш email на который будут приходить письма пользователей
$sub = "Сообщение с сайта ВАШ_САЙТ"; //вставьте название вашего сайта
$messsage = "Пользователь: $name \nс email адресом E-mail: $email \nОтправил сообщение: \n$message";

/* Отправка */
$sendmail = mail ($yourmail,$sub,$messsage,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");
if ($sendmail == 'true'){
echo '<script type="text/javascript">// <![CDATA[
alert(\'Сообщение отправлено!\');
// ]]></script>';
}
else {
echo '<script type="text/javascript">// <![CDATA[
alert(\'Ошибка! Сообщение не отправлено.\');d
// ]]></script>';
}
}
echo '<script type="text/javascript">// <![CDATA[
document.location.href="http://ВАШ_САЙТ/СТРАНИЦА_С_ФОРМОЙ_ОБРАТНОЙ СВЯЗИ";
// ]]></script>';
?>

При этом заменяем все необходимые параметры в файле (такие как ВАША_ПОЧТА, ВАШ_САЙТ и т.д.). Собственно всё! Теперь у вас на сайте есть, красивая форма обратной связи.

Также можно скачать скрипт формы обратной связи с blogzor.ru. Форма будет выглядеть так:

Скачать:

  feedback_by_blogzor.zip (2,6 KiB, 4 206 hits)

Архив содержит :

• feedbackform.css – стили оформления
• feedbackform.js – ява скрипты проверки полей ввода
• sendmail.php – обработчик для отправки сообщений
• mailform – форма для отправки сообщений

UPD 28.08.2013

Написал новую статью про jQuery плагин формы обратной связи в стиле Windows 8