Sitecore 9 Forms – Google reCAPTCHA form element

Hello Sitecorians,

Hope you’re playing around with Sitecore 9 and with the newly introduced cool features in it. Recently, I’ve been exploring Sitecore Forms and implemented the Google Re-captcha form element within the Sitecore forms. Re-captcha is the basic requirement for the form submission process and in order to implement this, we’ve to write some code to it.

Before you go through with this post in detail, you must know the basics of Sitecore Forms.

We will go through step by step process to implement the Google Recaptcha with Sitecore Forms using the custom form element. And will create a generic component which you can use for any other form as well.

I started with creating the custom form element based on the guide: walkthrough_creating_a_custom_form_element

As per the requirement, I created two properties:

  • Public Key
  • Private Key

And Core DB Items look like:

GoogleRecaptcha class:

I’ve inherited from MultipleLineTextViewModel instead of FieldViewModel. I’ll explain to you later that Why I inherit from MultipleLineTextViewModel and not FieldViewModel as given in the document.

Added the following code to the HTML:

Note: I’ve added textarea as Hidden and have provided the class – googleRecaptchaClass.

And then as you go through all the steps properly as mentioned in the document — You should be able to see reCAPTCHA element which you can then drag and drop into the form design layout area.

Now as you drag and drop the element into the form designer — You’ll get an error:

That is because you have not provided the Public Key.

Provide the public and private(secret) key in the element properties. Save the form and then reload the page. You will see reCAPTCHA is loading properly.

Are we done?

No – not yet. The most important thing is validation and that too both client and server-side validation.

Where should we add the client-side and server-side validation code and create a generic component? Don’t worry, Sitecore Community is there by your side. 🙂

While creating a form – I followed this blog: Responsive Sitecore 9 Form with Bootstrap — I provided “custom-class” to the form in the form-settings. This class will be added to the <form> tag by which we can fetch it in the JavaScript.

[Responsive Form]

And then I was thinking of where should I add the appropriate code for the client and server side validation. It was a challenge because the JavaScript which is loading is minified. And a very nice and useful post came from Jason Wilkerson – Sitecore 9 Forms and AJAX with SXA — I followed that to see how we can show the thank-you message instead of redirecting a user on the new page [which is the default submit action]. Now, while thinking about the challenge I was facing — an idea popped into my head for the client side validation.

Added the following required javascript for client-side validation to SXALayout.cshtml

captchaError — That is just for showing the client side error message. You must be thinking why I created the hidden text-area and also in above code, I’m passing the reCAPTCHA response in hidden text-area. Well, that is for server-side validation. Yes – Was facing an issue for sending the captcha response on the server-side.

For the server-side validation – I created a custom submit action following Walkthrough: Creating a custom submit action – And then tried to debug the code for server-side validation. But the challenge is I’m not able to get the captcha response in the field property on the server-side.

In the form builder ajax request data, I was able to see the captcha response properly but how should I send the response to the server and validate?

I was able to see the value of Name, Email, and Message but not the captcha response.

WHY?

If you see formbuilder ajax request carefully – You’ll see that each element has .ItemID and .Value associated with element GUID — Which then will be mapped with the Field and Value for Single-line Text and Multiple-line Text (text-area) and were available in the Value of each field respectively. What about the captcha?

Now, if you remember we inherited MultipleLineTextViewModel in GoogleRecaptcha class and not FieldViewModel as per the document– that is because there is no value property in the FieldViewModel – while if you go through the MultipleLineTextViewModel class — you’ll see the value property. In order to bind the value property with the captcha response — I went to MultipleLineText.cshtml and based on that, added the hidden text-area which we did earlier, and before form submit, we validate re-captcha on client side and then update hidden text area with the captcha response – which will then appear in the GoogleRecaptcha Field value. 🙂

You can now add the newly built Form element to any form and provide the appropriate Public and Private (Secret) Key. In the client-side validation in JavaScript we are identifying the form based on “custom-form” class, so for any new form where you add Google ReCaptcha element – you’ll have to provide the same class in order to get it working.

Make sure ValidateReCaptcha submit action is assigned to submit button and is the first to trigger before saving data and redirect.

This is just one approach I found to implement reCAPTCHA in Sitecore Forms. If you know any other better way, do reply in comments below.

Happy Sitecoring! 🙂

 

Share

4 thoughts to “Sitecore 9 Forms – Google reCAPTCHA form element”

  1. Also you could use StringInputViewModel instead of MultipleLineTextViewModel and likewise use a input type=hidden instead of textarea with a class to hide it, again accomplishes same thing but I think it is neater

  2. Hi Nikkipunjabi,
    Nice article it helped me to go through my implementation of invisible re-captcha, to make it even better your solution I’d only change instead of custom action to validate the re-captcha I created a custom validation type so you add the recaptcha and on the properties panel you chose to use re-captcha validation, accomplishes the same thing but I think it is a neater solution.

    Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *