Protection against spam using recaptcha in MODX Revo

Let's consider an example of creating a feedback form in MODX Revolution with anti-spam protection. To protect against spam will use the popular recaptcha v2 from Google.

With the help of this instruction it is possible to add an unlimited number of captcha forms to one page.

1. Let's start by registering your site in Google Recaptha.

2. Then copy "Key" and "Secret key".

3. Now we need the ReCaptchaV2 component, you can download it from the built-in repository (choose "applications -> installer" in the menu). After installation, go to the system settings of the components and prescribe our keys in the appropriate fields.

4.To create a form, take the Formit and AjaxForm components. The first is responsible for processing the forms, and the second for Ajax processing. We install them if they are not available. Next, we call the next snippet call into our template.

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`tpl.AjaxForm.contacts`
    &hooks=`email,spam,recaptchav2`
    &emailFrom=`no-replay@site.ru`
    &emailFromName=`Site admin`
    &emailSubject=`Application from the site [[++site_url:replace=`http://== `:replace=`/== `]]`
    &emailTo=`yourmail@mail.com`
    &validate=`name:required,email:required,message:required,work-email:blank,g-recaptcha-response:required`
    &validationErrorMessage=`The form contains errors!`
    &successMessage=`Thank you for the application, we will contact you as soon as possible`
    &emailTpl=`mailtpl`
]]

In «hooks», it is mandatory to specify recaptchav2, and in "validate" you need to add "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>

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

As a result, the result is approximately the following: