Google reCAPTCHA(v2) для FormIt и AjaxForm

Сегодня коротенький урок о том как интегрировать капчу (Google reCAPTCHA(v2)) в форму обратной связи на FormIt.

И так устанавливаем пакет ReCaptchaV2 из основного репозитория modx.

Далее нам необходимо получить секретный и публичный ключ для reCAPTCHA, для этого идем на страницу google.com/recaptcha/admin авторизуемся там (Если вы не зарегистрированы в Google, то так же вам нужно будет пройти процедуру регистрации). Перед вами откроется вот такая страница:

Заполняем форму и жмем Регистрация

После чего попадаем на страницу Добавление reCAPTCHA на сайт

Данную страницу не закрываем. Идем в системные настройки modx, сортируем их по recaptchav2, ну и вводим туда ключи которые получили выше.

Привязка ReCaptchaV2 к FormIt

[[!FormIt?
   &hooks=`recaptchav2,email`
   ...
]]

<div class="form-item">
    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]
</div>

Привязка ReCaptchaV2 к FormIt + AjaxForm

[[!FormIt?
   &hooks=`recaptchav2,email`
   ...
]]

<div class="form-item">
    [[!recaptchav2_render]]
    <span class="error_g-recaptcha-response error">[[!+fi.error.recaptchav2_error]]</span>
</div>

Пример вызова.

[[!AjaxForm?
 &snippet=`FormIt`
 &form=`kontact-form-obrzv`
 &emailTpl=`tpl-kontact-form-obrzv`
 &hooks=`recaptchav2,email`
 &emailSubject=`Заказ звонка с сайта [[++site_url]]`
 &emailTo=`support@site.ru`
 &validate=`name:required,tel:required`
 &validationErrorMessage=`В форме содержатся ошибки!`
 &successMessage=`<h3>Запрос отправлен!</h3><h4 style="width: 400px;">Наши специалисты свяжутся с<br>вами в ближайшее время.</h4>`
]]

Пример чанка kontact-form-obrzv:

<form method="post" class="ajax_form af_example">
<div class="fancy-form">
	<i class="fa fa-user"></i>
	<input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value="[[+fi.name]]">
	<span class="error error_name">[[+fi.error.name]]</span>
</div>
<div class="fancy-form">
	<i class="fa fa-phone-square"></i>
	<input type="text" name="tel" required="" class="form-control" id="tel" placeholder="Ваш телефон*" value="[[+fi.tel]]">
	<span class="error error_name">[[+fi.error.tel]]</span>
</div>
<div class="checkbox">
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
      <span class="error error_name">[[+fi.error.opd]]</span>
    </label>
</div>
<p class="text-small">Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~48]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<div class="form-item">
    [[!recaptchav2_render]]
    <span class="error_g-recaptcha-response error">[[!+fi.error.recaptchav2_error]]</span>
</div>
<button type="submit" class="btn btn-3d btn-xmg btn-primary btn-w100">Отправить</button>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+fi.validation_error_message]]</div>`]]
</form>

Пример чанка tpl-kontact-form-obrzv:

<p>Имя: [[+name]]</p>
<p>Телефон: [[+tel]]</p>

Результат.

Ну вот как то так.