Защита от спама с помощью recaptcha в MODX Revo
Рассмотрим пример создания формы обратной связи в MODX Revolution с защитой от спама. Для защиты от спама будет использовать популярную recaptcha v2 от компании Google.
С помощью данной инструкции возможно добавлять неограниченное количество форм с капчей на одну страницу.
1. Давайте для начала зарегистрируем свой сайт в сервисе Recaptha.
2. Затем копируем «Ключ» и «Секретный ключ».
3. Теперь нам понадобиться компонент ReCaptchaV2, вы сможете её скачать через встроенный репозиторий (в меню выбираем «приложения -> установщик»). После установки переходим в системные настройки компоненты и прописываем наши ключи в соответсвующих полях.
4. Для создании формы возьмем компоненты Formit и AjaxForm. Первый отвечает за обработку форм, а второй для Ajax обработки. Устанавливаем их, если они отсутствуют. Далее Вызываем следующий вызов сниппета в наш шаблон.
[[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.contacts`
&hooks=`email,spam,recaptchav2`
&emailFrom=`no-replay@site.ru`
&emailFromName=`Администратор сайта`
&emailSubject=`Заявка с сайта [[++site_url:replace=`http://== `:replace=`/== `]]`
&emailTo=`yourmail@mail.com`
&validate=`name:required,email:required,message:required,work-email:blank,g-recaptcha-response:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Спасибо за заявку, мы свяжемся с Вами в ближайшее время`
&emailTpl=`mailtpl`
]]
В &hooks
обязательно указать recaptchav2
, а в &validate
нужно добавить g-recaptcha-response:required
<div class="form-item">
<div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
<span class="error_g-recaptcha-response error"></span>
</div>
6. Затем нужно подключить Js-скрипт рекаптчи и вызвать функцию по её обработки
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
<script>
var CaptchaCallback = function() {
$('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {'sitekey' : '[[++recaptchav2.site_key]]'});
});
};
</script>
В результате, получиться примерно следующее:
Комментарии