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

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

Думаю рассказывать о том, зачем нужно форма обратной связи нет необходимости. Каждый решает сам, нужна ли на его сайте/блоге такая форма или нет. А её назначение и так понятно из названия. А вот как создать такую форму на сайте или блоге и без плагина я вам расскажу.

Чем хороша эта форма?

Во-первых, легко устанавливается и настраивается.

Во-вторых, абсолютно не нагружает сервер. Зачем держать лишний плагин, ради одной формы обратной связи.

В третьих в форму встроена защита от СПАМа.

Как организована защита от спама

Как вы помните недавно я опубликовал статью «WordPress без спама в комментариях», в которой рассказал, как сделать скрытое поле в форме комментария и настроить фильтр. Так вот этот же принцип реализован и в форме обратной связи. Есть скрытое поле, когда человек решает отправить сообщение, то заполняет только видимые поля и сообщение проходит отправку. Когда же форму заполняет спамбот, то он заполняет все поля в форме, в том числе и скрытое и сообщение не проходит отправку. Фильтр настроен на проверку заполнения скрытого поля.

Как установить форму обратной связи на сайт

Шаг 1. Создание файла обработчика.

Именно этот файл будет отвечать за отправку сообщений с сайта. Итак, открываем редактор Notepad++ или хотя бы блокнот. И вставляем в новый файл — вот это код:

<meta http-equiv='refresh' content='0; url=http://ВАША ССЫЛКА'> <!-- Редирект -->
<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 непустое */
?>

Укажите ссылку, куда будет перенаправляться человек после отправки сообщения, а также не забудьте указать адрес электронной почты, на него будут приходить письма. Сохраняете файл в формате php. Название файла вы можете использовать своё, я же назвал файл message.php. Это название файла и путь к нему в дальнейшем потребуется прописать в самой форме.

Шаг 2. Загрузка файла на сервер.

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

А можно загрузить файл в папку с темой оформления и тогда его можно будет редактировать прямо из панели администрирования WordPress, но при смене темы оформления и настройки придётся менять.

Итак, рассмотрим пример с загрузкой файла в папку темы оформления:

/wp-content/themes/ВАША ТЕМА/message.php

Сделать вы это сможете с помощью файлового менеджера хостинга или через FTP-соединение.

Шаг 3. Создание формы на странице.

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

Открывает административную панель WP – «Страницы» – выбираете или создаёте страницу для размещения формы.

Открываете страницу в режиме текстового редактора и вставляете в нужное место — вот этот код:

<h3>Форма обратной связи</h3>
<form action="/wp-content/themes/ПАПКА ВАШЕЙ ТЕМЫ/message.php" method="post" name="obratka" class="form_kontact"><input class="input_kontact" style="color: #454D54;" name="name" type="text" onfocus="if (this.value == 'Введите Ваше имя') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваше имя';}" value="Введите Ваше имя" /> Ваше имя
<input class="input_kontact" style="color: #454D54;" 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="input_kontact" style="color: #454D54;" name="sub" type="text" onfocus="if (this.value == 'Тема сообщения') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Тема сообщения';}" value="Тема сообщения" /> Тема сообщения
<span class="kontakt">Текст сообщения:</span>
<textarea class="text_kontact" cols="1" 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>

Обязательно смените путь к файлу-обработчику. Этот код без применения стилей оформления, есть лишь несколько самых необходимых. Такая форма будет выглядеть вот так:

Шаг 4. Применение стиля к формы.

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

В качестве примера приведу стили, которые я использовал для оформления. Скопируйте эти стили и вставьте в файл Таблица стилей (style.css).

/*стиль для всей формы*/
.form_kontact{
background-color: rgba(0, 120, 201, 0.6); /*цвет фона для формы с прозрачностью*/
border: 1px solid #1576D3; /*цвет бордюра для формы*/
border-radius:5px;} /*закругление углов формы*/

/*стиль для полей контакта*/
.input_kontact{width: 29%; /*ширина поля*/
padding: 5px; /*внутренние отступы*/
border-radius: 5px; /*закругление углов поля*/
border: 1px solid #1576D3; /*цвет бордюра для поля*/
margin: 5px; /*внешний отступ*/
}

/*стиль для надписи Текст сообщения*/
.kontakt {margin: 5px; /*внешний отступ для текста*/
}

/*стиль для поля текст сообщения*/
.text_kontact{width: 96% /*ширина поля*/
height: 100%; /*высота поля*/
padding: 5px; /*внутренние отступы*/
border-radius: 5px; /*закругление углов поля*/
border: 1px solid #1576D3; /*цвет бордюра для поля*/
overflow: auto; /*управление блочным объектом, полосы прокрутки появляются при необходимости*/
margin-left: 5px; /*внешний отступ слева*/
}

/*стиль для кнопки*/
.submit_kontact{background: #0E71F4; /*цвет кнопки*/
padding:5px; /*внутренние отступы*/
border: none; /*отключение бордюров*/
border-radius: 5px; /*закругление углов*/
box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 5px 0 rgba(0,0,0,.15); /*параметры тени*/
color: #fff; /*цвет шрифта*/
text-decoration: none; /*нет подчёркивания на ссылке*/
margin-left: 5px; /*внешний отступ слева*/
cursor: pointer; /*курсор в виде руки*/
}

/*стиль для кнопки при наведении курсора*/
.submit_kontact:hover{background:#0671BE; /*цвет кнопки*/
padding: 5px; /*внутренние отступы*/
border: none; /*отключение бордюров*/
border-radius: 5px; /*закругление углов*/
box-shadow: inset 0 6px 3px rgba(120,200,230,.5),0 3px 4px rgba(0,0,0,.15); /*параметры тени*/
color: #fff; /*цвет шрифта*/
text-decoration: none; /*нет подчёркивания на ссылке*/
margin-left: 5px; /*внешний отступ слева*/
cursor: pointer; /*курсор в виде руки*/
}

В результате форма примет вот такой вид:

Если поковыряться в коде формы можно сделать, чтобы форма выглядела вот так:

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

А для наглядного примера советую посмотреть видеоурок, где я показываю, как установить форму и как она работает.

Также друзья для облегчения задачи предлагаю скачать исходные файлы.

А у меня на сегодня всё, я желаю вам удачи! И помните, я всегда рад видеть вас на своём блоге  До встречи в новых статьях и видео.

PS: если вам интересна тема создания форм, то посмотрите статью «Как создать красивую форму подписки».

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