All for creating and promoting websites

Layout, programming, web tools

Protection against spam using recaptcha in MODX Revo

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

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

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

Get keys from Google recaptha

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.

Entering Google recaptcha keys into the MODX Revolution system settings

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"

5. In form chunk «tpl.AjaxForm.contacts» need to add the markup for calling captcha:

<div class="form-item">
  <div class="g-recaptcha" data-sitekey="[[++recaptchav2.site_key]]"></div>
  <span class="error_g-recaptcha-response error"></span>
</div>

6. Then you need to connect the Js script of the recipe and call the function to process it

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

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

Highlight found mistake and press Ctrl + Enter to notify the administrator.