Защита от спама для Contact Form 7 WordPress

Защита от спама для Contact Form 7 Wordpress

Приветствую Вас, дорогой читатель моего блога! В данной статье я подробно расскажу о том, как сделать эффективную защиту от спама для Contact Form 7.

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

Для того чтобы избавиться от этой проблемы давайте рассмотрим встроенные в Contact Form 7 способы защиты от спама.
А также научимся их устанавливать и настраивать на своём сайте.

Для этого перейдём в административную часть сайта и перейдём к редактировании формы обратной связи Contact Form 7, которая используется у вас на сайте.

В боковом меню выбираем Contact Form 7 –> Формы -> находим нужную форму и нажимаем на ссылку «Изменить» под названием этой формы.
редактирование формы Contact Form7
О том как добавлять в эту форму текстовые поля, выпадающие списки и так далее я подробно рассказывала в этой статье. Если интересно, обязательно почитайте!

Защита от спама для Contact form 7 при помощи поля acceptance

Первое поле которое мы можем использовать для решения данной проблемы называется acceptance — обычно используется на сайтах для соглашения с определенными условиями сайта. Смысл работы данного поля заключается в том, что пока не будет поставлена галочка, сообщение не будет отправляться.
spam-protect1

Для того что бы использовать данное поле для защиты от спама вы можете выставить, что бы эта галочка была по умолчанию снята и возле галочки был написан текст, например: «Поставьте галочку, если вы не робот». Таким образом, пока пользователь не поставит галочку, данные с формы не будут отправляться.

Для того чтобы вставить это поле просто щёлкаем мышкой по кнопке с его названием.

защита от спама при помощи поля acceptance

Данное поле имеет несколько настроек:

  • Make this checkbox checked by default – изначально, галочка выставлена по умолчанию и пользователю не нужно выставлять ее вручную.
  • Make this work inversely – если включить этот параметр, то это поле начинает работать наоборот, т.е. для того, чтобы произошла отправка формы вам нужно эту галочку не поставить, а, наоборот, убрать. Т.е. это тоже можно использовать для защиты от спама.

насиройка поля acceptance contact form 7
При необходимости вы также можете задать для этого поля идентификатор ID и класс.
Поле «Имя» оставляем без изменений.
После внесения изменений в настройки поля нажимаем кнопку «Insert Tag»
Также не забудьте написать рядом с галочкой какой то текст. Например; «С условиями ознакомлен».

Для того чтобы просмотреть как будет выглядеть это поле сохраняем форму и обновляем страницу с формой.

Защита от спама при помощи поля quiz

Следующее поле, которое можно использовать для защиты от спама – quiz. Возможно, вы встречали в формах на других сайтах, когда вам задается простой вопрос, например: « Солько будет 2 + 2?», и вам нужно ввести на него ответ.

Защита от спама contact form 7 при помощи поля quiz

Вставляется это поле аналогично предыдущему. Нажимаем на кнопку с названием «quiz» и вносим настройки.

Защита от спама при помощи поля quiz

Для того чтобы ввести свои вопросы и ответы, мы должны в поле «Questions and answers» написать сначала вопрос, а затем через вертикальный слэш ответ. При этом каждый вопрос должен быть написан с новой строки.

настройка поля quiz contact form 7

При отправке форма будет проверять, совпадает ли то, что ввел пользователь с тем ответом, который ввели вы. Если да, то будет осуществляться отправка, если нет – будет выдаваться ошибка.

После того как вы ввели все вопросы и ответы, нажимаем «Insert tag». Это могут быть не обязательно примеры, может выводиться абсолютно любой текст.

Защита от спама для Contact form 7 при помощи поля reCAPTCHA

Следующее поле для защиты от спама, это поле reCAPTCHA. Это специальный сервис Google который позволят генерировать специальные поля, которые выглядят таким образом:

Защита от спама для Contact form 7 при помощи поля reCAPTCHA

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

Для вставки данного поля на панели генерирования полей Contact form 7 нажимаем кнопку «reCAPTCHA».

поле reCAPTCHA для Contact form 7

Во всплывающем окне нам будет предложена ссылка с инструкцией по подключению сервиса reCAPTCHA к вашему сайту.

настройка reCAPTCHA СF7

Переходим по этой ссылке и смотрим инструкцию.

  1. Первое, что нужно сделать — перейти на Google’s reCAPTCHA.
  2. Register your site — зарегистрировать ваш сайт.
  3. Get a site key and secret key – получить ключ от сайта и секретный ключ.

настройка reCAPTCHA СF7

При переходе по предложенной ссылке нам предлагают ввести название и домен сайта, причем не адрес сайта, а только домен, без http://.

После ввода данных нажимаем на кнопку «Регистрация».

настройка reCAPTCHA регистрация

После этого нас перекинет на страницу, с которой нам нужно скопировать ключ.

подключение reCAPTCHA Соntact Form 7

Затем нам нужно перейти в админ панель сайта, пункт меню Contact Form 7 => Integration и вести полученные ключи для сайта.

настройка защиты от спама

Теперь можно вернуться к редактированию формы и вставить это поле.

Нажимаем на » reCAPTCHA «, и видим настройки:

  • Theme (light/dark) — тема, светлый фон/темный фон.
  • Size (normal/compact) — размер, нормальный или компактный.

Выбираем нужные значения и нажимаем «Insert Tag»

Если вы ещё не знаете как добавлять и настраивать в Contact Form 7 свои поля и создавть формы любой сложности, то обязательно почитайте статью «Настройка contact form 7. Добавление полей»

Видеоинструкция

