Множетственная ReCaptcha2 на 1 стр + Ajaxform

Добрый день! Вдохновленный заметкой и комментарием Андрея в ней, я решил немного по подробнее расписать про особенности подключения Google ReCaptcha 2 для использования в MODX Revolution c дополнением AjaxForm и FormIt.


Под катом пример с картинками.

Итак, стояла задача установить Google ReCaptcha2 в трех формах на одной странице (Лэндинг). Две из которых запрос прайса на почту и одна с просьбой перезвонить.

Работает все изначально через AjaxForm в связке с FormIt. Для этого ставим компонент recaptchav2, в настройках через системные параметры MODX задаем sitekey и secretkey, предварительно получив их тут.

Первый шаг: тут логинимся в google и задаем имя набора параметров и домен сайта где будет каптча:

Второй шаг: тут получаем заветные ключи и копируем себе, их мы и будем указывать в параметрах MODX:

Третий шаг: полученные ключи мы прописываем в соответствующих настройках MODX как показано на скриншоте.

Четвертый шаг: Необходимо поработать с кодом шаблона ресурса, на котором предполагается использовать несколько вызовов ReCaptcha2. Следующим образом. В подвал добавляем вызов апи Google и небольшой javascript который будет отвечать за рендер каптчи, т.к. штатные вызовы компонента recaptchav2 в данной ситуации не подходят, ниже код:

<script src="https://www.google.com/recaptcha/api.js?onload=MyCallBack&render=explicit" async defer></script>
        <script>
          var recaptcha1;
          var recaptcha2;
          var recaptcha3;
          var MyCallBack = function() {
            //Render the recaptcha1 on the element with ID "recaptcha1"
            recaptcha1 = grecaptcha.render('recaptcha1', {
              'sitekey' : '[[++recaptchav2.site_key]]', //Replace this with your Site key
              'theme' : 'light'
            });
            
            //Render the recaptcha2 on the element with ID "recaptcha2"
            recaptcha2 = grecaptcha.render('recaptcha2', {
              'sitekey' : '[[++recaptchav2.site_key]]', //Replace this with your Site key
              'theme' : 'dark'
            });
            //Render the recaptcha3 on the element with ID "recaptcha3"
            recaptcha3 = grecaptcha.render('recaptcha3', {
              'sitekey' : '[[++recaptchav2.site_key]]', //Replace this with your Site key
              'theme' : 'light'
            });
          };
        </script>

Небольшое пояснение:
1) к апи идет обращение с параметром MyCallBack он может быть абсолютно любым, далее по коду есть одноименная переменная которой присваивается функция.
2) в функции задаем переменную recaptcha1 и в ней одноименный параметр, это будет id div а в который будет выводится каптча, как называть — ваше дело. Делаем по аналогии для всех трех каптч.
3) далее в sitekey не забываем поставить плейсхолдер системного параметра компонента recaptchav2 и можно пожеланию выбрать тему в параметре theme светлую или темную.

Пятый шаг: Нужно привести вызов сниппета AjaxForm к следующему примерно виду:

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`form.request`
    &hooks=`recaptchav2,email`
    &emailFrom=`[[++mail_smtp_user]]`
    &emailFromName=`Админ сайта`
  	&emailSubject=`Запрос прайса с сайта [[++site_url:replace=`http://== `:replace=`/== `]]`
  	&emailTo=`yourmail@domain.tld`
  	&emailTpl=`tpl.mail.price`
  	&frontend_js=`[[+assetsUrl]]js/custom.js`
    &validate=`name:required,emailclient:email:required,g-recaptcha-response:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Заявка успешно отправлена`
    &name.vTextRequired=`Пожалуйста, укажите, как к вам обращаться`
    &email.vTextRequired=`Пожалуйста, укажите свою электронную почту`
]]

В хуке обязательно указать recaptchav2
а в чанке form.request, в конце формы, перед кнопкой отправки формы добавить див для рендера каптчи:

<div class="form-item">
              <div id="recaptcha1"></div>
              <span class="error_g-recaptcha-response error"></span>
            </div>

И по аналогии в чанках других форм сделать с разницей только лишь в id diva которые мы указали в javascript коде под вызовом api google.
Ниже дива идет span для отработки ошибок ввода каптчи.

Как результат получаем вот что:


При такой конфигурации все должно работать.

&validate=`g-recaptcha-response:required`

Uncaught Error: ReCAPTCHA placeholder element must be an element or id
    at Object.Yp [as render] (recaptcha__ru.js:470)
    at MyCallBack (common.js:25)
    at c (recaptcha__ru.js:465)
Yp @ recaptcha__ru.js:470
MyCallBack @ common.js:25
c @ recaptcha__ru.js:465

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
<script>
var CaptchaCallback = function() {
    $('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {'sitekey' : '[[++recaptchav2.site_key]]'});
    });
};
</script>

<form>
.....
 <div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
.....
</form>