logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Avoid Spammers With Motion CAPTCHA Using JQuery

Avoid Spammers With Motion CAPTCHA Using JQuery

May 13, 2016 No comments Article SEO Website Designing

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:

SEO Website Designing Live Demo    SEO Website Designing Download

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.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.