Resources

Stop Spam With MotionCAPTCHA jQuery Plugin

Captcha is a challenge response test for website forms. This consists of a simple test where the outcome of the test will prove that a human being is submitting the form and not a computer.

An example of a captcha I use on this site on the contact form, you'll see at the bottom of the form is a simple test of 7 + 4 and a input box to enter the answer. When the user submits this form I can then hardcode the sum of 7 + 4 and do a check on the input from the form, if they match then it's ok to submit the form.

Why Use A Captcha System

The main reason to use a captcha (any form of captcha) is to make sure that the person submitting the form from your website is actually a human and not a computer. There is software that will crawl websites for contact forms and send spam emails to the website owner.

If your site is new don't think your be safe from spam, if you have links to your site you will still get spam.

The main place people use Captcha's on websites is either on contact forms or comments. These are places where you only want humans to fill out the form and send you data. So the captcha is used to stop automated form submission on your website.

Different Types Of Captcha

Like I said at the start of this article Captcha is just a simple test which will attempt to discover if the user submitting a form is a human.

As it's just a simple test there are a few things to can do to make sure humans can pass this easily.

  • Easy Maths sum
  • Checkbox if you are not a spammer
  • Whats the word in the image

These three are the most popular captcha techniques which are used. The easy maths sum is the technique I use on Paulund, all you have to do is give me the answer to 7 + 4 and you will be able to send me an email. Failure to answer this question correctly will not send the email.

Checkbox if you are not a spammer, is a technique I've seen on many blog comment forms, it's not really a test it just makes sure that a checkbox is checked before it will allow you to send the comment.

What is reCAPTCHA?

Typing the word in the image has become popular by reCAPTCHA where it would display you two images and you will need to type these words inside the input box, if these are correct you can submit the form.

reCAPTCHA

Motion Captcha

Motion captcha is a jQuery plugin I've stumbled across where it will ask the user to draw over the image displayed to them, this can only be done by a human with a mouse and therefore proves they are a human so passes the test and allows you to submit the form.

This jquery plugin is based on the HTML5 canvas to make it easy to draw any shape in a box and make sure it matches the image behind it.

Motion Captcha was created by Joss Crowcroft, who has also created other great plugins I've featured to create a money converter tool.

motioncaptcha-screenshot

How Do You Use MotionCAPTCHA

First you need to download the MotionCAPTCHA Javascript file.

Download MotionCaptcha

Then you need to add the Javascript and the CSS file to your page along with the latest version of jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>

Create The Form

With the Captcha now included on the page we can create the form we want to validate before it's sent.

<form action="#" id="mycoolform" method="[get/post]">
<p><input type="text" name="name"/></p>
<p><input type="text" name="email"/></p>
<p><textarea name="message"></textarea></p>
<div id="mc">
    <p>Please draw the shape in the box to submit the form:</p>
    <canvas id="mc-canvas"></canvas>
</div>
<input type="submit" disabled="disabled" value="Submit Form" />
<input type="hidden" id="fairly-unique-id" value="submitform.php" />
</form>

The Final Javascript

With the form on the page we can create the Javascript to add the MotionCaptcha to the page by using the following code.

$('#form-id').motionCaptcha({
    action: '#fairly-unique-id'
});

There are other options you can pass to the plugin to change how it behaviours.

$('#form-id').motionCaptcha({
    // Basics:
    action: '#mc-action',        // the ID of the input containing the form action
    divId: '#mc',                // if you use an ID other than '#mc' for the placeholder, pass it in here
    cssClass: '.mc-active',      // this CSS class is applied to the 'mc' div when the plugin is active
    canvasId: '#mc-canvas',      // the ID of the MotionCAPTCHA canvas element

    // An array of shape names that you want MotionCAPTCHA to use:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // These messages are displayed inside the canvas after a user finishes drawing:
    errorMsg: 'Please try again.',
    successMsg: 'Captcha passed!',

    // This message is displayed if the user's browser doesn't support canvas:
    noCanvasMsg: "Your browser doesn't support <canvas> - try Chrome, FF4, Safari or IE9."

    // This could be any HTML string (eg. '<label>Draw this shit yo:</label>'):
    label: '<p>Please draw the shape in the box to submit the form:</p>'
});

Download MotionCaptcha

Back to top