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!

Comments

  1. Hi Ya, David probably...

    This CAPTCHA code does not work. I've tried several times, following the instructions exactly and also varying where I think it may be not-so-complete.

    ie: "...we want to replace the contents of the "action" in the example above to be "#".

    Did it like this:
    action="#" id="contact-form" method="POST"

    Did it like this:
    action="#&ifq" id="contact-form" method="POST"

    Did it like this:
    action=""

    Maybe you could show what the entire string,
    "action="https://docs.google.com/spreadsheet/formResponse?formkey=XXXXXXXXXXXXXXXXXXX&embedded=true&ifq" id="contact-form" method="POST"",

    looks like after the mods you recommend.

    Thank you.

    ReplyDelete
    Replies
    1. The entire form looks like:
      form action="#" id="contact-form" method="post"

      The formkey gets placed into the javascript as described. Please link me to the form page if you'd like me to be specific with your issue!

      Delete
    2. How did you ever get to be such a nice guy. Thank you.

      It's a test form right now, and I want to do the email form data, and custom redirect, which I've got both of those to work together, but when i try to add the captcha thing, it doesn't work. I did it exactly like you showed, as I exampled the first time, but "POST" was capitalized already, and your example shows lower-case... Don't know if it maters.

      The Test Form is at:
      https://docs.google.com/spreadsheet/viewform?formkey=dE4xak1kbkFfZlNpOFBIV0hCRWRVZXc6MQ#gid=0

      Thanks again David,

      J R

      Delete
    3. Hi JR, I need to see the form in the web page, not the form on docs.google.com. I need to see how you've placed it into the HTML page and what the script looks like there.

      Delete
    4. Ok, I followed your tutorial, "Google Docs submission form tutorial", and that bare-bones form is at http://AmerServ.net/01-Form-Code-On-Page-01.htm. Tested and works. (I created it with Fireworks as a new html, copying the form to form elements as the tutorial instructed, placing that in the "body" of the new html doc, and uploaded via ftp).

      Then I edited that form with the Captcha coding from your instructions here, trying to follow instructions exactly, renamed, and uploaded that to http://AmerServ.net/02-Form-Code-On-Page-Now-With-Captcha-01.htm. The same thing is happening as before. There is now a blank text box just above the "submit" button. What am I doing wrong, and thanks for your help David.

      J R

      Delete
    5. This comment has been removed by the author.

      Delete
    6. Try removing the characters after the < script ...> and the ones right before the < /script>

      I don't think you need to escape the script, which is why the script doesn't seem to be running for you.

      Delete
    7. Thank You. Didn't work David. http://amerserv.net/03-Form-Code-On-Page-Now-With-Captcha-Mod-01.htm .

      Delete
    8. Ok, the problem is that the JQuery library isn't being served to you. Either save and reference the contents of https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js as a local file, or copy/paste the contents into a < script>< /script> in the head of your file.

      Delete
  2. Hi David. This worked great when I last tried it several times in the past! But with google's new form/spreadsheet.. I'm having trouble finding the key?


    Ex: https://docs.google.com/forms/d/1R7G2e7BWzWyvEztp2UaMFY7YhULz04vehRyR7ug_4pE/viewform


    I tried adding the 1R7G2e.. etc and the d/1R7G2e etc parts but both didn't work. Then I tried adding the response sheet ID, but that didn't work either. Can you tell me what what I'm doing wrong?

    ReplyDelete
  3. Yes, the new Google Docs has thrown a loop into our code, and I'll need to revise it with the new functionality/flow that they're using. What you can do is this:

    Replace:

    ssForm.attr({'action' : 'https://docs.google.com/spreadsheet/formResponse?formkey=' + formKey + '&embedded=true&ifq'});

    With:

    ssForm.attr({'action' : 'https://docs.google.com/forms/d/' + formKey + '/formResponse'});

    Where in your example your formKey is 1R7G2e7BWzWyvEztp2UaMFY7YhULz04vehRyR7ug_4pE



    That should do the job!

    ReplyDelete
  4. It worked, thanks a ton!

    ReplyDelete
  5. This works like charm without any problems. But unfortunately, I'm getting the same kind of spam submissions you've mentioned in the beginning of this article.


    Probably spam bots have found a solution to pass this captcha challenge.

    ReplyDelete
  6. Do you mind posting the URL of your form? I have yet to receive any spam through any of the forms I've created using this mechanism...

    ReplyDelete
  7. Here's the entire form code I'm using http://gd-form-demo.blogspot.com/2013/05/google-drive-demo-form.html

    ReplyDelete
  8. Hi David,


    I posted the URL few days back but got no reply!

    ReplyDelete
  9. Worked for me right out of the gate. Now lets see if it actually cuts done on the spam entries! Thank, David.

    ReplyDelete

Post a Comment