QapTcha : jQuery captcha system by drag&drop action
QapTcha description
QapTcha is a draggable jQuery captcha system with jQuery UI !
QapTcha is an easy-to-use, simple and intuitive captcha system.
It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.
In order to work with iPhone and iPad, a file jquery.ui.touch.js has been added in v2.5 !
QapTcha works with PHP5.2 or more cause to the function json_encode() !
How does it work ?
During the DOM building, QapTcha create a hidden input with a random 'name' attribut filled with a random password.
Usually, a bot filled all the input into a form before sending the form.
The purpose of the drop is to empty this random input and set a $_SESSION['qaptcha_key'] variable with this random value in Ajax.
With PHP, just check if the random input exists and is empty and if the $_SESSION['qaptcha_key'] is filled with this random value.
In the PHP file, you just have to do something like :
if(isset($_SESSION['qaptcha_key']) && !empty($_SESSION['qaptcha_key']))
{
$myVar = $_SESSION['qaptcha_key'];
if(isset($_POST[''.$myVar.'']) && empty($_POST[''.$myVar.'']))
//mail can be sent
else
//mail can not be sent
}
unset($_SESSION['qaptcha_key']);
Even if javascript is disabled, the iQaptcha input will not be create and the PHP control always returns false : (isset($_POST[''.$myVar.'']).
Moreover, the SESSION will not be create and PHP will always returns false : (isset($_SESSION['qaptcha_key']) && $_SESSION['qaptcha_key']).
QapTcha download package
- QapTcha v4.0
- jquery
- jquery.js
- jquery-ui.js
- QapTcha.jquery.css
- jquery.ui.touch.js
- QapTcha.jquery.js
- images
- bg_draggable_qaptcha.jpg
- php
- QapTcha.jquery.php
- index.php
- jquery
QapTcha implementation
1. First, include the CSS & jQuery files
<!-- 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. Add a <div class="QapTcha"></div> into your form
<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
if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha'])
{
// mail can be sent
}
else
{
// mail can not be sent
}
4. Now, call QapTcha plugin
<script type="text/javascript">
$(document).ready(function(){
// Simple call
$('.QapTcha').QapTcha();
});
</script>
Who use QapTcha on the web ?
If you use QapTcha Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)
How can you help us ?
If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !