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