Skip to main content

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

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

Zw4image.png

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

GoEimage.png

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

Np0image.png

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

<script>
var key = "6LcwNrEUAAAAAG62cOWiy-S3rz1-cHTmA3kq4Y0J";
var captchaStatus = {};
var captchaWidgets = {};

function initCaptchaForms() {
  $('.widget-form2:not(.nocaptcha)').each(function(i) {
    var form = $(this);

    if (form.attr('data-captcha-ready')) {
      return;
    }

    form.attr('data-captcha-ready', '1');
    captchaStatus[i] = false;

    var send = form.find('button[data-action="send"]').last();
    if (send.length) {
      form.attr('data-captcha-id', i);
      send.before('<div id="kaptcha' + i + '" style="margin:20px auto;display:table"></div>');
    }
  });
}

$(function() {
  initCaptchaForms();
});

var onl = function() {
  initCaptchaForms();

  $('.widget-form2[data-captcha-ready="1"]').each(function() {
    var form = $(this);
    var id = form.attr('data-captcha-id');

    if (
      id !== undefined &&
      $('#kaptcha' + id).length &&
      captchaWidgets[id] === undefined
    ) {
      captchaWidgets[id] = grecaptcha.render('kaptcha' + id, {
        sitekey: key,
        callback: function() {
          captchaStatus[id] = true;
        },
        'expired-callback': function() {
          captchaStatus[id] = false;
        },
        'error-callback': function() {
          captchaStatus[id] = false;
        }
      });
    }
  });
};

document.addEventListener(
  'click',
  function(e) {
    var btn = e.target.closest('.widget-form2 button[data-action="send"]');
    if (!btn) {
      return;
    }

    var form = btn.closest('.widget-form2');
    var sends = form.querySelectorAll('button[data-action="send"]');
    var lastSend = sends[sends.length - 1];

    if (btn !== lastSend) {
      return;
    }

    var id = form.getAttribute('data-captcha-id');

    if (id === null || id === undefined || captchaStatus[id] !== true) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();

      var old = form.querySelector('.captcha-error');
      if (!old) {
        var error = document.createElement('div');
        error.className = 'captcha-error';
        error.style.cssText =
          'color:#ff0000;text-align:center;margin:15px 0;font-size:14px;';
        error.innerHTML = 'Подтвердите, что вы не робот';
        btn.parentNode.insertBefore(error, btn);
      }

      return false;
    }
  },
  true
);
</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 - Флажок" и добавьте свой домен.
Далее нажимаете кнопку "Отправить".

KpLimage.png

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

M9aimage.png

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

fH3image.png

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

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

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

So8image.png

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

lI8image.png

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

Back to top