Adding reCaptcha to Netlify forms

Video walkthrough:

reCAPTCHA 2 challenge

If you would like to add a reCAPTCHA 2 challenge to a form, Netlify can include one for you, or you can add your own.

#Netlify-provided reCAPTCHA 2

To have Netlify provide the CAPTCHA:

1. Add a data-netlify-recaptcha="true" attribute to your <form> tag.
2. In the place where you’d like the CAPTCHA to appear, add an empty <div> element inside your form with the same data-netlify-recaptcha="true" attribute.

When your site is published, the form will include the necessary HTML to render the CAPTCHA.

Here’s an example:

When a visitor submits the form, our servers will validate the CAPTCHA server-side. If the validation fails, we’ll redirect the visitor back to the same page and reject the form submission.

You can include one Netlify-provided reCAPTCHA 2 challenge per page. To use multiple challenges on one page, add custom reCAPTCHA 2.

#Custom reCAPTCHA 2

You can also add your own reCAPTCHA 2 code in your site and let Netlify validate that form submissions come from a human. This is useful if you want to have more control over your validations, if you use a JavaScript library to inject a CAPTCHA in your forms, or if you need more than one CAPTCHA on a page.

In this case, Netlify needs your reCAPTCHA 2 site key and secret for validating that the captcha response is correct. You can provide these values with environment variables in your site configuration. Use SITE_RECAPTCHA_KEY to set your site key, and use SITE_RECAPTCHA_SECRET to set the secret provided by reCAPTCHA 2.

To set up a custom reCAPTCHA:

Sign up for a reCAPTCHA API key pair and follow the instructions for adding reCAPTCHA to your site. This typically involves adding a script before the closing </head> of your HTML template, and a snippet at the end of the <form> where you want the reCAPTCHA widget to appear.

Create the following environment variables for your site using the Netlify UI, CLI, or API:

• A variable with the key name of SITE_RECAPTCHA_KEY and a value set to your reCAPTCHA API site key. If you have the option to set specific scopes for your environment variables, the scope must include both Builds and Runtime.
• A variable with the key name of SITE_RECAPTCHA_SECRET and a value set to your reCAPTCHA API secret key. If you have the option to set specific scopes for your environment variables, the scope must include Runtime.

Add a data-netlify-recaptcha="true" attribute to the HTML form that has the custom reCAPTCHA widget.

The Netlify servers will check the submissions from that form, and accept them only if they include a valid g-recaptcha-response value.

If you submit your form with AJAX, make sure the g-recaptcha-response field is included in the body of the POST request. This happens automatically if you use FormData() to encode the body of the request.

Original article link

https://docs.netlify.com/forms/spam-filters/#custom-recaptcha-2