Draggable jQuery Captcha Plugin - QapTcha

File Size: 51.5 KB
Views Total: 10502
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Draggable jQuery Captcha Plugin - QapTcha

QapTcha is an easy-to-use, simple and intuitive captcha system built with jQuery and jQuery UI that needs human action instead of to read a hard text.

How to use it:

1. Include necessary files in your head section

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="QapTcha.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.ui.touch.js"></script>
<script type="text/javascript" src="QapTcha.jquery.js"></script>

2. Markup

<form method="post" action="">
    <label>First Name</label> <input type="text" name="firstname" />
    <label>Last Name</label> <input type="text" name="lastname" />
    <div class="clr"></div>
    <!-- Add this line in your form -->
    <div class="QapTcha"></div>
    <input type="submit" name="submit" value="Submit form" />

3. PHP control before sending the form

// check if $_SESSION['qaptcha_key'] created with AJAX exists
if(isset($_SESSION['qaptcha_key']) && !empty($_SESSION['qaptcha_key']))
  $myVar = $_SESSION['qaptcha_key'];
  // check if the random input created exists and is empty
  if(isset($_POST[''.$myVar.'']) && empty($_POST[''.$myVar.'']))
    //mail can be sent
    //mail can not be sent

4. Call the plugin

<script type="text/javascript">
    // Simple call
    // More complex call
      autoSubmit : true,
      autoRevert : true,
      PHPfile : 'path_to_my_php_file/Qaptcha.jquery.php'

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.