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

Как добавить капчу для Сontact Form 7

Если вы в поисках оптимального плагина капчи для Contact Form 7, эта статья вам поможет. Мы рассмотрим самые популярные плагины капчи и расскажем, как добавить их на сайт WordPress. Подробнее о том, что такое капча и какие виды капчи бывают, читайте в статье Капча для сайта на WordPress.

Чтобы добавить капчу для Contact Form 7, нужно установить совместимый с ней плагин, активировать и настроить его.

Плагины капчи для Contact Form 7

Плагины капчи для Contact Form 7 — это расширения, с помощью которых можно добавить капчу для контактной формы Contact Form 7 в WordPress. Если у вас ещё не установлен плагин Contact Form 7, это можно сделать по инструкции Контактная форма WordPress.

Ниже мы рассмотрим, как настроить три популярных плагина капчи: Contact Form 7 Image Captcha, Contact Form 7 Captcha и Advanced noCaptcha & invisible captcha (v2 & v3).

Contact Form 7 Image Captcha

Contact Form 7 Image Captcha — простая капча, которая не требует от пользователя решения головоломок и угадывания сложных символов. Чтобы пройти капчу, достаточно выбрать один из трёх простых значков (например, чашку, грузовик или ель). Также можно скрыть появление капчи до момента, пока пользователь не начнёт взаимодействовать с контактной формой.

Чтобы добавить капчу на сайт:

В панели управления WordPress перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [cf7ic], например, после тега [submit] (кнопка Отправить). Это можно сделать вручную или нажав на тег формы Изображение Captcha.

Готово, вы добавили на сайт «Image Captcha»:

Captcha WordPress для Contact Form 7

Contact Form 7 Captcha

Contact Form 7 Captcha — надёжный плагин для reCaptcha v2 («Я не робот» и невидимая капча) от Google. Для размещения капчи на сайте нужно зарегистрироваться в Google Captcha и получить API-ключи

Чтобы добавить капчу на сайт:

На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.

В панели управления WordPress перейдите в раздел Настройки — CF7 Simple Recaptcha и заполните поля:

Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

Invalid captcha error message — пропишите текст, который увидят пользователи в случае, если не пройдут капчу.

Нажмите Save Settings (Сохранить настройки):

Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» перед тегом [submit] (кнопка Отправить) вставьте в поле шорткод [cf7sr-simple-recaptcha] и нажмите Сохранить:

Готово, вы добавили на сайт капчу «Я не робот»:

Contact Form 7 капча

Advanced noCaptcha & invisible captcha (v2 & v3)

Advanced noCaptcha & invisible captcha (v2 & v3) — плагин с возможностью выбора вида капчи — reCaptcha v2 («Я не робот» и невидимая капча) или v3 (которая не требует действий от пользователя). Для капчи версии v2 можно менять тему (светлая или тёмная) и размер. Капчу можно настроить для всех пользователей или только для неавторизованных. Кроме этого, можно указать количество неудачных попыток входа в систему, после которых будет всплывать капча.

Чтобы добавить капчу на сайт:

На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.

В панели управления WordPress перейдите в раздел Настройки — Advanced noCaptcha & invisible captcha и заполните поля:

Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

Также вы можете внести дополнительные настройки. Нажмите Сохранить изменения:

Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [anr_nocaptcha g-recaptcha-response] и нажмите Сохранить:

Готово, вы добавили на сайт reCAPTCHA v3:

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

Источник

Как добавить в PHP-форму reCAPTCHA v3 и отправлять данные с помощью Ajax

В этом руководстве мы добавим в PHP-форму Google reCAPTCHA v3 и отправим ее данные без перезагрузки веб-страницы, используя Ajax.

Почему Google reCAPTCHA v3?

У многих пользователей раньше возникали проблемы при прохождении капчи.

К счастью, сейчас многие сайты используют Google reCAPTCHA v2, которая просто отображает флажок «Я не робот».

В 2018 году Google выпустила reCAPTCHA v3, которая вообще не требует взаимодействия с пользователем. Ее можно использовать в формах, чтобы предотвратить отправку спама.

Теперь узнаем, как добавить Google reCAPTCHA v3 в простую форму.

Регистрация ключей reCAPTCHA v3

После этого будет сгенерирован site key и secret key. Скопируйте и сохраните их.

