How to create motion CAPTCHA Using JQuery

This is a quick tutorial about adding modern motion captcha on your web form to avoid spammer entry. This is new generation captcha, You can also add this captcha on your mobile application because it made on normal CSS, JS and HTML.


How it works?

When user try to submit website from he/she must have to draw captcha patten as shown on the screen, If captcha drawn by user match with displayed captcha then only submit button will be enable on the screen and user can proceed.

If you want to add google recpatcha on your web form then must read this tutorial: Integrate google reCAPTCHA in your website
motion-captcha

Steps for creating motion captcha.

Here i am going to create a simple contact form with motion captcha.

Step.1: First of all include motion captcha CSS and JS files on page. Don’t forget to add jquery core library before motion captcha library. Because motion captcha library dependent on jquery library.’

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

Step.2: After that create your contact form with motion captcha, Motion captcha made on html5 canvas so that it works on only HTML5 supported browser, Use motion canvas where you want to display your motion captcha on the form.

<form action="" method="post" id="mc-form">
Name: <input type="text" name="name" placeholder="name" required="required"><br/>
 
Email: <input type="email" name="email" placeholder="email" required="required"><br/>
Message: <textarea name="message" placeholder="Enter Your Message"></textarea><br/>
<canvas id="mc-canvas" style="margin-left:-0px">
If Your browser doesn't support this - please switch in a modern browser.
</canvas>
<input type="hidden" id="mc-action" value=""/>
 
<a onclick="window.location.reload()" href="#" title="Click for a new Pattern">New Capatcha Pattern</a>
<input disabled="disabled" autocomplete="false" type="submit" value="Submit">
</form>

Step.3: Apply some css on page to make your form stylish.

<style>
 
form {
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;
}

#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;
}

#mc-canvas.mc-invalid {
border: 4px solid #aa4444;
}

#mc-canvas.mc-valid {
border: 4px solid #44aa44;
}
h2 , p { color:#009900;}
@-webkit-keyframes greenButton {
 
from { color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
 
50% { color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
 
to { color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
 
}
 
a {
 
-webkit-animation-name: greenButton;
 
-webkit-animation-duration: 1s;
 
-webkit-animation-iteration-count: infinite;
 
color: #749a02;
border-radius:10%;
}
 
</style>




Step.4: Finally add motion captcha javascript on page to display motion pattern on the screen.

<script>
jQuery(document).ready(function($) {
 $('#mc-form').motionCaptcha({
  shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
 });
});
</script>

Now all done test your form with motion captcha.

See live demo and download source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff