Introduction

Google's reCAPTCHA v3 offers an advanced protection method for your forms without user interaction, ensuring a better user experience while still shielding your site from bots and spam. This guide walks you through integrating reCAPTCHA v3 with forms on a Blutui project.

Setting Up reCAPTCHA v3

1

Registration

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

2

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.

3

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.

4

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.

5

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.

Integrating with Blutui

1

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

2

Key configuration

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

3

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

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.

5

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.

Conclusion

Congratulations! You've now incorporated Google's reCAPTCHA v3 into a form on a Blutui project. This integration ensures a seamless user experience, all the while adding an advanced layer of security against spam and bots.