HTML-форма

В качестве примера используем простую форму с полями «Полное имя», «Электронная почта» и «Сообщение».

Отправка данных формы с помощью Ajax

Доработаем процесс отправки формы с помощью Ajax, Для этого потребуется библиотека jQuery. Загрузите ее, используя CDN. Вставьте приведенную ниже строку кода перед закрывающимся тегом body.

Теперь выполнить Ajax-запрос на отправку данных формы.

Сейчас если вы нажмете кнопку отправки формы, то получите сообщение об ошибке 404. Так как файл contact.php еще не существует.

Создайте файл contact.php. На стороне сервера необходимо проверить полученные данные и отправить ответ JSON.

Теперь пришло время интегрировать reCAPTCHA v3.

Интеграция на стороне клиента

Загрузите API JavaScript с site key. Вставьте приведенный ниже код под ссылкой на CDN JQuery.

Важно : замените YOUR_SITE_KEY_HERE значением, которое вы сохранили ранее.

В документации к reCAPTCHA v3 сказано, что необходимо вызывать grecaptcha.execute для каждого пользовательского действия, которое нужно защитить (отправка данных формы). Этот вызов генерирует токен, который необходимо отправить вместе с данными формы для проверки на стороне сервера. Для этого нужно добавить в форму скрытое поле ввода и динамически присвоить ему значение токена:

Вызовите эту функцию ниже Ajax-запроса и присвойте скрытому полю ввода значение токена.

Значение ‘action’ является специфичным для действия отправки данных формы. Различные действия помогут анализировать данные по всему сайту, если добавить reCAPTCHA сразу в нескольких местах.

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

Интеграция на стороне сервера

После проверки введенных пользователем данных на стороне сервера, нужно получить оценку от Google, чтобы убедиться в том, что имеем дело с реальным человеком. Внутри блока if(isvalid()) < >добавьте приведенный ниже код, чтобы выполнить API-запрос для получения оценки.

Важно : замените YOUR_SECRET_KEY_HERE значением, которое вы скопировали ранее. Secret key предназначен только для серверной части.

Полученный ответ является объектом JSON.

Бонусный совет:

Добавив JavaScript API, мы получили раздражающий значок reCAPTCHA в правом нижнем углу веб-страницы.

Но этот значок можно скрыть, если добавить следующий текст в поток пользователя:

Поэтому добавьте это в элемент p > под кнопкой отправки.

Теперь, чтобы скрыть значок, просто добавьте приведенный ниже код в CSS.

Мы успешно настроили Google reCAPTCHA v3 для формы. Теперь вы будете получать сообщения только от реальных людей.

СКАЧАТЬ ИСХОДНЫЙ КОД

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!

Источник

Капча для Contact Form 7 и защита от спама формы обратной связи (все нюансы)

До недавних пор я даже не интересовался какие существуют плагины антиспама в Contact Form 7 потому что проверенная годами связка с Captcha от BestWebSoft работала как часы. Однако недавно разработчики, продвигая свой личный модуль обратной связи, перевели поддержку Contact Form7 в платную PRO версию. Хотя на самом деле это не такая уж и большая проблема, т.к. в самой форме имеется встроенная интеграция официальной Google Captcha. Единственный минус этого подхода (как по мне) в использовании 3-тьей версии капчи без возможности отката до предыдущей.

Итак, первым делом, чтобы внедрить защиту от спама в Contact Form 7 для WordPress сайта, мы после установки плагина обратной связи переходим в его подраздел “Интеграция”.

Здесь в блоке reCAPTCHA имеется на официальный сайт этой капчи. Переходите по ссылке, где представлена краткая информация и самой технологии и ее использованию. Там же на странице будет кнопка «Admin Console», позволяющую залогиниться в свой Гугл-аккаунт или для перехода на регистрацию новой учетной записи.

В личном кабинете находите иконку “+” для создания/добавления нового веб-ресурса. После нажатия увидите следующую форму:

На следующем шаге вам выдадут 2 значения:

Можете записать их в какой-то файл или временно не закрывать данное окно.

Возвращаемся в наш модуль обратной связи и кликаем по кнопке «Настройка интеграции» (см. первый скриншот выше). На открывшейся странице вводите свои ключи.

