How to implement Google ReCAPTCHA Field in Sitecore form?

Nowadays, Re-captcha has become an essential prerequisite for the submission of online forms. However, the main problem for Sitecore is that it does not provide a reCAPTCHA field. To achieve this, we need to develop specific code for its implementation.

Using the custom form element, we will go through a step-by-step process to implement the Google ReCAPTCHA with Sitecore Forms. And will create a generic component that you can use for any other form as well.

For this, we need to make some changes in the Core DB and master DB.

1. Navigate to the location

   "/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Details" and create a duplicate of the "FieldName" item.

2. Rename it to "PrivateKey". Now in this item update the “FormLabel” to “Private Key” and “BindingConfiguration” like the below screenshot

   

3. Do the same steps for the other two items "PublicKey" and "ErrorMessage".

Now to create the Property Editor follow bellow steps.

1. Navigate to the “/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings”

2. Duplicate the "SingleLineText", rename it to "GoogleRecapthca" and navigate to Detail section

3. Add the newly created items in “ControlDefinitions”field like below screenshot

   

1. Go to the "/sitecore/templates/System/Forms/Fields" location and make a copy of the "Input" Item located there. Rename it to “Google Recaptcha”. also create the _StandardValues of it

2. Include three fields named "Public Key," "Private Key," and "Error Message".

   

3. Modify the “PrivateKey” and “PublicKey” values in the _StandardValues.

   

Now create below files in your project

1. GoogleRecaptcha.cs

   

2. Also create the new class called “CaptchaValidator.cs” like below,

   

3. Create the new view “GoogleRecaptcha.cshtml” and place it under the “Views\FormBuilder\FieldTemplates”

   

Now in Sitecore Navigate to path “/sitecore/system/Settings/Forms/Validations” and create a new validator “Captchavalidator”.

Create a new field “Google Recaptcha” at the “/sitecore/system/Settings/Forms/Field Types/Security” and update the red marked fields

Now let’s create the form

And select the “CaptchaValidator” in the “GoogleRecaptcha” field’s Validations.

Now Let’s test the field

And Done for Implementation of the Google ReCAPTCHA field in Sitecore Form.