Contact Form 7 – защита от спама с помощью recaptcha

В данном видео мы разберем, как максимально просто и эффективно защитить форму обратной связи «Contact Form 7» на WordPress сайте от спама. Вы наверняка сталкивались с ситуацией, когда какой-то упрямый бот начинает заполнять рандомными или спамными данными все формы на вашем сайте, присылая вам несколько десятков, а то и сотен сообщений. Чтобы такого не происходило, можно воспользоваться бесплатным сервисом/расширением для «Contact Form 7» – «Google reCAPTCHA».

Google reCAPTCHA  — защита от спама

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

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

Бывали случаи, когда я ставлю галочку, и всплывает картинка от Google reCAPTCHA версии 2, где нужно выбрать какую-то часть картинки. Или кликаешь на какие-то части изображений, в итоге тратишь дополнительно несколько минут на то, чтобы отправить эту форму, потом «забиваешь» и просто не отправляешь ее.

Настройка Google reCAPTCHA  версии 3 в Contact Form 7

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

Подключение Google reCAPTCHA

Для того чтобы подключить «reCAPTCHA», нужно зайти в меню Contact Form 7 — пункт «Интеграции»:

• Здесь есть раздел называется «reCAPTCHA». Чтобы ее активировать для нового сайта, переходим по ссылке google.com/recaptcha.
• Переходим в консоль администрирования. Если у вас несколько сайтов или несколько проектов, то выбирайте нужный. Если же у вас нет созданных проектов, то можно завести новый.
• Нажимаем плюсик в правом верхнем углу — «Создать».
• В графе «Ярлык» указываем название проекта. Например, если это группа однотипных сайтов, то там можно написать «Интернет-магазины». Или если у вас только один сайт, то можете написать его название.
• Выбираем вид reCAPTCHA. Версия 3 — последняя, когда пользователю не нужно ставить какие-то галочки, решать примеры, разгадывать картинки, если нет подозрения, что это робот. Это наиболее простой вариант. В данном случае мы выбираем его.
• Добавляем домены, например, site.com или mail.ru. В зависимости от того, как выглядит ваш домен.
• Указываем электронную почту владельца, принимаем условия использования и сохраняем.

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

Ключи reCAPTCHA

Допустим, мы добавили все нужные сайты, и reCAPTCHA генерирует нам два ключа. Это ключ сайта и секретный ключ. Мы копируем эти настройки и вставляем их в настройки интеграции в Contact Form 7.

Если вы пользуетесь Contact Form 7 уже давно, и у вас стоит предыдущая версия reCAPTCHA (версия 2 или версия 1), то вам нужно удалить эти ключи нажатием кнопки «Удаление ключей», а потом заново вставить скопированные ключи в поля «Ключ сайта» и «Секретный ключ» для версии 3.  После этого у вас на сайте появится  всплывающее окошко, где написано: «защищено reCAPTCHA» .

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

Google reCAPTCHA + Honeypot for Contact Form 7

Бывают такие случаи, когда одной только reCAPTCHA для защиты от спама бывает недостаточно. В таких случаях можно комбинировать reCAPTCHA и дополнительные методы защиты. Одним из вариантов, который дает хорошие результаты, является «Honeypot». Так называется плагин для «Contact Form 7» – «Honeypot for Contact Form 7».

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

После установки плагина «Honeypot for Contact Form 7» на вкладке «Шаблон формы» появляется новая кнопка «Honeypot» — это генератор тега. Если его нажать, то всплывает окошко, где можно задать любое имя для тега. Лучше использовать завуалированное поле стандартного назначения, которое с большой вероятностью бот заполнит(website, mail, name и тд…).  Потому что они не могут различить, что это за поле: валидное или не валидное(для ботов все поля одинаковы).

Можем указать ID, Class опционально, далее можем скрыть этот CSS, который отвечает за это невидимое поле, поставив галочку рядом с надписью «Move inline CSS (optional)», чтобы ботам было сложнее его опознать.

После этого у нас генерируется тег типа [honeypot website-5 move-inline-css:true], и поле становиться не заметным для пользователя. Когда это поле никак не заполнено, то форма проходит валидацию и срабатывает отправка данных.  А когда это поле заполняет бот, то валидация формы не проходит, и данные не отправляются.

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

.grecaptcha-badge{display:none;}

В данном случае я это указываю в настройках темы:

• Так как reCAPTCHA подгружается на каждой странице, то нам на каждой странице нужно его скрыть с помощью CSS.
• В настройках темы я указываю, что хочу скрывать этот бейджик на всех страницах, где он появляется.
• Если мы обновим страницу, его не будет видно. На самом деле он есть, просто для пользователя он не виден, потому что мы скрыли его с помощью CSS, чтобы он не отнимал место, особенно на мобильных устройствах.

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