Как создать плавающую форму обратной связи с защитой от спама

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

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

Сразу должен предупредить вас, урок я максимально упростил, так что сможет справиться даже новичок в сайтостроении. Нужно будет лишь выполнить несколько определённых шагов. А если вы захотите разобраться во всех тонкостях и сделать изменения под себя, то знания CSS и HTML будет как нельзя кстати.

В чём принцип работы формы

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

1. Предоставить возможность посетителям связаться с автором сайта.
2. Улучшить поведенческие факторы.

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

И всё это лишь благодаря одному маленькому конвертику на сайте.

Подготовительный этап

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

Файл mail.png вы должны скопировать в папку к остальным изображениям (/wp-content/uploads/год/месяц). Ну, или в любое другое место, конечно, на ваше усмотрение. Я же предпочитаю, чтобы все изображения были в одном месте.

Файл message.php нужно скопировать в папку темы вашего блога (/wp-content/themes/BusinessWeb/message.php). После того как файл будет скопирован, внесите необходимые изменения:

1. Указать страницу, на которую будет перенаправлен посетитель после отправки сообщения.
2. Указать почтовый ящик для получения писем.

<meta http-equiv='refresh' content='0; url=АДРЕС ПЕРЕНАПРАВЛЕНИЯ ПОСЕТИТЕЛЯ ПОСЛЕ ОТПРАВКИ СООБЩЕНИЯ'> <!-- Редирект -->
<meta charset="UTF-8" />

<?php
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == 'Введите Ваше имя') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == 'Введите Ваш e-mail') {unset($email);}}
if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == 'Тема сообщения') {unset($sub);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == 'Введите текст сообщения') {unset($body);}}
if (isset($_POST['spam'])) {$spam = $_POST['spam'];}
if (empty($spam)) /* Проверка скрытого поля */
{ 
if (isset($name) && isset($email) && isset($sub) && isset($body)){
 
$address = "АДРЕС ПОЧТОВОГО ЯЩИКА ДЛЯ ПРИЁМА ПИСЕМ"; /* Адрес получателя */
$subject = "Сообщение с сайта";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$subject,$mes,"Content-type: text/plain; charset = UTF-8\r\nFrom: $email");
if ($send == 'true')
{$ms = 'Спасибо за сообщение, в ближайшее время я вам отвечу!';}
else {$ms = 'Ошибка, сообщение не отправлено!';}
 }
else
{
$ms = 'Сообщение не отправлено, вы заполнили не все поля!';
}
echo "<script type=\"text/javascript\">alert( \"$ms\");</script> \n";

exit ; /* Выход после отправки письма */
}
exit; /* Выход без отправки письма, если поле spam не пустое */
?>

На этом подготовительный этап завершён.

Создание стилей оформления для формы обратной связи

На самом деле вы ничего создавать не будете. Достаточно будет взять приведённые ниже стили и вставить их в таблицу стилей (style.css).

Итак, открываем административную панель WordPress – «Внешний вид» — «Редактор» — «Таблица стилей»

В файл style.css вставляете вот эти стили:

/* Основные свойства */
.mail ul, .mail li, .mail h3 {
 padding: 0; 
 margin: 0; 
 background: none;
 list-style: none!important;
 color:#B5B5B5;
}
.mail {
 font-size: 12px;
}
.mail * {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 border-radius: 5px 0px 0 5px;
}
.mail a {
 text-decoration:none;
}
.mail-content {
 position: relative;
}
.mail .contact-tabs li a {
 padding: 5px;
 margin: 0;
 color: #999;
 display: block;
}
.mail .contact-tabs li img {
 padding: 0;
 margin: 0;
 display: block;
 width: 24px;
 height: 24px;
}
.mail-slider h3 {
 padding: 15px;
 font-size: 18px;
 line-height: 18px;
}
/* Смещение иконки */
.right .contact-tabs {
 padding-top: 8px;
}
/* Стиль формы */
.mail .contact-tabs li.dark, .mail-slider .tab-content.dark .tab-inner {
 color: #B5B5B5;
 border: none;
}
.mail .contact-tabs li.dark {
 background: #292929;
}
.mail .contact-tabs li.dark.active, .mail-slider .tab-content.dark .tab-inner, .mail .contact-tabs li.dark:hover {
 background: #212121;
}
#kontact_mail{
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;}
#kontact_mail:hover{
-webkit-transform: translate(-280px,0px);
-moz-transform: translate(-280px,0px);
-o-transform: translate(-280px,0px);
}
.kontact_form{
border-top: 1px solid #333;
padding: 15px;
}
.kontact_input,.kontact_text{
background-color: #393939;
border: 1px solid #333;
color: #B5B5B5;font: normal 12px/12px Arial, sans-serif!important;
display: inline;
width: 100%;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
}
.submit_kontact{
text-shadow: 0 1px 0 #fff;
color: #555;
padding: 5px 12px;
border: 1px solid;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
}
.submit_kontact:hover{
text-shadow: 0 1px 0 #fff;
color: #555;
padding: 5px 12px;
border: 1px solid;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
cursor: pointer;
border-radius: 3px;
opacity: 1;
}

Если после проверки работы формы, будут некоторые недочёты в дизайне, то вы уже сможете подправить дизайн в зависимости от ваших потребностей. К примеру в видеоуроке вы увидите, как исправить небольшой недочёт с полем для ввода сообщения (textatea). Такие нюансы возникают в следствии наследования css стилей. Но, все они легко исправимы.

Вставка в исходный код HTML каркаса формы обратной связи

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

Итак, разберём пример вставки кода на примере файла index.php. Открываем административную панель WordPress – «Внешний вид» — «Редактор» — «index.php». Код формы нужно будет вставить таким образом, чтобы не нарушить работу всего шаблона. Поэтому будьте внимательны, и посмотрите в видеоуроке, как я это делаю.

В общем, вам нужно будет вставить вот это код HTML каркаса формы обратной связи:

<div id="kontact_mail" class="mail right align-top sliding" style="width: 280px; position: fixed; margin-right: -280px; top: 80px; right: 0px; z-index: 1000;">
<div id="contact-tabs" class="mail-content">
<ul class="contact-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -33px; width: 33px;">
<li class="mail-form first dark">
<a href="#" rel="0" title="Написать сообщение">
<img src="ССЫЛКА К ФАЙЛУ mail.png" alt="">
</a>
</li>
</ul>
<ul class="mail-slider">
<li class="tab-content tab-0 dark" style="height: 390px; width: 280px; position: relative; display: list-item;">
<div class="tab-inner" style="height: 390px;">
<h3>Написать автору</h3>
<form action="ССЫЛКА К ФАЙЛУ message.php" method="post" name="obratka" class="kontact_form">
<input class="kontact_input" name="name" type="text" onfocus="if (this.value == 'Введите Ваше имя') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваше имя';}" value="Введите Ваше имя" /> 
<input class="kontact_input" name="email" type="text" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" value="Введите Ваш e-mail" />
<input class="kontact_input" name="sub" type="text" onfocus="if (this.value == 'Тема сообщения') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Тема сообщения';}" value="Тема сообщения" />
<textarea class="kontact_text" name="body" rows="10" onfocus="if (this.value == 'Введите текст сообщения') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите текст сообщения';}" value="Введите текст сообщения" ></textarea>
<input name="spam" type="text" style="display:none" value="" />
<input class="submit_kontact" type="submit" value="Отправить сообщение" />
</form>
<div class="mail-response">
</div>
</div>
</li>
</ul>
</div>
</div>

Обязательно смените ссылки на изображение конвертика (файл mail.png) и на файл обработчик (message.php). Эти фрагменты, я обозначил оранжевым цветом.

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

Ошибки, которые могут, возникнут, сводятся лишь к правильному указанию ссылок к файлам. Будьте внимательны и у вас всё получится. Ну а если вы захотите немного подправить стили формы, то для этого достаточно будет подправить CSS стили. Вот и всё, на этом сегодня урок закончен. Обязательно посмотрите видеоурок, в нём все ваши действия показаны наглядно.

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

И в завершение, в преддверии первого весеннего праздника, хочу поздравить милых женщин с Международным женским днём. Желаю, чтобы рядом с вами всегда был мужчина, с которым вы всегда будете себя чувствовать самой любимой, самой желанной, самой счастливой! С 8 Марта, дорогие женщины!

С уважением, Максим Зайцев.