Включение reCAPTCHA в Contact Form 7 (v3 или v2)?

Теперь мы приходим к самому интересному – как поставить капчу в Contact Form 7. И тут важным моментом есть то, какой именно вариант защиты вы выбрали. Сейчас Гугл продвигает третью версию и разработчик модуля внедрил именно ее (как передовую технологию). Однако, если почитать форум поддержки в репозитории, то можно увидеть отзывы многих пользователей о том, что данный антиспам фильтр не всегда хорошо справляется.

В общем, если вы решили применять reCAPTCHA v3, то никакие дополнительные настройки после ввода ключей делать не нужно. Вам даже не требуется размещать в форме шорткод [recaptcha], который теперь просто игнорируется. Скрипт капчи работает сразу «из коробки» и самостоятельно в фоновом режиме будет определять является человек реальным или ботом.

Плагин Contact Form 7 – reCaptcha v2

Как я уже говорил выше, новой технологии пока не доверяю, поэтому нашел для себя модуль, совместимый с reCAPTCHA v2. Из его однозначных плюсов выделю: активную и быструю работу над ошибками, более 70к загрузок, простота подключения. Скачивайте отсюда либо ставьте сразу из WP-админки.

После его активации вам нужно:

1. Зайти в раздел «Contact Form 7» — пункт «Версия reCaptcha», где выбираете вторую (источник, как и был по умолчанию, остается google.com).

2. Кликаем по кнопке “Отправить”.

3. Далее открываем для редактирования нужную форму и добавляем перед кнопкой отправки шорткод [recaptcha]. Сохраняем настройки и проверяем результат на вебсайте.

Для шорткода, кстати, есть несколько доп.параметров.

Дополнительные нюансы. Если вдруг по какой-то причине автор забросит этот замечательный плагин, то выбирая среди всех остальных плагинов для капчи в Вордпресс с подобными функциями я бы посоветовал попробовать Advanced noCaptcha & invisible Captcha (v2 & v3) (находится тут). Его аналогично часто упоминают как альтернативу, но баги там исправляются чуть менее быстро (хотя также имеется 70к скачиваний).

Если вы используете в работе Flamingo, то я бы настоятельно рекомендовал ставить капчу на Contact Form 7 ибо спам в данном случае изначально фильтруется через Akismet. И когда последний у вас не настроен, то ооочень многие реальные сообщения из формы помечаются как спам. Если я правильно понял, форма в первую очередь ориентируется на Akismet, когда в проекте нет более серьезного решения от Гугла. В общем, тут еще надо тестировать всякие нюансы, но чтобы бы вы не выбрали без антиспама Flamingo лучше не оставлять.

Источник

Как установить captcha на форму?

Капча представляет из себя галочку, которую нужно обязательно отметить, чтобы оставить заявку. Она будет установлена на все формы нового типа, в которых есть кнопка отправки заявки.
При подозрительной активности посетителю предложат сделать для проверки несложные действия. К примеру выбрать изображения с природой или витринами.
Используем форму «стиль 1» или «стиль 2» и устанавливаем в нужное место на странице.

Капча будет автоматически установлена под последним виджетом поля в форме:

Отображение на опубликованной странице:

Если вы хотите самостоятельно собирать статистику по капче, то нужно будет произвести некоторые изменения с кодом.
Итак, в первой строке скрипта, в самом его начале, мы видим ключ (key) капчи
«6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J»
Для доступа к статистике нам нужно заменить данный ключ на свой.

Важно! Убедитесь, что «Проверить источник решений reCAPTCHA» не выбран (с данной настройкой капча может не работать)

Готово! Капча создана. Появится 2 ключа. Скопируйте первый:

Ключ получен. Замените его вместо текущего
«6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J» в скрипте.

Капча устанавливается по умолчанию на все виджеты новых форм страницы.
❗Если для каких-то форм это не нужно, то поставьте у формы класс nocaptcha

Галочка капчи будут отображаться в заявке как отдельное поле:

Готово! 😊 Теперь можно протестировать работу на опубликованной странице.

Источник

Добавление Google reCAPTCHA к PHP форме

Статья, в которой рассмотрим, как подключить recaptcha к форме обратной связи, работающей по технологии ajax.

Что такое Google reCAPTCHA?

Google reCAPTCHA – это сервис для защиты вашего сайта от ботов и других атак.

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

Версии Google reCAPTCHA:

Подключение reCAPTCHA v2 или v3

Установку Google reCAPTCHA v2 или v3 для проверки форм можно представить в виде следующих шагов:

Получение ключей reCAPTCHA

Получение ключей для reCAPTCHA v2 или v3 необходимо перейти на страницу «www.google.com/recaptcha/admin».

Для доступа к консоли администратора необходимо иметь аккаунт в Gmail. Если учётной записи нет, то её нужно завести.

После этого необходимо нажать на значок «+».

В открывшейся форме нужно:

После заполнения всех полей нажать на кнопку «Отправить».

При успешной регистрации Google будут выданы 2 ключа:

Установка recaptcha на сайт

Подключение reCAPTCHA к сайту (странице) осуществляется как на стороне клиента (в HTML), так на стороне сервера (в PHP).

Разберём, как это осуществляется более подробно. В качестве примере выберем ajax форму обратной связи.

Подключение recaptcha к HTML-документу

Подключение виджета reCAPTCHA к странице осуществляется посредством выполнения 2 действий:

Интегрирование recaptcha в php скрипт

Установка recaptcha в скрипт php осуществляется посредством внесения в файл process.php следующих изменений:

Готовая форма обратной связи с recaptcha

Бесплатно загрузить форму обратной связи с recaptcha можно по следующей ссылке:

Изображения готовой формы, в которую интегрирована recaptcha.

Статьи, связанные с этой темой:

Комментарии:

У себя на сайте в форме регистрации для валидации использую php либу grecaptcha:
На самой странице:
В принципе все отлично работает.

Но, к примеру при регистрации юзера после submit формы рекапча валидировалась, а какое-либо поле (логин, e-mail и т.п.) не прошло валидацию.
Юзер исправляет данные. При этом рекапча уже отмечена решенной.
А при повторном submit формы — получаем ошибку валидации timeout-or-duplicate

Погуглив данную ошибку понял, что API рекапчи не позволяет её верифицировать более одного раза по одному и тому же токену.

Думаю, что для решения проблемы, при получении ошибки либо НЕвалидации какого-либо поля нужно перезапускать рекапчу.

Долго гуглил — как я понял через php это не предусмотрено, а через js — grecaptcha.reset();.

Можете помочь советом, как это «прикрутить»?

В документации есть опция error-callback. Может можно решить задействовав её?

Спасибо за Ваш ответ. Я выбрал отправку по SMTP, но не знаю что прописать вместо ***
Вот данные почты, помогите пожалуйста заполнить.

Имя пользователя: fetva@313news.net
Пароль: Используйте пароль почтовой учетной записи.
Сервер входящей почты: cpanel24.v.fozzy.com
IMAP Port: 993 POP3 Port: 995
Исходящий сервер: cpanel24.v.fozzy.com
SMTP Port: 465
IMAP, POP3 и SMTP authentication.

с этим вылезла ошибка, письмо не отправляется.

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

Я посмотрел и попытался сделать. Добавил в индексный файл

а в файл process.php добавил:
перед:
добавил
далее добавил pol тут
и тут
в итоге письмо отправляется, на почту приходит слово Пол, но выбранная опция не приходит.
Я не разбираюсь в php, помогите пожалуйста.

Может порт с использованием ssl какой-то другой.

В этой форме ещё нужно добавить код в «script.js»:

Письмо не ушло. На почте ничего нет, но в файле message.txt оно появилось.

Через минуту в форме появилось сообщение:
А вместо капчи написано: Время проверки истекло…

Приведу код на всякий случай

Добрый день.
Спасибо за инструкцию.

Помогите, пожалуйста.
1. Нет файла process.php Где он может лежать? Или его нужно создать?
2. Файл script.js у меня в шаблоне сайта, это нормально, код капчи будет в нем работать?
Спасибо.

Почему то не отправляются файлы в папку images, ошибку не пишет, просто отправляет сообщение на почту.

Сделал для нескольких типов файлов, как вы писали ниже.

// если данные были отправлены методом POST, то…
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) <

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;

// отправляем письмо
if ($mail->Send()) <
$data[‘result’]=’success’;
> else <
$data[‘result’]=’error’;
>

//после загрузки веб-страницы
$(function () <

Источник