Все для создания и продвижения сайтов

Верстка, программирование, SEO

Защита от спама с помощью recaptcha в MODX Revo

Рассмотрим пример создания формы обратной связи в MODX Revolution с защитой от спама. Для защиты от спама будет использовать популярную recaptcha v2 от компании Google.

С помощью данной инструкции возможно добавлять неограниченное количество форм с капчей на одну страницу.

1. Давайте для начала зарегистрируем свой сайт в сервисе Recaptha.

Регистрации сайта в Google recaptha

2. Затем копируем «Ключ» и «Секретный ключ».

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

3. Теперь нам понадобиться компонент ReCaptchaV2, вы сможете её скачать через встроенный репозиторий (в меню выбираем «приложения -> установщик»). После установки переходим в системные настройки компоненты и прописываем наши ключи в соответсвующих полях.

Ввод ключей Google recaptha в системные настройки MODX Revolution

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

5. В чанке формы «tpl.AjaxForm.contacts» нужно добавить разметку для вызова капчи:

<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>

В результате, получиться примерно следующее:

Пример формы с Google recaptha

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.