Tip: A simple CATCHA for preventing spam through submission forms

Nothing is more annoying than getting spam through your website's submission forms, especially when it looks something like:

Name :: cholrdji
Email :: cholrdji
Location :: cholrdji
Feedback :: maoozbcvtifmpgxibu, http://www.asdaacadsfad.com rlivmvxcza

What's the point, right? Do they think you're actually going to click on that link? But at the same time you want the form there, don't want to make it too hard for users to fill out, but would prefer to limit the garbage that you get. A CAPTCHA is what you need!

A CAPTCHA is a challenge-response test that functions as a way to determine whether the operator is a human on a machine/script. You've probably seen them for all sorts of things online when you have to guess at the weirdly distorted graphic of a word or numbers and enter the values into a form field. There are plenty of options out there for free CAPTCHA scripts, but for our purposes, using the Google Docs forms as we've documented, we don't have access to server-side code to create the CAPTCHAs.

But all is not lost, there is a solution for your spam problem!

The solution that we're providing uses Javascript, so unfortunately the <2% of people that disable Javascript will not be able to submit your form.

Before we get too far, the first step you'll need to do is to create a form and add that form's HTML to a page or gadget in your site. For instructions, please visitor our Google Docs submission form tutorial.

The code

You can access a clean copy of the code here. Please this code into your template before </head>.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
// form id value, default is ss-form
var formID = 'ss-form';
// your form's formkey value, taken from the form action URL
var formKey = '';
// the id of your label field name for the captcha query
var labelName = 'ssTestLabel';
// the id of your captcha field id for the query
var testField = 'ssTestValue';

var submitted = false;

$(document).ready(function() {
var ssForm = $('#'+formID);

var randomInt = Math.floor((Math.random()*100)+1);
$('#'+labelName).text('Please repeat "' + randomInt + '"');
  
ssForm.submit(function(evt){
if($('#'+testField).val() == randomInt){
// allow bubble with 'true' return value
ssForm.attr({'action' : 'https://docs.google.com/spreadsheet/formResponse?formkey=' + formKey + '&amp;embedded=true&amp;ifq'});
return true;
}else{
alert('You need to repeat the number "' + randomInt + '"');
// block bubble with 'false' return value
return false;
}
});
});

//]]></script>

That's the Javascript; you'll also need to add the following HTML into your form, preferably before your submit button:

<label id="ssTestLabel" for="ssTestValue"></label>
<input type="text" name="ssTestValue" value="" id="ssTestValue" />

Those fields created the label and form field that will display your "captcha".

The variable values

Back in the Javascript section we have some variable values that need specifying. The first is your form's ID; you'll see that in the form code you pasted which will look something like:

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=XXXXXXXXXXXXXXXXXXX&amp;embedded=true&amp;ifq" id="contact-form" method="POST"

The id in the above example is "contact-form". The next variable value you need is the formkey; in the above example it is XXXXXXXXXXXXXX. Once you've copy/pasted that formkey value into your Javascript we want to replace the contents of the "action" in the example above to be "#".

If you copy/pasted the HTML label and input above into your form, you can change the values from ssTestLabel and ssTestValue to whatever you'd like, just make sure the HTML values and the Javascript values match properly.

The explanation of what's happening here

What we're doing in this script is disabling the form's ability to submit information unless the end-user correctly fills out the query/response of the repeat value. By changing the form action to #, the form can't submit, nor can it bypass the challenge. It's only when the user correctly answers the challenge question that the form action is added to the form, at which point the information can be submitted.

All set!

Once you've completed the above, save your form and you should be all set! Questions or comments, please feel free to leave them in the comments below. If we make updates to the script we will post them here.


Don't forget!

We have quite a few other articles on creating and extending forms for use in your Blogger site, check them out!