How to use Google reCaptcha on WFFM with ASP.NET Layout

Recently I needed to have reCaptcha on my forms so that I can secure them from bots. My client specifically wants to use reCaptcha so that we can have “I’m not a robot” check on our web forms.

Imnotrobot.png

There is a guide provided by Sitecore on “How to use reCaptcha on forms”, but that is for MVC layouts (See that guide here), not for ASP.NET layouts. I have spent a lot on finding a way to use reCaptcha on ASP.NET layout and then I landed on here . but, the question was, how to use this for WFFM as we don’t have access to the code. So I thought of implementing this by creating a custom field type for WFFM and render that HTML and javascript via that new field type.

So let’s take a look at that implementation.

  1. Create a class and inherit it from Sitecore.Form.Web.UI.Controls.LabelreCaptcha-code
  2. use the below Javascript code for the button click event
    $(".scfSubmitButton").click(function() {
    /*read the tocken generated by reCaptcha , token will be generated only
    if the validation is successfull */   
        var rcres = grecaptcha.getResponse();
        if (rcres.length) {
            return true;
        } else {
            return false;
        }
    });
    
  3. Create a custom field type in Sitecore at this location – /Sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom  custom-field-type.png
  4. Download the recaptcha-dotnet-1.0.5.0-binary.zip and place the Recaptcha.dll into your website’s bin folder.
  5. Now the new custom field type is ready. You just need to add a field on your form and select the field type as your new custom field (reCaptcha in my case). field-on-form.png

Publish your form and see the reCaptcha in action as shown in this screenshot.actual-use.png

I know not many people are using Sitecore on ASP.NET layouts, MVC is lightweight and far good for Sitecore. But there are some implementations on ASP.NET layouts as well, so Wrote this post in a hope that it will help someone like me.