Сегодня коротенький урок о том как интегрировать капчу (Google reCAPTCHA(v2)) в форму обратной связи на FormIt.
И так устанавливаем пакет ReCaptchaV2 из основного репозитория modx.
Далее нам необходимо получить секретный и публичный ключ для reCAPTCHA, для этого идем на страницу google.com/recaptcha/admin авторизуемся там (Если вы не зарегистрированы в Google, то так же вам нужно будет пройти процедуру регистрации). Перед вами откроется вот такая страница:
Заполняем форму и жмем Регистрация
После чего попадаем на страницу Добавление reCAPTCHA на сайт
Данную страницу не закрываем. Идем в системные настройки modx, сортируем их по recaptchav2, ну и вводим туда ключи которые получили выше.
Привязка ReCaptchaV2 к FormIt
1 2 3 4 5 6 7 8 9 | [[!FormIt? &hooks=`recaptchav2,email` ... ]] <div class="form-item"> [[!recaptchav2_render]] [[!+fi.error.recaptchav2_error]] </div> |
Привязка ReCaptchaV2 к FormIt + AjaxForm
1 2 3 4 5 6 7 8 9 | [[!FormIt? &hooks=`recaptchav2,email` ... ]] <div class="form-item"> [[!recaptchav2_render]] <span class="error_g-recaptcha-response error">[[!+fi.error.recaptchav2_error]]</span> </div> |
Пример вызова.
1 2 3 4 5 6 7 8 9 10 11 | [[!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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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:
1 2 | <p>Имя: [[+name]]</p> <p>Телефон: [[+tel]]</p> |
Результат.
Ну вот как то так.
 для FormIt и AjaxForm){kind=link}
) в форму обратной связи на FormIt. И так устанавливаем пакет ReCaptchaV2 из основно){kind=link}