Avoid Spammers With Motion CAPTCHA Using JQuery

Hi Friends, Today i will tell you about how to avoid spammers with motion captcha using jquery. As we know spammers can easily break all the capatcha using some kind of algorithms and techniques because all the capatcha’s have same type of characters and number. To overcome that kind of problem you have to add new type of captcha for example motion captcha. In the motion captcha your user have to do some motion to prove he/she is a human being.

For More information about Website Design you can click below:
Pure CSS Button With Lightening Glowing and Shining Effect
Create Expand Collapse Sliding Menu Using jQuery
Background Color Change Automatically Using Jquery
How to add smart slider Facebook Like Box Pop-up
Learn Ajax For Beginners In Hindi
33 New Awesome Features in CSS3 and CSS4
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners

Avoid Spammers With Motion CAPTCHA Using JQuery Live demo:

See the demo and download the code below:

How to Avoid Spammers With Motion CAPTCHA Using JQuery:

For avoiding the spammers you have to add motion captcha in your website form. For adding motion captcha using jquery, you have to follow some steps. These Steps are:

Step1: You have to open your code editor.

Step2: You have to add some below code for avoiding, stopping or preventing spammers to fill the form in your website.

HTML Code:

<h2 style="text-align:center;">Avoid Spammers With Motion CAPTCHA Using JQuery</h2>
<form action="#" method="post" id="mc-form">
<div id="mc">
<p>Please draw the captcha shape in the box to submit the form: (<a onclick="window.location.reload()" href="#" title="Click for a new shape">New Capatcha Shape</a>)</p>
<canvas id="mc-canvas">
If Your browser doesn't support this - please switch in a modern browser.
</canvas>
<input type="hidden" id="mc-action" value=""/>
</div>
<center><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></center>
</form>

In the above code i am creating one form in which motion captcha code is there and i am using a html5 canvas tag to show the motion captcha in the web page or a website contact form. I have also added one more button named New Captcha Shape. Using this button you can change the shape of the captcha.




CSS Code:

<link rel="stylesheet" href="jquery.motionCaptcha.0.2.css?ez_orig=1"/>

<style>

form {
width:100%;
display: block;
text-align:center;
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;
}
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>

Using the above code i have done some styling of our form and webpage.

JQUERY Code:

<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>

Using the above jquery code your captcha will run in a better way. After using the code your motion captcha box color change from black, red to green and your user knows he/she fills a valid captcha or not. In the shapes i define all the shapes which i am using in motion captcha.

Step3: After applying all the code. Check your webpage contact form in the modern browser ( Google Chrome ) to see the captcha.

Note: This captcha will not work in the older browser(IE6).

Enjoy New Motion Captcha using jquery in your website

Read About Other Interesting Things below.

1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
4. Basics of Social Media Optimization Services
5. On Page Search Optimization Services
6. How to Create a Website from scratch for beginners
7. How To Write a Blog for Website and Content Marketing
8. Website Promotion – Need For All Websites
9. Important Things to Think Before Graphic Designs
10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Categories: Website Design