Invisible reCAPTCHA 2.0 Field with Sitecore9 Form Module
Do you know – There are more than 5 million websites which are using Google reCAPTCHA technologies!
“ReCaptcha is easily readable for humans and is difficult for bots”
As you are already familiar about the google reCAPTCHA, which you see on the website lead forms to protect the bot, you have to prove that you are not Bot, you are human, and to achieve this you have to tick the checkbox, and do some activities which proofs that you are not a bot – some time catch the cat, some calculation or identify the car or traffic light.
But from a customer experience point of view, it’s irritating sometimes, you have to spend lots of time to validate yourself, and from marketer point of view, there is a massive drop out of the forms because of the reCaptcha validation on the form.
It's exactly the same - it just doesn't have a checkbox. You won't see the field at all. Like with a traditional reCaptcha, an additional challenge will sometimes appear if it thinks you're not a human, but with invisible reCaptcha, this happens when you submit the form (and the submission will be sent once you validate the image test) instead of when you tick the checkbox.
Invisible reCaptcha analyses activity on a website (e.g. mouse movements and typing patterns) to determine if a user is a robot. Only the most suspicious traffic will be prompted to solve a captcha to apply.
When an application is submitted, the above image will appear briefly as the feature analyses the activity on the submission. After a few moments, if the feature determines that a real candidate created the form, the image will be dismissed, and the form will be complete.
Ok, let’s talk about implementation:
So, if you are using Sitecore 9 form, and want to use the Google Invisible reCAPTCHA field on the form, then download this module as a first step,
Download the Package - Module Package
This module will install some files and Sitecore items including – DLL, View, Config, JS and Sitecore Items to rendered the custom invisible reCaptcha field and will validate the form (Client and Server Side validation)
Just install this Sitecore package as a normal Sitecore Package.
Post Installation Steps:
• Change the Public and Private key of the ReCaptcha in the config file
• Add your domain in the ReCaptcha Admin console
Go and check the setting Google reCAPTCHA Setting
You can also download the complete source code from here –
Now, Let’s Configure this Module on your Sitecore Box
After installation the package, you will get one custom field in the Sitecore form tool kit called ReCaptcha which will be available in the toolkit under security tab:
Create new Sitecore form from scratch
- Go to form module
- Create a new form
- Select the blank form
Drag any field on the form, I just dragged two fields Name, Email and Submit button
Now drag the ReCaptcha Field on the form:
Once you dragged the field, it will be hidden, but we can identify through the highlighted component on the form.
Save the form by name reCaptcha_Form
Let’s Use this form on Page and check the Invisible reCaptcha in real-time
Create the dummy page for Form rendering
I have created a small Sitecore package which contains two view files and 1 Sitecore layout which will use in this demo, download this package from the below location:
Once you installed this package, you will get one layout called ReCaptcha_Layout under layout folder
Now create one new Sitecore Item called ReCaptcha under home Item through the newly created layout(ReCaptcha_Layout ) and add MvcForm component and provide the data source to the new form called reCaptcha_Form as below:
- Publish the Sitecore Item - Smart Publish
- Add the domain in google reCAPTCHA setting
- Browse the page:
I hope you like this article.