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.
Hello I just implemented your script but I am still getting alert(‘Error ! invalid captcha code .’); if I echo php variable inside this statement
if(strtolower($_REQUEST[‘code’]) == strtolower($_SESSION[‘random_number’])) {
echo $_REQUEST[‘code’];
}
can you please help me to fix this bug
Please send me function files for right function sending email :(
My email: sfeikon@gmail.com
hi i have problem with your contact form mail when i send record it erro “Error ! invalid captcha code .”
in post.php your code and my code intergrad error
‘
‘