Forms

How do I add reCAPTCHA v3 to a form?

Learn how to protect your forms with reCAPTCHA v3.

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

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.

Integrating with Blutui

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.

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.

Last updated on