Сегодня коротенький урок о том как интегрировать капчу (Google reCAPTCHA(v2)) в форму обратной связи на FormIt или AjaxForm.
Google reCAPTCHA — это один из самых эффективных способов защити форм от спама. К сожаление мега умные боты научились обходить и его (таких правда не много). У данного способа есть пару минусов: во первых подключается js файл, что немного уменьшает скорость загрузки сайта и такие капчи довольно сильно напрягают пользователей, по этому рекомендую внедрять ее только в формах где есть textarea (поле сообщение).
Сейчас есть ReCaptchaV3 с невидимыми капчами и т.д., но по опыту внедрения, работает как то ужасно!
Установка, настройка и внедрение ReCaptcha
И так устанавливаем пакет 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>
Результат.
Ну вот как то так.
Смотрите также:
Как в MODX Revo избавиться от спама с FormIt, AjaxForm без капч.
MODX CSRFHelper — защита форм FormIt и AjaxForm от CSRF атак.
Здравствуйте! Добавляю
&hooks=`recaptchav2` и
[[!recaptchav2_render]]
[[!+fi.error.recaptchav2_error]]
При установленной галочке на капче все равно просит ее поставить «Please select the checkbox in the ReCaptcha image.»
Если добавляю &validate=`g-recaptcha-response:required`, то сообщение о проверке капчи не появляется, форма не отправляет сообщение.
Без проверки капчи (&hooks=`recaptchav2`) сама форма работает как надо, все отправляется.
а вот такое не обязательно ?
в validate ,g-recaptcha-response:required
Нет