reCaptcha

Download   Demo

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.

JQuery Code

$(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();

);

HTML

<input name="captcha-code" type="text" id="captcha-code">

 

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;

reCaptcha