How do I add reCAPTCHA v3 to a form?

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

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

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.

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

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.

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

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

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

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.

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.