Если у вас остались какие то вопросы, то можете посмотреть видеоинструкцию по настройке защиты от спама:

Мы рассмотрели три простых но эффективных способа защиты от спама для формы Contact Form7. Это специальные поля » acceptance», «quiz» и «reCAPTCHA». Вы можете использовать эти поля как по одному, так и в сочетании друг с другом, и в этом случае получите многоуровневую защиту.

Если статья была для вас полезна не забудьте поделиться ею в соцсетях.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

9 комментариев

  1. Спасибо! Понятно, доступно, полезно!http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Все получилось, без проблем создавала форму отправки по Вашим статьям.

    Только возник вопрос. Вы не подскажете, как исправить в css (или прописать в самой форме отправки) один глюк: после применения двух видов защиты («acceptance», «quiz») кнопка «Отправить» налезла на окошко с вводом ответа на вопрос «quiz».

    • Здравствуйте! В случае с Вашей проблемой можно сделать так: в файл style.css вашей темы в самом конце прописать:

      .wpcf7-submit{

      display: inline-block!important;

      margin-top: 50px!important;

      }

      Если не поможет, то мне нужна ссылка на сайт чтобы более детально посмотреть код.

      • Спасибо за ответ! Да еще и так оперативно, не ожидала даже, думала вообще через пару дней зайти проверить)).

        Ваш совет помог лишь частично. Кнопка опустилась вниз, но возникла другая проблемка — теперь сообщения об ошибке (если не заполнил какие-то поля, например «Одно или несколько полей содержат ошибку») формируется между кнопкой и окошком ввода ответа на вопрос «quiz».  Причем наезжая частично на кнопку отправки (за ней). А еще я добавила код предложенного Вами готового стиля формы отправки вот с этой страницы: http://impuls-web.ru/izmenyaem-stili-dlya-contact-form-7-tri-gotovyx-resheniya/ (использовала первый вариант стиля). Отредактировала под себя частично (цвет, размер).

        В итоге у меня не только проблема с кнопкой отправки, которая все время наезжает на чужое поле, но и проблема с блоком загрузки файлов: кнопка «Выберите файл» удобно разместилась прямо в поле (где должен отобразиться файл, который загружен). Но этот глюк в Хроме, а в Мозилле старой все ок с файлом отправки — кнопка «Обзор» (кстати, она сама себя назвала «Обзор», в Хроме не так) там, где нужно: справа от поля.

        И глюк с цветом фона. Не меняется, и все тут. Я уже задала его везде, где можно. В итоге меняется лишь оконтовочка (рамка формы). А так все пространство формы серое. Цвет текста в полях тоже пришлось прописать везде, пока он, наконец, не стал черным. Теперь думаю, что у меня код перенасыщен ненужными, лишними цветами фона и текста (подозреваю, что это плохо).

        В общем, моя форма живет своей жизнью и мало реагирует на мои манипуляции.http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gifhttp://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gifhttp://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif

        Не хочу здесь прописывать весь код формы, он теперь длиннюююющий. Может, можно выслать на имейл? Неудобно вас грузить таким объемом информации, но столько глюков сразу в одном месте…http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gifЯ меняла все, что могла, методом тыка. Эффекта ноль.

      • Может, Вы просто более подробно опишете, что означают все эти  #fancybox-wrap{, #fancybox-outer{, #fancybox-outer>div, #fancybox-content, и я как-нибудь сама попытаюсь разобраться?http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif Кстати, у меня не изменился размер поля для ввода ответа «quiz». Хоть я его вывела в отдельный блок, вроде как:

        .wpcf7 input[type=»quiz»]{

        width:40px!important;

        color: #000!important;

        }

        А он остался того же размера, что и остальные поля — длинный очень

        И еще один нюанс — не меняется цвет «обязательно» вот здесь:

        Ваше имя* (обязательно) 

        Пыталась изменить цвет в админ-панели при создании формы (вкладка «Шаблон формы»):

        <p>Ваше имя* <font color=»red»>(обязательно)</font>   <br />

        [text* your-name] </p>

      • Я вот подумала. А может, проблема с кнопкой отправки в том, что где-то в коде задана величина высоты Формы отправки, поэтому бедная кнопка не знает, куда ей деться и налазит на верхнее поле или на границу форм внизу. Вы, случайно,  не знаете, где «вшит» размер формы?

        • По поводу #fancybox-wrap{, #fancybox-outer{, #fancybox-outer>div, #fancybox-content, — это стандартные селлекторы  ContactForm 7.  Там в двух словах не объяснишь :)

          По поводу поля quiz.  Для того чтобы задать ему стили можно при его генерации задать для него класс или ID и потом прописывать стили для заданного класса или идентификатора. Если какое то свойство не срабатывает. Можно попробовать прописать ему правило !important;

          Например: width:250px!important;

          Что касается остальных проблем, то мне нужно взглянуть на сайт и страницу с формой. Так трудно сориентироваться и подсказать, так как у каждой темы оформления свои особенности и стили формы могут вести себя по разному. Если сайт в сети — пришлите, пожалуйста, его ссылку, если не в сети, то можете прислать мне архив  с Вашей темой на почту, а также код Вашей формы. Я у себя посмотрю что там и как и тогда смогу более точно ответить.

           

  2. Добрый день. Следующий вопрос: у меня есть 5 контактных форм. Я вставил во все tag <p>[recaptcha id:rindivid]</p>, где id для каждой формы свой. Но кукапча появляется только в одной контактной форме. Как добавить ее во все контактные формы? Благодарю!

     

     

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

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

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif