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

Источник:
 

 

 

 

 

 

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

 

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

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

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

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

 

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

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

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

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

<meta http-equiv='refresh' content='0; url=http://<span style="color: #ff6600;">ВАША ССЫЛКА</span>'> <span style="color: #008000;"><!-- Редирект --></span><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)) <span style="color: #008000;">/* Проверка скрытого поля */</span>{
if (isset($name) && isset($email) && isset($sub) && isset($body)){
$address = "<span style="color: #ff6600;">ВАША ЭЛЕКТРОННАЯ ПОЧТА</span>"; <span style="color: #008000;">/* Адрес получателя */</span>$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 ; <span style="color: #008000;">/* Выход после отправки письма */</span>}
exit; <span style="color: #008000;">/* Выход без отправки письма, если поле spam непустое */</span>?>

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

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

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

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

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

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

<h3>Форма обратной связи</h3>
<form action="/wp-content/themes/<span style="color: #ff6600;">ПАПКА ВАШЕЙ ТЕМЫ</span>/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>

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

<h3>Форма обратной связи</h3>
<form action="/wp-content/themes/<span style="color: #ff6600;">ПАПКА ВАШЕЙ ТЕМЫ</span>/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).

<span style="color: #008000;">/*стиль для всей формы*/</span>.form_kontact{
background-color: rgba(0, 120, 201, 0.6); <span style="color: #008000;">/*цвет фона для формы с прозрачностью*/</span>border: 1px solid #1576D3; <span style="color: #008000;">/*цвет бордюра для формы*/</span>border-radius:5px;} <span style="color: #008000;">/*закругление углов формы*/</span>/<span style="color: #008000;">*стиль для полей контакта*/</span>.input_kontact{width: 29%; <span style="color: #008000;">/*ширина поля*/</span>padding: 5px; <span style="color: #008000;">/*внутренние отступы*/</span>border-radius: 5px; <span style="color: #008000;">/*закругление углов поля*/</span>border: 1px solid #1576D3; <span style="color: #008000;">/*цвет бордюра для поля*/</span>margin: 5px; <span style="color: #008000;">/*внешний отступ*/</span>}<span style="color: #008000;">/*стиль для надписи Текст сообщения*/</span>.kontakt {margin: 5px; <span style="color: #008000;">/*внешний отступ для текста*/</span>}<span style="color: #008000;">/*стиль для поля текст сообщения*/</span>.text_kontact{width: 96% <span style="color: #008000;">/*ширина поля*/</span>height: 100%;<span style="color: #008000;"> /*высота поля*/</span>padding: 5px; <span style="color: #008000;">/*внутренние отступы*/</span>border-radius: 5px; <span style="color: #008000;">/*закругление углов поля*/</span>border: 1px solid #1576D3; <span style="color: #008000;">/*цвет бордюра для поля*/</span>overflow: auto; <span style="color: #008000;">/*управление блочным объектом, полосы прокрутки появляются при необходимости*/</span>margin-left: 5px; <span style="color: #008000;">/*внешний отступ слева*/</span>}<span style="color: #008000;">/*стиль для кнопки*/</span>.submit_kontact{background: #0E71F4; <span style="color: #008000;">/*цвет кнопки*/</span>padding:5px; <span style="color: #008000;">/*внутренние отступы*/</span>border: none; <span style="color: #008000;">/*отключение бордюров*/</span>border-radius: 5px; <span style="color: #008000;">/*закругление углов*/</span>box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 5px 0 rgba(0,0,0,.15); <span style="color: #008000;">/*параметры тени*/</span>color: #fff; <span style="color: #008000;">/*цвет шрифта*/</span>text-decoration: none; <span style="color: #008000;">/*нет подчёркивания на ссылке*/</span>margin-left: 5px; <span style="color: #008000;">/*внешний отступ слева*/</span>cursor: pointer; <span style="color: #008000;">/*курсор в виде руки*/</span>}<span style="color: #008000;">/*стиль для кнопки при наведении курсора*/</span>.submit_kontact:hover{background:#0671BE; <span style="color: #008000;">/*цвет кнопки*/</span>padding: 5px; <span style="color: #008000;">/*внутренние отступы*/</span>border: none; <span style="color: #008000;">/*отключение бордюров*/</span>border-radius: 5px; <span style="color: #008000;">/*закругление углов*/</span>box-shadow: inset 0 6px 3px rgba(120,200,230,.5),0 3px 4px rgba(0,0,0,.15); <span style="color: #008000;">/*параметры тени*/</span>color: #fff; <span style="color: #008000;">/*цвет шрифта*/</span>text-decoration: none; <span style="color: #008000;">/*нет подчёркивания на ссылке*/</span>margin-left: 5px; <span style="color: #008000;">/*внешний отступ слева*/</span>cursor: pointer; <span style="color: #008000;">/*курсор в виде руки*/</span>}

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

RSS
Нет комментариев. Ваш будет первым!
OyO