SaaS CMS has officially launched! Learn more now.

Henrik Buer
May 16, 2011
(1 votes)

XForm spam prevention with reCAPTCHA or jQuery slider

Surprisingly few of my customers has reported problems with spam in their XForms but some have. This blog post is an exercise in how this issue can be addressed. There are a lot of methods for protecting spam in forms, logins, forums etc. Some of the most widely used are captchas or some logical puzzle, basically any method that automated spam bots has a hard time solving but humans solves easily is used. 


I’ve decided to do two different methods. The first is integration of reCAPTCHA in XForm. Here’s an example how it can look like with reCAPTCHAS “clean” theme.


This is the XForm from the Public templates. To do this I’ve hooked in to the ControlsCreated event of the XFormControl on the page. There I create a new control of type RecaptchaControl and add this to the XFormControl above the submit button. Download the reCAPTCHA ASP.NET library (it’s just a dll). Drop it in your bin folder and add a reference to the dll. Heres the ControlsCreated event handler.

   1: protected void FormControl_ControlsCreated(object sender, EventArgs e)
   2: {
   3:     Recaptcha.RecaptchaControl objReCaptcha = new Recaptcha.RecaptchaControl();
   5:     objReCaptcha.ID = "MyReCaptcha";
   6:     objReCaptcha.Theme = "clean";
   7:     objReCaptcha.PrivateKey = "your_private_key_here";
   8:     objReCaptcha.PublicKey = "your_public_key_here";
  10:     // Find submit button and insert captcha before
  11:     foreach(Control objControl in FormControl.Controls)
  12:     {
  13:         if (objControl.GetType() == typeof(EPiServer.XForms.WebControls.Submit))
  14:         {
  15:             FormControl.Controls.AddAt(FormControl.Controls.IndexOf(objControl), objReCaptcha);
  16:             break;
  17:         }
  18:     }
  19: }

After this you need to validate the reCAPTCHA when the form submits. This is done in BeforeSubmitPostedData event handler.

   1: protected void FormControl_BeforeSubmitPostedData(object sender, EPiServer.XForms.WebControls.SaveFormDataEventArgs e)
   2: {
   3:     Recaptcha.RecaptchaControl objControl = FormControl.FindControl("MyReCaptcha") as Recaptcha.RecaptchaControl;
   5:     if (objControl != null)
   6:     {
   7:         Page.Validate();
   9:         if (!objControl.IsValid)
  10:         {
  11:             // TODO: Notify user that validation failed
  12:             e.CancelSubmit = true;
  13:         }
  14:     }
  15: }

That’s it. Add a custom validator or some other kind of user feedback if validation fails…

jQuery slider

With that said I must admit… I hate captchas. I think it’s an intrusive way that hinders user interaction. I’ve also seen a lot of bad captchas that’s barely readable which I find annoying. Your users deserves better.

My humble approach to spam prevention without pissing off my users are to use a jQuery slider instead of a button. Here’s how it can look.


The idea here is that spam bots can’t interact with the slider. Help me out here readers… is this true? This demands just slightly more effort from the users compared to clicking a button.

I add the slider like I did the reCAPTCHA with the difference that I also hide the submit button. If you want to use the options that the editor can set for the forms submit button (ChannelOptions, mail addresses and subject) when the slider does postback, this is the place to do it. See the code below.

   1: protected void FormControl_ControlsCreated(object sender, EventArgs e)
   2: {
   3:     Slider.Slider objSlider = new Slider.Slider(Page.ClientScript.GetPostBackEventReference(this, Slider.Slider.PostBackArgument));
   5:     objSlider.SliderHeading = "Vote by sliding me to the right...";
   6:     objSlider.SliderStyle = "style=\"margin-left:5px;margin-top:5px\"";
   8:     // Find submit button, hide it and add slider
   9:     foreach(Control objControl in FormControl.Controls)
  10:     {
  11:         if (objControl.GetType() == typeof(EPiServer.XForms.WebControls.Submit))
  12:         {
  13:             // Save ChannelOption for later use when slider does postback
  14:             EPiServer.XForms.WebControls.Submit xSubmit = (EPiServer.XForms.WebControls.Submit)objControl;
  16:             SubmitOptions = ActionToChanelOptions(xSubmit.Action);
  17:             FormControl.Data.MailFrom = xSubmit.ActionSettings["from"];
  18:             FormControl.Data.MailTo = xSubmit.ActionSettings["to"];
  19:             FormControl.Data.MailSubject = xSubmit.ActionSettings["subject"];
  21:             if (SubmitOptions == ChannelOptions.CustomUrl)
  22:             {
  23:                 FormControl.Data.CustomUrl = xSubmit.Action;
  24:             }
  26:             if ((FormControl.Data.MailSubject == null) || (FormControl.Data.MailSubject.Length == 0))
  27:             {
  28:                 FormControl.Data.MailSubject = FormControl.FormDefinition.MailSubject;
  29:             }
  31:             Int32 iIndex = FormControl.Controls.IndexOf(objControl);
  33:             FormControl.Controls[iIndex].Visible = false;
  34:             FormControl.Controls.AddAt(iIndex, objSlider);
  36:             break;
  37:         }
  38:     }
  39: }
I’ve implemented the slider the same way that the reCAPTCHA is implemented – as a class inheriting from System.Web.UI.WebControls.WebControl. There I override the Render() and RenderContents() methods (link to source at the end of this blog post). Note that in order to get the slider to postback you’ll have to provide a postback string. This can be obtained from Page.ClientScript.GetPostBackEventReference(). To check if the slider is postbacking I do this in Page_Load()
   1: if (IsPostBack && Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == Slider.Slider.PostBackArgument)
   2: {
   3:     Page.Validate();
   5:     if (!Page.IsValid)
   6:     {
   7:         // TODO: Notify user that validation failed
   8:     }
   9:     else
  10:     {
  11:         FormControl.SubmitForm(SubmitOptions);
  12:     }
  13: }

I’d really like your opinion on using a jQuery slider as spam prevention. Does it stop spam bots? Is there any other way for a bot to interact with a slider besides simulating mouse movements and clicks? I’ve been running the slider variant on my public site “protecting” blog comments and a guestbook for a few months now. So far no spam… Feel free to post your thoughts on the effectiveness of having a slider as opposed to having a captcha.

Code ‘n links

reCAPTCHA – get your keys here

reCAPTCHA ASP.NET library – get your dll here

The code is the XFom template from the Public templates modified to reside in an .aspx file

XForm reCAPTCHA here

XForm Slider here

Slider.cs here

May 16, 2011


Anders Hattestad
Anders Hattestad May 16, 2011 09:31 AM

cool, thx for the post.

May 16, 2011 12:37 PM

The bot can't interact with the slider, that's true. But it can select one radiobutton, depending on the bots capabilities, e.g. supports javascript.

I recommend, which doesn´t require any user input at all.

Henrik Buer
Henrik Buer May 17, 2011 07:49 AM

Hi Johan

Interesting link. My reflection was that Akismet is most suited for comments/forum/guestbook and other forms that has a fixed field set. XForm can, as we know, vary but I see no problem filtering out the textboxes in a form and checking these with Akismet. My main concern is giving the editor the ability to report spam/ham back to Akismat. That is somewhat troublesome with EPiServer XForms. Another concern I have is the low (93%) blocking of all comment spam, trackback spam and pingback spam that is claimed

May 20, 2011 02:16 PM

I think 93% blocking is OK. Especially when considering that there is no need for user input.
There should be no problem to contruct a "blog comment" out of an xform posting. We use this method on our clients websites with great result.
CAPTCHAS is terrible from an accessibility standpoint and can also be a problem on other devices.

Eva Bengtsson
Eva Bengtsson Jan 24, 2014 02:25 PM

@ Johan Ptersson,
Hi Johan,
Can you share a link to a webpage where you have implemented Askimet
I would like to see in the results in the front end

Please login to comment.
Latest blogs
Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Configure local development - Part 2

This is part 2 of a proof-of-concept (POC) blog. In this post, I will guide you through the steps to configure your SaaS instance with your local...

Raghavendra Murthy | Jul 19, 2024 | Syndicated blog