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="">
  <fieldset>
    <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" />
  </fieldset>
</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
  }
  else
  {
    //mail can not be sent
  }
}
unset($_SESSION['qaptcha_key']);

4. Call the plugin

<script type="text/javascript">
  $(document).ready(function(){
    // Simple call
    $('.QapTcha').QapTcha();
    
    // More complex call
    $('.QapTcha').QapTcha({
      autoSubmit : true,
      autoRevert : true,
      PHPfile : 'path_to_my_php_file/Qaptcha.jquery.php'
    });
  });
</script>

---

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