in Playground

jQuery Fancy Draggable Captcha

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order. Here you can download the source as a ZIP file:  Captcha ZIP DEMO

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

Click to see a demo
Click to see a demo

Here you can download the source as a ZIP file:  Captcha ZIP

DEMO

Previous:
Next:

Tagged with:

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

View all contributions by

Website: http://tympanus.net/codrops/author/cody/

Related Articles

SVGFilterHover_featured

Image Distortion Effects with SVG Filters

TextTrailEffect_featured

Text Trail Effect

GridRevealEffects_featured

Grid Reveal Effects with Anime.js

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 10

Comments are closed.
    • 2

      Hi ellisgl, not good 🙂
      I will soon post a new one that has support for users that don’t have JavaScript enabled.
      greets

  3. 4

    I was wondering, would this really stop a bot from posting on your site? After all the bot wouldn’t even see the javascript it would just post directly to your server-side script.

    Unless you somehow combine server-side functionality with the javascript this really just gives you a false sense of security.

    • 5

      Hi Evan,
      yes you are right, there must be some server side that checks that. In this post I was just trying to show another possibility for a captcha. I didnt consider the server side part here. I would change the script in a way that the user has to order the numbers in the same way of another sequence that would be displayed for him/her. That value (of the sequence that he/she has to simulate) would be stored for example in some session variable that would be then matched with the user’s sequence. Another improvement would be to put the numbers as pictures and not only from 1 to 6.
      Greetings

  6. 8

    Hey quite good blog!! Man .. Attractive .. Remarkable .. I am going to bookmark your blog and have the rss feeds also…

  8. 10

    i tried this one. but not working on IE7. keeps on saying you’re not a human. any idea to solve this? thanks!

Comments are closed.