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


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

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

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

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

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

50 коммент. к статье “Форма обратной связи с защитой от спама

  • Андрей Назыров

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

    • Максим Зайцев От автора

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

    • Максим Зайцев От автора

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

  • Николай Вилков

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

    • Максим Зайцев От автора

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

  • Евгения

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

    • Максим Зайцев От автора

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

  • Евгения

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

  • Евгения

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

    • Максим Зайцев От автора

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

    • Максим Зайцев От автора

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

  • Денис

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

    • Максим Зайцев От автора

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

  • Денис

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

    • Максим Зайцев От автора

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

    • Максим Зайцев От автора

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

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

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

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

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

    • Максим Зайцев От автора

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

  • Stanislav

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

    • Максим Зайцев От автора

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

          • Максим Зайцев От автора

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

  • Дмитрий

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

    • Максим Зайцев От автора

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

  • Константин

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

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

    Спасибо

    • Максим Зайцев От автора

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

      • Константин

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

        • Константин

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

          • Максим Зайцев От автора

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

          • Константин

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

          • Максим Зайцев От автора

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

          • Константин

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

          • Максим Зайцев От автора

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

  • Сергей

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

    • Максим Зайцев От автора

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

  • Павел

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

    • Максим Зайцев От автора

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

  • Алёна

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

    • Максим Зайцев От автора

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

  • Елена

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

    • Елена

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

      • Максим Зайцев От автора

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

        • Елена

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

          • Максим Зайцев От автора

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