Are You An Options Trader?

Learn how to

  • Reduce Risk

  • Create Monthly Income from Option Trading

  • Get Access to Free webinars and training

  • Just enter your information below and click "Get Updates!"

Get Tom's updates and a free account at Capital Discussions.

October 2, 2011

Out with Captcha – In with Dynamic Checkbox

I had a great tour of Reedge today. Reedge is a two year old company offering website testing on steroids. Wow is it easy and fun to setup a test!

 

Dennis (the CEO) gave me the tour and did a fantastic job of analyzing the website at sheridanmentoring.com. One thing he pointed out was the optin form used a Captcha and that reduces the conversion rate. Captchas are popular but display hard to read text that frustrate users trying to submit a form. While Captchas do reduce spam, they also reduce submissions from customers and prospects.

Dennis suggested using dynamically generated checkboxes. He recommended this great page showing the pros and cons of Captchas versus checkbox

Because we don’t use wordpress, I had to write my own javascxript.

This isn’t a terribly difficult task; however, good developers “borrow” code whenever you can. I found this post from Jeremy Bililck from 2008 which basically had everything written for me 馃檪

I just had to add some divs and formatting and server side processing to make it all work.

I have these CSS styles defined:

.displayinline {display: inline;}
.fontsize10pt {font-size: 10pt; }
#addcb {width: 20px;}聽

This is the HTML to contain the checkbox and text shown to the visitor:

<div class=”fontsize10pt” align=”center”> <div id=”addcb” class=”displayinline”></div> I am not a spam bot. </div>聽

Here’s the javascript to create the checkbox:

<script language=”JavaScript” type=”text/javascript”> var checkbox = document.createElement(“input”); checkbox.type = “checkbox”; checkbox.name = “verifycheckbox”; checkbox.value= “1”;

var div = document.getElementById(“addcb”); div.appendChild(checkbox);

checkbox.checked = false; </script>

All you have to do once the form is submitted is to check for the existence of form.verifycheckbox. If this variable doesn’t exist, the user didn’t click the checkbox so redirect them back to the form.

Pretty simple solution. This is much easier for a human visitor and spambots won’t see the checkbox.

I’ll monitor the performance of this technique and let you know how it goes on our live web site.

Join our Free Option Trading Community

Tom Nunamaker

Click Here to Leave a Comment Below

Mark - October 19, 2011 Reply

Tom,

I implemented your code on my article submission form, but the form still submits when I leave the box unchecked.

I added your CSS to my CSS file as well as the div and java to the submission page.

It doesn’t matter if the box is checked or not.

What could I be doing wrong???

Mark

    Tom Nunamaker - October 19, 2011 Reply

    Hi Mark

    I do server-side checking to see if the box was checked. I suppose I could add some client side check too. Let me see if I have time to add that to the code.

John - March 5, 2013 Reply

Great little solution thanks Tom, I’ve just implemented this on a clients site.

Took me ages to work out why my checkbox wasn’t rendering properly and finally realised I’d copied your code above and hadn’t changed the curly quotes. Just in case anyone else is having problems with it thats worth checking!

Tom - August 13, 2014 Reply

I really like the simplicity of this, but must be missing something obvious. Can you post or send the code as you would use it (right out of an html document)?
Sorry if I am being thick-headed…

    Royce - October 14, 2014 Reply

    In case anyone is having trouble with this code as it is very useful. All this must be in the correct order. The JavaScript portion must come after the html. Just hope to save ya sometime. 馃檪

Leave a Reply: