How do I add reCAPTCHA v3 to a form?Copy page

Registration

Start by visiting Google reCAPTCHA's registration page. Sign in using your Google account.

Create a new site

Next, click on Register a new site. Provide an appropriate name for your reCAPTCHA integration, ensure you select the reCAPTCHA type as v3.

Domain configuration

Input all domains where your site will be live. It's advisable to also include your staging URL, ensuring you can test the form in the staging environment.

Alert settings

Associate it with your primary Google account. If you're using older versions of reCAPTCHA, specify emails to receive alerts regarding any issues.

Complete registration

Lastly, read and accept the terms of service and click Submit. Once registered, you'll receive two keys, a public key and a secret key. If you need further details or encounter any challenges while obtaining your reCAPTCHA keys, Google's developer documentation is a valuable resource.

Navigate to settings

Head to your Blutui Project Dashboard. Click on Settings and navigate to Forms page.

Key configuration

Paste the Public Key and Secret Key from the reCAPTCHA dashboard into their respective fields in the Blutui Project Dashboard.

Form ID configuration

Within your form element, assign an ID. For this guide, we'll use contact as the ID:

<form id="contact" method="POST" action="{{ request.url }}" enctype="multipart/form-data">

Embedding the JavaScript function

Within your <form> tag code, prior to the submit button, insert the following JavaScript function:

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
   function onSubmit(token) {
     document.getElementById("contact").submit();
   }
</script>

Ensure the ID within getElementById() function matches the ID you assigned to your form.

Adjusting the submit button

Modify your form's submit button to include reCAPTCHA v3 attributes:

<button
	class="g-recaptcha"
	data-sitekey="{{ settings.forms_recaptcha_key }}"
	data-callback='onSubmit'
	data-action='submit'
>
	Submit
</button>

Important attributes to note are g-recaptcha, data-sitekey, data-callback, and data-action.