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

Предотвращаем спам в заявках, устанавливаем капчу. Капча в новых формах

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

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

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

Далее добавляем скрипт.
Код необходимо добавить в настройках страницы (раздел “Метрика и скрипты” - “Добавить плагин” - “Произвольный код” - поле “BODY”):

<script> key="6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J"; var veri = function(i) { $('#kaptcha' + i).closest('.widget-form2').find('.kaa input').remove(); $('#kaptcha' + i).closest('.widget-form2').find('.kaa .input').append('<input type="text"  value="✓">').trigger("change"); }; var expi = function(i) { $('#kaptcha' + i).closest('.widget-form2').find('.kaa input').attr('value', "").trigger("change"); }; $('.widget-form2:not(.nocaptcha)').each(function(i) { if ($(this).find('button[data-action="send"]').length > 0) $(this).find('.cont div.widget-field:last').after('<div style="margin:0 auto;display:table" id="kaptcha' + i + '"></div><div class="node kaa widget widget-field" style="display: none;"><div data-vals="{&quot;type&quot;: &quot;text&quot;,&quot;text&quot;: &quot;Я не робот&quot;,&quot;hidename&quot;: false,&quot;required&quot;: true,&quot;id&quot;: &quot;&quot;}" class="code"><div plp-field="name" class="is-text"><div class="input"></div></div></div></div>'); }); var onl = function() { $('.widget-form2:not(.nocaptcha)').each(function(i) { if ($(this).find('button[data-action="send"]').length > 0) grecaptcha.render('kaptcha' + i, { 'sitekey': key, 'callback': function() { veri(i) }, 'expired-callback': function() { expi(i) } }); }) }; </script> 
<script src="https://www.google.com/recaptcha/api.js?onload=onl&render=explicit" async defer> </script>


В качестве капчи используется reCAPTCHA от Google - один из самых популярных сервисов для защиты от спама.
После установки кода выше, на опубликованной версии страницы уже должна отобразиться капча. 🙂👍

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

Ключ можно взять на сайте reCAPTCHA:
По ссылке https://www.google.com/recaptcha/admin/create  укажите любое название в поле "Ярлык", выберите тип "reCAPTCHA v2 - Флажок" и добавьте свой домен.
Далее нажимаете кнопку "Отправить".

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

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

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

По ссылке https://www.google.com/recaptcha/admin/ будет доступна статистика капчи по дням - количество показов, дополнительных проверок.

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

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

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

👆 На этом пока всё