February 27, 2014 11:07 am

How to prevent spammers with MotionCAPTCHA using jQuery

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

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:

Include MotionCAPTCHA CSS and jQuery with MotionCAPTCHA jQuery file.

jQuery motionCPTCHA initialize:

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

CSS to make drawing area looks nice:

All together:

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

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • santhosh

    its a new idea….. very nice

  • laxman ch

    great work,..its very helpful to us

  • Very nice

  • LukasEder

    No. Please no. No more captchas!!