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

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

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

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

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

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

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

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

Как вы помните недавно я опубликовал статью «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: если вам интересна тема создания форм, то посмотрите статью «Как создать красивую форму подписки».

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 56
  1. Андрей Назыров

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

    1. Максим Зайцев (автор)

      Андрей, — это легко сделать. И форму можно под любые нужды доработать.

  2. Сергей

    Максим, как поля в один горизонтальный ряд забацать?

    1. Максим Зайцев (автор)

      Сергей, в исходных файлах я приложил два варианта, файл коды формы.txt. Выбирайте какой понравится.

  3. Николай Вилков

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

    1. Максим Зайцев (автор)

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

  4. Евгения

    Максим, спасибо огромное! Я как раз пытаюсь создать форму. Очень толково у вас все написано, даже видео урок есть. Я — чайник, но с вашей помощью надеюсь осилить. Потом отпишусь, как получилось.

    1. Максим Зайцев (автор)

      Женя, очень интересно будет узнать о вашем результате. Если вдруг будут вопросы, обязательно пишите. Желаю удачи!

  5. Евгения

    Спасибо, взаимно! И за предложение помощи тоже. Кстати, вопросы уже появились:-) Я создала файл в блокноте, но записать его как php не получается: там только формат txt… как быть?

    1. Максим Зайцев (автор)

      Просто, вместо .txt пишите .php

  6. Евгения

    Спасибо, Максим, все получилось! Стилей я не делала (возможно, позже), но в целом даже мне, совершенной невеже в программировании, хватило полчаса, чтобы со всем разобраться. Теперь на сайте есть форма Обратной связи.
    Максим, посмотрите пожалуйста — у меня перед полями дублируются названия. Возможно ли их убрать и что для этого нужно сделать?
    Заранее спасибо!
    Вот ссылка: http://blond-n-roll.ru/obratnaya-svyaz/

    1. Максим Зайцев (автор)

      Женя, если вы скачали исходные файлы, то можете использовать второй вариант формы. Там уже всё готово для исполнения полей в горизонтальном положении.
      А вообще в коде нужно просто удалить название полей. Примерно так, находите окончание строки value=»Введите Ваш e-mail» /> Электронная почта — и удаляете «Электронная почта». Так же делаете и с остальными полями. Только будьте внимательны, удаляйте фразы после /> «Ваше имя», «Электронная почта», «Тема сообщения».

  7. Евгения

    Все убралось. :-) Спасибо за помощь!!

    1. Максим Зайцев (автор)

      Класс! Осталось стили добавить под ваш блог и будет ещё лучше!

  8. Денис

    Максим сделал все по вашей инструкции. Письма уходят, но не приходят. Почему?

  9. Денис

    Вообщем письма не приходят на те адреса где содержится имя сайта.Где имени сайта нет письма приходят, но в спам.

    1. Максим Зайцев (автор)

      Здравствуйте, Денис. Проблема с почтовыми ящиками, которые вы указываете в файле обработчике. У меня форма привязана к почтовому ящику с доменом моего блога и работает всё отлично. Пересмотрите, возможно, где-то допустили ошибку. Пробуйте, если не получится, пишите, что-то придумаем. Желаю удачи!

  10. Денис

    Уже все перепроверил не хочет работать с ящиком домена сайта. В настройках на стороне хост провайдера нужно менять МХ записи? Вот ещё что хотел спросить. При кликаньи в поля для заполнения надписи ( имя, e mail, сообщения) не исчезают, а приходится затирать самостоятельно?

    1. Максим Зайцев (автор)

      Денис, а доменная почта у тебя как сделана, на яндексе, гугле или на самом хостинге. Если родная, та что на хостинге, то возможно в этом и проблема. Нужно будет в техподдержке интересоваться, что к чему. У меня на яндексе, так даже твои эксперименты приходят ;-)
      По поводу исчезновения подсказок, смотри код формы начиная с оператора onfocus, скорей всего где то либо кавычка пропущена, либо запятая. В общем мелочь.

  11. Денис

    У меня доменная почта на яндексе. А с какого адреса приходят эксперименты?)

    1. Максим Зайцев (автор)

      У меня тоже через Яндекс реализована и работает отлично. А эксперименты приходили с goredey79@gmail.com

  12. Альфред Старобинец

    Здравствуйте, Максим!

    Спасибо Вам за эту форму обратной связи.

    Я есть тот самый «новичек в сайтостроении». У меня сайт на Joomla. На главной странице три колонки, а на остальных страницах контент выводится во всю ширину.
    Что будет на этих страницах, если вставить код формы в файл index.php? Я так понимаю, что конвертик будет наезжать на тексты и картинки (там полей практически нет, а делать их не хочется).
    Не подскажите, что можно сделать, чтобы этот конвертик все же был на всех страницах. Если это сложно, то как сделать, чтобы он был только на главной странице. Насколько я понимаю, в Joomla файлов single.php нет.
    Простите чайника за глупые вопросы.
    С уважением, Альфред Старобинец

    1. Максим Зайцев (автор)

      Здравствуйте, Альфред. Вы имеете ввиду «Конвертик», который фиксирован по правому краю в окне браузера (статья: http://1zaicev.ru/kak-sozdat-plavayushhuyu-formu-obratnoj-svyazi-s-zashhitoj-ot-spama/)? Если, да, то вы смело можете вставлять код в index.php. Так форма будет доступна с любой страницы. Всплывающая форма будет появляться над правым сайтбаром, с небольшим напуском. А за счёт свойства z-index — будет смотреться очень гармонично.
      Только не забудьте сделать резервную копию файла index.php, перед началом экспериментов. Желаю удачи!

  13. Stanislav

    Максим, так проверка не работает! Вы забыли прописать саму проверку в php файле. Если брать все как вы описали (все иходники), подменив только на свой адрес, форма отправляет письмо, даже если ничего не заполнять, — вот так!!!
    :)

    1. Максим Зайцев (автор)

      Здравствуйте, Станислав. Форма работает отлично. В том числе и на моём блоге. Проверка скрытого поля прописана в файле php. Полагаю, вы не обратили на это внимание.

      1. Stanislav

        Проверка на спам работает, а вот проверка на заполненость полей — нет…

        1. Stanislav

          Ничего не заполняя в полях, форма отправляет пустое сообщение.

          1. Максим Зайцев (автор)

            Станислав, возможно, вы что то делаете не так. Всё работает отлично. Форма на моём блоге — реальное тому подтверждение.

  14. Дмитрий

    Максим, проверка на заполнение полей (речь не идет о spam) — не работает в Вашем примере. Пожалуйста, покажите URL формы на вашем сайте — чтобы посмотреть.

    1. Максим Зайцев (автор)

      Дмитрий, добрый день. Форма обратной связи установлена у меня на странице «Об авторе». Это та же форма, что и в примере.

  15. Константин

    Максим, здравствуйте! Подскажите, как прописать перенаправление на другую страницу после отправки сообщения?
    В моем получается следующее:
    — переходит на страницу 404

    — выплывает окно с крокозябрами

    Спасибо

    1. Максим Зайцев (автор)

      Здравствуйте, Константин. Редирект указан в первой строке кода. Обратите внимание на кавычки и пробелы. Причина в этом, не правильный адрес. Посмотрите внимательно.

      1. Константин

        Спасибо, проблема решилась. Появилась другая,всплывает окно и там крокозябры. Если есть возможно могу скинуть скриншот.

        1. Константин

          Все, сделал, спасибо. В редакторе на странице обработчика нужно заменить кодировку на UTF-8.
          Это я так, для таких как я написал))

          1. Максим Зайцев (автор)

            Константин, здравствуйте. Хорошо, что сами разобрались и с посетителями поделились. Такие вроде мелочи, но это дополнение к статье и решение задачи, с которой может столкнуться посетитель.

          2. Константин

            Максим, здравствуйте. Скажите, могу ли я использовать ваш файл обработчик для реализации другой формы? Что нужно будет изменить в обработчике, помимо файла message.php?
            Спасибо.

          3. Максим Зайцев (автор)

            Здравствуйте, Константин. О какой другой форме идёт речь? Если эта форма обратной связи, то да. При условии, что в ней есть поля: Ваше имя, e-mail, текст сообщения. Или же их можно заменить на соответствующие в вашей форме.

          4. Константин

            Спасибо за ответ. Напишите адрес почты, я скину код, может получится это реализовать…

          5. Максим Зайцев (автор)

            Константин, вы можете отправить сообщение через форму обратной связи, на странице «Об авторе». Или напрямую по ардесу maksim@1zaicev.ru

  16. Сергей

    Доброго времени суток.
    Форма работает, делает отправку во всех случаях, но письма не приходят.
    Почему так? Подскажите пожалуйста в чем я ошибся

    1. Максим Зайцев (автор)

      Здравствуйте, Сергей. Проверьте правильно ли вы указали адрес почты. А также проверьте папку СПАМ в вашем почтовом ящике. Причина может быть только вы этом.

  17. Павел

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

    1. Максим Зайцев (автор)

      Здравствуйте, Павел. Да, можно проверку поставить на поле e-maila или другие поля. Возможно дополню код.

  18. Алёна

    Максим, здравствуйте!
    Подскажите, пожалуйста, как избежать форматирования кода вордпрессом. Вставляю ваш код в текстовый редактор. Работает хорошо, но как только переключаю текстовый редактор на визуальный, вордпресс съедает часть кода и он становится не рабочим.
    Спасибо . жду ответа

    1. Максим Зайцев (автор)

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

  19. Елена

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

    1. Елена

      С этим разобралась, отправка сообщений работает. выбрала горизонтальный шаблон, в редакторе он отображается , а при переходе на сайт отображается первая форма и без стилей.

      1. Максим Зайцев (автор)

        Отлично, рад что разобрались. Елена проверяйте кэш. Судя по вашим комментариям вам нужно сбросить кэш или отключить временно. Это желательно делать, когда работаете с дизайном.

        1. Елена

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

          1. Максим Зайцев (автор)

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

  20. Ко

    Добрый день, форма приходит,
    Но все данные в полях на русском языке приходят не в той кодировке. windows 1251
    все хорошо
    Несмотря на указанные в скрипте utf-8
    Даже если убрать данные о назначении кодировки данные все равно приходят кривые…

    1. Ко

      Ладно этот вопрос решился, тогда другой вопрос.
      Как модифицировать обработчик что бы данные отправлялись от определенного адреса?
      То есть например поле e-mail у меня нет, но тогда сообщение отправляется от адреса сервера и попадает в спам…
      Как решить вопрос?

      1. Максим Зайцев (автор)

        Рад, что с предыдущим вопросом справились. Если нет поля электронной почты, то его просто нужно исключить из обработчика. То есть убрать всё, что связано с email

  21. Vetal

    Все равно пропускает спам…. :(

    1. Максим Зайцев (автор)

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

  22. Любовь

    Максим, Здравствуйте! Можете мне помочь? Мне нужно такая защита от спама для html сайта.

Добавить комментарий