MODX – Добавление reCaptcha в FormIt

Получаем ключи  reCaptha на странице google.com/recaptcha/admin,

Установка ReCaptchaV2

Дополнение ReCaptchaV2 предназначено для интеграции 2 версии сервиса защиты от спама Google reCaptcha в MODX Revolution в виде hook (хука) для сниппетов FormIt и Login.

Установка компонента ReCaptchaV2 в осуществляется на странице “Управление пакетами”и устанавливается стандартно.

Настройка ReCaptchaV2

Процедура настройки дополнения ReCaptchaV2 осуществляется путём ввода ключей в параметры recaptchav2.secret_key и recaptchav2.site_key. Для этого открываем страницу “Системные настройки & События” (в админке MODX), фильтруем настройки по recaptchav2 и вводим полученные ключи (site_key, secret_key) в качестве значения соответствующих параметров.

Использование reCaptcha в FormIt

Внедрение сервиса Google reCaptcha на сайт для защиты формы обратной связи, работающей посредством компонента MODX FormIt, осуществляется путём выполнения 2 действий. Первое что необходимо сделать – это добавить значение recaptchav2 в параметр hooks сниппета FormIt.

Немного информации о том, как работают хуки. Hooks (хуки) в FormIt – это скрипты, которые выполняются последовательно один за другим. Переход к выполнению следующего хука осуществляется только после того как предыдущий вернул true. Это означает следующее: что если какой то из хуков не вернул значение true, то выполнение других хуков, следующих за ним, не выполняется. Поэтому указывать хук recaptchav2 всегда следует до выполнения других действий, например, до отправки формы на почту. В этом случае отправка формы на почту не будет происходить до тех пор, пока хук recaptcha не вернёт значение true.

Например, вызов сниппета FormIt с хуком recaptchav2:

[[!FormIt?
&hooks=`recaptchav2,email,FormItSaveForm`
&emailTpl=`MyEmailChunk`
&emailTo=`user@mail.com`
&validate=`name:minLength=^2^,email:email:required,message:minLength=^10^,g-recaptcha-response:required`
]]

Второе действие заключается в том, чтобы добавить в необходимое место формы (в котором вы хотите увидеть виджет капчи) следующий HTML код:

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

Применение reCaptcha в связке FormIt + AjaxForm

1. Добавить в вызов сниппета AjaxForm в параметр hooks значение “recaptchav2” и в параметр validate значение “g-recaptcha-response:required”:Внедрения reCaptcha в форму обратной связи, построенной на основе компонентов FormIt и AjaxForm, осуществляется посредством выполнения 2 шагов.

[[!AjaxForm?
&form=`tpl.AjaxForm`
&snippet=`FormIt`
&hooks=`recaptchav2,email,FormItSaveForm`
&emailSubject=`Тестовое сообщение`
&emailTo=`myemail@mail.ru`
&emailFrom=`no-reply@mysite.ru`
&emailTpl=`tpl.email`
&validate=`name:minLength=^2^,email:email:required,message:minLength=^10^,g-recaptcha-response:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
]]
  1. Вставить внутрь HTML формы следующий код разметки (отвечает за отображения пользователю reCaptcha и ошибок, связанных с ним):

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