reCaptcha style Captcha with JQuery and PHP

Author: Zeeshan Rasool  |  Jan 19, 2011 AJAX, JQuery, PHP, Tutorials

This tutorial is about to creating a captcha same as recaptcha. I used CSS and PHP for this. You can find few tutorials about creating and integrating captcha/recaptcha in php over 99points, but now you can create your own recaptcha style captcha with php and jquery. I have created a form with captcha few months before.

Popular Tutorials on 99Points

No Spams or Newsletters for Subscribers.

JQuery Code

[code type="javascript" title="JQuery"]
$(document).ready(function() {
// refresh captcha
$('img#captcha-refresh').click(function() {

change_captcha();
});

function change_captcha()
{
document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
}
});
[/code]

HTML

[code type="markup" title="HTML"]

Type the two words:

[/code]

CSS

[code type="css" title="CSS"]
/*
Recaptcha Style Captcha
=======================
re-Captcha Style Captcha with php and jQuery

Created By: Zeeshan Rasool
URL : http://www.99Points.info

Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
*/

#captcha-wrap{
border:solid #870500 1px;
width:270px;
-webkit-border-radius: 10px;
float:left;
-moz-border-radius: 10px;
border-radius: 10px;
background:#870500;
text-align:left;
padding:3px;
margin-top:3px;
height:100px;
margin-left:80px;
}
#captcha-wrap .captcha-box{
-webkit-border-radius: 7px;
background:#fff;
-moz-border-radius: 7px;
border-radius: 7px;
text-align:center;
border:solid #fff 1px;
}
#captcha-wrap .text-box{
-webkit-border-radius: 7px;
background:#ffdc73;
-moz-border-radius: 7px;
width:140px;
height:43px;
float:left;
margin:4px;
border-radius: 7px;
text-align:center;
border:solid #ffdc73 1px;
}

#captcha-wrap .text-box input{ width:120px;}
#captcha-wrap .text-box label{
color:#000000;
font-family: helvetica,sans-serif;
font-size:12px;
width:150px;
padding-top:3px;
padding-bottom:3px;
}
#captcha-wrap .captcha-action{
float:right; width:117px;
background:url(logos.jpg) top right no-repeat;
height:44px; margin-top:3px;
}
#captcha-wrap img#captcha-refresh{
margin-top:9px;
border:solid #333333 1px;
margin-right:6px;
cursor:pointer;
}
[/code]