Ajax Stylish Captcha and Contact Form using JQuery and PHP.
First of all, thanks to all of my readers who like my work and prove this by sending feedbacks over facebook style tutorials. I always try to create some useful tutorials for my users using Jquery. This tutorial is about ajax based contact form with jquery validation and ajax based captcha.
Captcha is main part of any form and if it is ajax based then it looks awesome. Hope you will like this and send me your feed back. Thanks !
JQuery Code
|
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 |
// <![CDATA[ $(document).ready(function() { $('#Send').click(function() { // name validation var nameVal = $("#name").val(); if(nameVal == '') { $("#name_error").html(''); $("#name").after('<label class="error" id="name_error"]]>Please enter your name.'); return false } else { $("#name_error").html(''); } /// email validation var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var emailaddressVal = $("#email").val(); if(emailaddressVal == '') { $("#email_error").html(''); $("#email").after('<label id="email_error" class="error">Please enter your email address.</label>'); return false } else if(!emailReg.test(emailaddressVal)) { $("#email_error").html(''); $("#email").after('<label id="email_error" class="error">Enter a valid email address.</label>'); return false } else { $("#email_error").html(''); } $.post("post.php?"+$("#MYFORM").serialize(), { }, function(response){ if(response==1) { $("#after_submit").html(''); $("#Send").after('<label id="after_submit" class="success">Your message has been submitted.</label>'); change_captcha(); clear_form(); } else { $("#after_submit").html(''); $("#Send").after('<label id="after_submit" class="error">Error ! invalid captcha code .</label>'); } }); return false; }); // refresh captcha $('img#refresh').click(function() { change_captcha(); }); function change_captcha() { document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random(); } function clear_form() { $("#name").val(''); $("#email").val(''); $("#message").val(''); } }); |
I used some stylish fonts to get this awesome captcha. Captcha is ajax based and its color changes randomly. I used 2 colors and 2 fonts.
CSS
|
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 |
body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px} #wrap{ border:solid #CCCCCC 1px; width:203px; -webkit-border-radius: 10px; float:left; -moz-border-radius: 10px; border-radius: 10px; padding:3px; margin-top:3px; margin-left:80px; } .error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;} .success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:200px;} img#refresh{ float:left; margin-top:30px; margin-left:4px; cursor:pointer; } #name,#email{float:left;margin-bottom:3px; height:20px; border:#CCCCCC 1px solid;} #message{ width:260px; height:100px;float:left;margin-bottom:3px; border:#CCCCCC 1px solid;} label{ float:left; color:#666666; width:80px;} #Send{ border:#CC0000 solid 1px; float:left; background:#CC0000; color:#FFFFFF; padding:5px;} |
HTML
|
1 2 3 |
<form id="MYFORM" action="#" name="MYFORM"><label>Name</label> <input id="name" name="name" size="30" type="text" /> <br clear="all" /><label>Email</label> <input id="email" name="email" size="30" type="text" /> <br clear="all" /><label>Message</label> <textarea id="message" name="message"></textarea> <br clear="all" /> <div id="wrap" align="center"><img id="captcha" src="get_captcha.php" alt="" /> <br clear="all" /><input id="code" name="code" type="text" /></div> <img id="refresh" src="refresh.jpg" alt="" width="25" /> <br clear="all" /><br clear="all" /><label> </label> <input id="Send" type="submit" value="Send" /></form> |
Downloads files to get this latest tutorial.
Recommended WordPress Themes Store
