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

Как настроить капчу в формах

Капча или CAPTCHA — удобный инструмент для проверки поступающей информации от пользователей. Он защищает сайт от спама и не дает отправлять данные без прохождения проверки. Капча анализирует поведение пользователей и предлагает пройти проверку перед отправкой формы обратной связи. В решении Landing подключена стандартная капча от 1С-Битрикс, Google reCAPTCHA v2, Google reCAPTCHA v3. На скриншоте ниже пример капчи от 1С-Битрикс.

Капчу можно подключить во всех формах на вашем сайте. Для этого перейдите в «‎Общих настройках» в раздел «‎Формы». Поставьте галку рядом с полем «‎Использовать капчу в формах» (1). Выберите тип капчи (2). Примените изменения.

Предыдущая статья

Как создать и подключить обработку персональных данных для форм (ФЗ-152)

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Examples of feedback forms with invisible recaptcha (Примеры форм обратной связи с невидимой recaptcha)

itchief/forms-with-recaptcha

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Go to file

Folders and files

Last commit message
Last commit date

Latest commit

History

View all files

Repository files navigation

Примеры форм обратной связи с невидимой recaptcha

Примеры, в которых рассмотрены различные варианты подключения капчи invisible reCAPTCHA к форме обратной связи.

В первом примере (1-simple-without-ajax/feedback) продемонстрировано как это выполнить для формы, работающей без AJAX.

Во втором примере (2-ajax/feedback) рассмотрено как её добавить к форме обратной связи работающей через AJAX.

В третьем примере (3-two-captcha/feedback) показано как можно на одной странице расположить две invisible reCAPTCHA для защиты соответственно двух форм обратной связи.

В четвёртом примере (4-ajax-in-modal/feedback) рассмотрено как подключить невидимую recaptcha для формы, которая отображается в модальном окне.

Примеры построены с использованием:

• библиотеки jQuery
• фреймворка Bootstrap 3
• библиотеки PHPMailer

Серверная часть формы обратной связи написана на PHP.

Как связать reCaptcha с формой обратной связи

Всем привет. Недавно помогал связать форму обратной связи, которая сделана с применением технологии ajax (то есть без перезагрузки страницы) с recaptca от Google и решил, что многим это тоже может быть интересно.

Да, есть много плагинов для CMS, но вручную сделать это немного сложнее, а раз появился такой вопрос у одного, то может и кому-то из вас пригодится статья.

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

Форма обратной связи с recaptcha от Google

Итак, для тех, кто еще не понял, мы пытаемся добавить такую штуку в нашу форму:

В первую очередь нужно получить API key для домена, на котором будет использоваться reСaptcha. Чтобы его получить, нужно перейти на эту страницу придумать названия и указать нужный домен:

После этого, вас перебросят на страницу, где кратко будет описана интеграция на сайт, а также находиться ваш секретный ключ и ключ сайта:

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

А в форму, там, где будет располагаться каптча — следующий блок:

Есть несколько дополнительных настроек, например:

• светлый или темный внешний вид — data-theme=»light» или data-theme=»dark».
• нормальный или компактный размер — data-size=»compact», data-size=»norml»

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

Так как в моей форме все скрипты располагаются в конце страницы, то я решил и скрипт от Google поместить там же. Выглядит это все так:

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

Разметка формы сейчас выглядит так:

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

Теперь, если попытаться получить данные переданные методом POST, мы получим не только данные из полей (имя и телефон), а и значение переменной g-recaptcha-response. Его и нужно отправить Гуглу для прохождения верификации.

Самостоятельно сделать это достаточно сложно, но есть готовый скрипт, который просто подключается к обработчику формы. Скачать его можно с Github на этой страничке:

Теперь необходимо подключить его к обработчику (php файлу, который отправляет письмо) или вставить скрипт прямо в него. У меня это файл mail.php. Подключать в самом начале:

 else< if (isset($_POST['uname'])) < $uname = strip_tags($_POST['uname']); $unameFieldset = "Имя пославшего:"; > if (isset($_POST['uemail'])) < $uemail = strip_tags($_POST['uemail']); $uemailFieldset = "Почта:"; > if (isset($_POST['uphone'])) < $uphone = strip_tags($_POST['uphone']); $uphoneFieldset = "Телефон:"; > if (isset($_POST['formInfo'])) < $formInfo = strip_tags($_POST['formInfo']); $formInfoFieldset = "Тема:"; > $to = "dima.d.v@yandex.ru"; /*Укажите адрес, на который должно приходить письмо*/ $sendfrom = "smart-landing@yandex.ru"; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/ $headers = "From: " . strip_tags($sendfrom) . "\r\n"; $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; $headers .= "Content-Transfer-Encoding: 8bit \r\n"; $subject = "$formInfo"; $message = "$unameFieldset $uname $uemailFieldset $uemail $uphoneFieldset $uphone $formInfoFieldset $formInfo"; $send = mail ($to, $subject, $message, $headers); if ($send == 'true') < echo 'Спасибо за отправку вашего сообщения!'; >else < echo 'Ошибка. Сообщение не отправлено!'; > > > else < header ("Location: https://smartlanding.biz"); // главная страница вашего лендинга >

