Google reCAPTCHA(v2) для FormIt и AjaxForm

Интеграция Google reCAPTCHA(v2) для FormIt и AjaxForm MODX Revo

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

recaptcha

Google reCAPTCHA — это один из самых эффективных способов защити форм от спама. К сожаление мега умные боты научились обходить и его (таких правда не много). У данного способа есть пару минусов: во первых подключается js файл, что немного уменьшает скорость загрузки сайта и такие капчи довольно сильно напрягают пользователей, по этому рекомендую внедрять ее только в формах где есть textarea (поле сообщение).

Сейчас есть ReCaptchaV3 с невидимыми капчами и т.д., но по опыту внедрения, работает как то ужасно!

Установка, настройка и внедрение ReCaptcha

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

Получение ключей

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

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

recaptcha

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

recaptcha ключи

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

recaptcha вводим ключи

 

Привязка 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>

Результат.

MODX форма с Google reCAPTCHA(v2)

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

Смотрите также:

Как в MODX Revo избавиться от спама с FormIt, AjaxForm без капч.

MODX CSRFHelper — защита форм FormIt и AjaxForm от CSRF атак.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 2 оценки, среднее 5 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Илья

    Здравствуйте! Добавляю
    &hooks=`recaptchav2` и

    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]

    При установленной галочке на капче все равно просит ее поставить «Please select the checkbox in the ReCaptcha image.»
    Если добавляю &validate=`g-recaptcha-response:required`, то сообщение о проверке капчи не появляется, форма не отправляет сообщение.
    Без проверки капчи (&hooks=`recaptchav2`) сама форма работает как надо, все отправляется.

    Ответить
  2. Алекс

    а вот такое не обязательно ?
    в validate ,g-recaptcha-response:required

    Ответить
    1. Алексей автор

      Нет

      Ответить