To start using reCAPTCHA on your website, the first step is to choose what type of reCAPTCHA you would like to include in your website. An explanation of the different types can be found at https://developers.google.com/recaptcha/docs/versions. Next head to https://www.google.com/recaptcha/admin and register a new key pair. It is important that the key pair match the type of reCAPTCHA (either v2 or v3) you want to include on your website.

Now in the OctoberCMS backend, head to the Settings > Misc > Google reCAPTCHA Settings page to enter in the key pair you get from Google.

Using the reCAPTCHA component

You can add the Google reCAPTCHA component, which includes a form submit button as well as the relevant JavaScript to any of your pages by adding the recaptcha component where you want the submit button to be rendered. Note: in your HTML code, the form element must not have a submit button since this plugin will render it instead.

The component has various configurable options, like the reCAPTCHA type you want to be displayed, the submit button text, and submit button class.

Without the reCAPTCHA component

If you want to manually configure the HTML and JavaScript, follow the Google documentation to integrate it into your website. You just need to make sure that your request includes the g-recaptcha-response response token in order to validate it.

Validation

To validate the form, use the RecaptchaValidator Rule object class:

use Multiwebinc\Recaptcha\Validators\RecaptchaValidator;

Then where you validate your form, just add this Rule object to the validation rules along with any of the other validation rules you have:

$rules = [
    'g-recaptcha-response' => [
        'required',
        new RecaptchaValidator,
    ],
    // example other fields
    'name' => 'required',
    'email' => 'required|email',
    'email-verify' => 'required|same:email',
    // etc.
];

Important: The 'g-recaptcha-response' rule must also have the 'required' value set or it will be ignored if it is empty.