Ajax Stylish Captcha and Contact Form using JQuery and PHP.

Author: Zeeshan Rasool | Last updated on December 10th, 2010

AJAX, JQuery, PHP, Web Design

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 !

[ad#ad-3]

[ad#co-2]

JQuery Code

// <![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.</label>');
			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 class="error" id="email_error">Please enter your email address.</label>');
			return false
		}
		else if(!emailReg.test(emailaddressVal)) {
			$("#email_error").html('');
			$("#email").after('<label class="error" id="email_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 class="success" id="after_submit">Your message has been submitted.</label>');
			change_captcha();
			clear_form();
		}
		else
		{
			$("#after_submit").html('');
			$("#Send").after('<label class="error" id="after_submit">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('');
 }
});

// <![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.</label>');

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 class="error" id="email_error">Please enter your email address.</label>');

return false

}

else if(!emailReg.test(emailaddressVal)) {

$("#email_error").html('');

$("#email").after('<label class="error" id="email_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 class="success" id="after_submit">Your message has been submitted.</label>');

change_captcha();

clear_form();

}

else

{

$("#after_submit").html('');

$("#Send").after('<label class="error" id="after_submit">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.
[ad#co-4]

CSS

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;}

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

<form action="#" name="MYFORM" id="MYFORM">
	<label>Name</label>
	<input name="name" size="30" type="text" id="name">
	<br clear="all" />
	<label>Email</label>
	<input name="email" size="30" type="text" id="email">
	<br clear="all" />
	<label>Message</label>
	<textarea id="message" name="message"></textarea>
	<br clear="all" />
	
	<div id="wrap" align="center">
		<img src="get_captcha.php" alt="" id="captcha" />
		
		<br clear="all" />
		<input name="code" type="text" id="code">
	</div>
	<img src="refresh.jpg" width="25" alt="" id="refresh" />
		
	<br clear="all" /><br clear="all" />
	<label>&nbsp;</label>
	<input value="Send" type="submit" id="Send">
</form>

<label>Email</label>

<label>Message</label>

</div>

</form>

Downloads files to get this latest tutorial.
[ad#ad-3]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Manan

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
Josef Ichiro Holický

Please send me function files for right function sending email :(
My email: sfeikon@gmail.com
phan chanra

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
‘

‘
Pingback: Ajax Stylish Captcha and Contact Form using jQuery and PHP - Pixel Library()