How to prevent spammers with MotionCAPTCHA using jQuery

March 17, 2024 4:03 am

How to prevent spammers with MotionCAPTCHA using jQuery

{ 4 Comments}

Captcha is one of the very useful to prevent spammers to insert fake data in your web forms, today I am going to show you how to create a MotionCAPTCHA using jQuery. MotionCAPTCHA is a jQuery CAPTCHA plugin that requires users to sketch the shape they see in the canvas in order to submit a form. This is a very simple and easy to configure in your web application it looks like a drawing pad user has to draw given sketch.

How to prevent spammers with motion CAPTCHA using jQuery

[wpdm_file id=83]DEMO

Read more about CAPTCHA on: How to create CAPTCHA image verification in PHP and jQuery and How to create Image less CAPTCHA using PHP

I have used a jQuery plugin by Joss Crowcroft.

It create shapes from a predefined shapes file you can add you own shapes as much as you can.

How to use:

<link rel="stylesheet" href="jquery.motionCaptcha.0.2.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.motionCaptcha.0.2.js" ></script>

Include MotionCAPTCHA CSS and jQuery with MotionCAPTCHA jQuery file.

jQuery motionCPTCHA initialize:

<script type="text/javascript">
        jQuery(document).ready(function($) {
            // Do the biznizz:
            $('#mc-form').motionCaptcha({ // Form id to append shapes
                shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star'] // list of shapes which we have included in file.
            });
        });
    </script>

This above code will call the motionCaptcha function and add shapes in the given area.

CSS to make drawing area looks nice:

<style>
form {
    width: 440px;
    display: block;
    text-align:left;
    margin: 20px auto;
}
input,
textarea {
    font-family:"Lucida Grande", sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: block;
    border: 0;
    outline:0;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
       -moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
    padding: 9px 12px;
    margin:0 0 20px;
}
/* MotionCAPTCHA canvas */
#mc-canvas {
    margin:0 auto 20px;
    padding:1px;
    display: block;
    border: 4px solid #433e45;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
/* Red border when invalid */
#mc-canvas.mc-invalid {
    border: 4px solid #aa4444;
}
/* Green border when valid */
#mc-canvas.mc-valid {
    border: 4px solid #44aa44;
}
</style>

All together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to prevent spammers with motion CAPTCHA using jQuery | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="jquery.motionCaptcha.0.2.css?ez_orig=1"/>
<style>
form {
    width: 440px;
    display: block;
    text-align:left;
    margin: 20px auto;
}
input,
textarea {
    font-family:"Lucida Grande", sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: block;
    border: 0;
    outline:0;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
       -moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
    padding: 9px 12px;
    margin:0 0 20px;
}
/* MotionCAPTCHA canvas */
#mc-canvas {
    margin:0 auto 20px;
    padding:1px;
    display: block;
    border: 4px solid #433e45;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
/* Red border when invalid */
#mc-canvas.mc-invalid {
    border: 4px solid #aa4444;
}
/* Green border when valid */
#mc-canvas.mc-valid {
    border: 4px solid #44aa44;
}
</style>
</head>
<body>
<h2>How to prevent spammers with motion CAPTCHA using jQuery example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="/">More Demos</a></h2>
<form action="#" method="post" id="mc-form">
<div id="mc">
<p>Please draw the shape in the box to submit the form: (<a onclick="window.location.reload()" href="#" title="Click for a new shape">new shape</a>)</p>
<canvas id="mc-canvas">
Your browser doesn't support the canvas element - please visit in a modern browser.
</canvas>
<input type="hidden" id="mc-action" value=""/>
</div>
<p><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.motionCaptcha.0.2.js" ></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Do the biznizz:
            $('#mc-form').motionCaptcha({
                shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
            });

        });
    </script>
</body>
</html>

Above complete code will work as a MotionCaptcha working in our demo you can also download its code for free.

[wpdm_file id=83]DEMO

This is a very simple but very useful tutorial I hope it helps all web developers please feel free to comment your suggestion and issues if you faced in integration and do share this with your friends.