reCaptcha style Captcha with JQuery and PHP
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!-- Captcha HTML Code --> <div id="captcha-wrap"> <div class="captcha-box"> <img src="get_captcha.php" alt="" id="captcha" /> </div> <div class="text-box"> <label>Type the two words:</label> <input name="captcha-code" type="text" id="captcha-code"> </div> <div class="captcha-action"> <img src="refresh.jpg" alt="" id="captcha-refresh" /> </div> </div> <!-- Copy and Paste above html in any form and include CSS, get_captcha.php files to show the captcha --> [/code] <div><a href="http://www.box.net/shared/es4u0si349" target="_blank"><img title="download" src="http://www.99points.info/wp-content/themes/zeeword/images/download.GIF" border="0" alt="" width="137" height="61" /></a></div> <h2>CSS</h2> <pre lang="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; } |
Recommended WordPress Themes Store
Pingback: 2 | 1wthemes()