В этом файле написан код, который передаст наш секретный ключ, значение g-recaptcha-response в Google, затем произойдет проверка успешна ли пройдена каптча. Но сначала, нужно добавить несколько переменных:

// Введите свой секретный ключ $secret = "6LcYtSQTAAAAAFcHhlqotRTiINOPlznKRfbyqmpG"; // пустой ответ каптчи $response = null; // Для проверка вашего секретного ключа $reCaptcha = new ReCaptcha($secret); if ($_POST["g-recaptcha-response"]) < $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); >

Почти все готово, осталось добавить проверку в форму, чтобы показать пользователями, что они не заполнили каптчу. Я делаю такую:

if ($response != null &amp;&amp; $response->success) < //отправка else

Полный код моего обработчика:

verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); > if ($_SERVER["REQUEST_METHOD"] == "POST") < if (empty($_POST['uname']) && (empty($_POST['uemail']) || empty($_POST['uphone'])))< echo '





'; > else < if ($response != null && $response->success) < if (isset($_POST['uname'])) < $uname = strip_tags($_POST['uname']); $unameFieldset = "Имя пославшего:"; > if (isset($_POST['uemail'])) < $uemail = strip_tags($_POST['uemail']); $uemailFieldset = "Почта:"; > if (isset($_POST['uphone'])) < $uphone = strip_tags($_POST['uphone']); $uphoneFieldset = "Телефон:"; > if (isset($_POST['formInfo'])) < $formInfo = strip_tags($_POST['formInfo']); $formInfoFieldset = "Тема:"; > $to = "dima.d.v@yandex.ru"; /*Укажите адрес, на который должно приходить письмо*/ $sendfrom = "smart-landing@yandex.ru"; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/ $headers = "From: " . strip_tags($sendfrom) . "\r\n"; $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; $headers .= "Content-Transfer-Encoding: 8bit \r\n"; $subject = "$formInfo"; $message = "$unameFieldset $uname 
$uemailFieldset $uemail 
$uphoneFieldset $uphone 
$formInfoFieldset $formInfo"; $send = mail ($to, $subject, $message, $headers); if ($send == 'true') < echo '
'; > else < echo '
'; > > else < echo '





'; > > > else < header ("Location: http://smartlanding.biz"); // главная страница вашего лендинга >

Обратите внимание на почту и не забудьте поменять на свою. Кроме того, способ подключения файла recaptchalib.php предполагает, что что mail.php и recaptchalib.php находятся рядом, то есть в одной папке. Если будет «вываливаться» ошибка, убедитесь, что пути прописаны правильно или скопируйте код прямо в обработчик (в самый верх).

Вот так, достаточно просто подключить reCaptcha для к своим формам. Надеюсь статья была полезной. Помните, что этот способ не только для той формы, о которой шла речь в начале статьи. Вы легко подключите каптчу и к любой другой. На этом — все. Пока!

06/10/2022 Дмитрий Давыдов

Похожие публикации

• Конструктор форм обратной связи для сайта
• Как связать форму на сайте с Telegram
• Форма обратной связи с отправкой СМС уведомления

Как добавить гугл-капчу (reCaptcha) в форму?

1. Добавить сайт в личном кабинете ReCaptcha https://www.google.com/recaptcha/admin#list ;
2. Получаете 2 ключа(публичный и приватный);
3. Скачиваете библиотеку ReCaptcha https://github.com/google/recaptcha ;
4. Подключаете скаченную библиотеку на ваш сайт. Для этого берете только файлы из директории /src/, файл autoload.php и директорию ReCaptcha и копируете их в /bitrix/php_interface/include/ (при отсутствии include, создаете её);
5. В init.php (находится в /bitrix/php_interface/init.php) подключаете ReCaptcha, добавляя
   init.php может отсутствовать. Тогда создайте пустой файл с названием init.php на пк и загрузите его.
   Не рекомендуется создавать его как страницу. Тогда битрикс запишет в него стандартную разметку и сайт перестанет открываться.
6. В шаблоне сайта подключаете скрипт
   ;
7. В шаблоне компонента формы(template.php 1 ) добавляете (Как найти component.php и template.php?)
   ;
8. В компоненте формы(component.php 1 ) добавляете проверку (Как найти component.php и template.php?)
   1 В шагах 7 и 8 файлы component.php и template.php — это файлы нужного вам компонента, куда хотите внедрить капчу.
   Например /bitrix/components/simai/feedback.all.string/component.php и /bitrix/components/simai/feedback.all.string/templates/.default/template.php

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

Шаблон /bitrix/components/simai/sf.feedback.appeal/templates/.default/ template.php

Там убрать примерно такой блок:

Там убрать примерно такой блок:

При возникновении конфликта с автопроверкой соглашения на обработку данных, нужно добавить этот js код на страницу (возможно понадбится изменить id «form-proverka» на свой):

$(«#form-proverka»).submit(function(event) <
if (!grecaptcha.getResponse()) <
console.log(‘captcha not yet completed.’);
event.preventDefault(); //prevent form submit
grecaptcha.execute();
> else <
console.log(‘form really submitted.’);
>
>);