This code is based on the Tuts Valley jQuery Contact Form. I had a few problems with their script so I made a few changes and it works perfectly. Hope this helps others.

View the Demo | View the HTML Auto-Response Email Demo

Put this in your header:

<style>
#contact_form_holder { font-family: 'Verdana'; width:400px; padding:0px; margin:0px; }
#cf_submit_p { text-align:right; }
.error { display:none; padding:5px; color:#D8000C; font-size:12px; background-color:#FFBABA; border:solid 1px #e06d6d; }
.success { display:none; padding:5px; color:#044406; font-size:12px; background-color:#B7FBB9; border:solid 1px #65d668; }
#contact_logo { vertical-align:middle; }
.error img { vertical-align:top; }
.contact_name, .contact_email, .contact_subject, .contact_message { font-size:14px; width:388px; max-width:388px; background:none; border:solid 1px #505050; padding:5px; margin:5px 0px; }
#topic { width:100%; font-size:12px; background:none; border:solid 1px #505050; padding:5px; margin:5px 0px; }
.contact_message { height:200px; }
select, input, textarea { outline:none; background:none; border:solid 1px #505050; }
select:focus, input:focus, textarea:focus { border:solid 1px #0066FF; -webkit-box-shadow:#0066FF 0px 0px 5px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#send_message').click(function(e){
			e.preventDefault();
			var error = false;
			var topic = $('#topic').val();
			var name = $('#name').val();
			var email = $('#email').val();
			var subject = $('#subject').val();
			var message = $('#message').val();
			if(topic.length == 0){
				var error = true;
				$('#topic_error').fadeIn(500);
			} else {
				$('#topic_error').fadeOut(500);
			}
			if(name.length == 0){
				var error = true;
				$('#name_error').fadeIn(500);
			} else {
				$('#name_error').fadeOut(500);
			}
			if(email.length == 0 || email.indexOf('@') == '-1'){
				var error = true;
				$('#email_error').fadeIn(500);
			} else {
				$('#email_error').fadeOut(500);
			}
			if(subject.length == 0){
				var error = true;
				$('#subject_error').fadeIn(500);
			} else {
				$('#subject_error').fadeOut(500);
			}
			if(message.length == 0){
				var error = true;
				$('#message_error').fadeIn(500);
			} else {
				$('#message_error').fadeOut(500);
			} if(error == false){
				$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
				$.post("send_email.php", $("#contact_form").serialize(),function(result){
						var r = result;
						if(r == 'sent'){
						$('#cf_submit_p').remove();
						$('#mail_success').fadeIn(500);
					} else {
						$('#mail_fail').fadeIn(500);
						$('#send_message').removeAttr('disabled').attr('value', 'Send Message');
					}
				});
			}
		});
	});
</script>

Then put this in your body:

<div id="contact_form_holder">
    <form action="index.php" method="post" id="contact_form">
        <h2>Contact Us</h2>
        <div id="topic_error" class="error"><img src="error.png" /> What category should this be filed in?</div>
        <div>
            <select name="topic" id="topic">
                <option value="">Please select a topic...</option>
                <option value=" Option 1 ">Option 1</option>
                <option value=" Option 2 ">Option 2</option>
                <option value=" Option 3 ">Option 3</option>
            </select>
        </div>
        NAME:<div id="name_error" class="error"><img src="error.png" /> We don't talk to strangers.</div>
        <div><input class="contact_name" type="text" name="name" id="name" /></div>
        EMAIL:<div id="email_error" class="error"><img src="error.png" /> You don't want us to answer?</div>
        <div><input class="contact_email" type="text" name="email" id="email" /></div>
        SUBJECT:<div id="subject_error" class="error"><img src="error.png" /> What's the purpose of this email?</div>
        <div><input class="contact_subject" type="text" name="subject" id="subject" /></div>
        MESSAGE:<div id="message_error" class="error"><img src="error.png" /> Forgot why you came here?</div>
        <div><textarea class="contact_message" name="message" id="message"></textarea></div>
        <div id="mail_success" class="success"><img src="success.png" /> Thank you. The mailman is on his way.</div>
        <div id="mail_fail" class="error"><img src="error.png" /> Sorry, we don't know what happened. Please try again later.</div>
        
        <div id="cf_submit_p">
            <input class="submit" type="submit" id="send_message" value="Send Message">
        </div>
    </form>
</div>

Now, create a new PHP document, call it ‘send_email.php’, and put it in the same directory as the contact page. Put this code inside of that page:

<?php

	$autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
	$autoResponseSubject = "Demo Contact Form"; 
	$autoResponseMessage = "Hi, thank you testing the JQuery Contact Form Demo.";
	$autoResponseHeaders = "From: email_from@yourWebsite.com";  
	
    //we need to get our variables first
	$email_to =   'email_to@yourWebsite.com'; //the address to which the email will be sent
    $topic    =   $_POST['topic'];
    $name     =   $_POST['name'];
    $email    =   $_POST['email'];
    $subject  =   $_POST['subject'];
    $msg  =   $_POST['message'];
    
    $message = "From: $name \r\nEmail: $email \r\nTopic: $topic \r\nMessage: \r\n$msg";

    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know
     who are we replying to. */
    $headers  = "From: $email\r\n";
    $headers .= "Reply-To: $email\r\n";
    

    if(mail($email_to, $subject, $message, $headers)){
    	if($autoResponse === true){
    		mail($email, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders);
    	}
        echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..
    }else{
        echo 'failed';// ... or this one to tell it that it wasn't sent
    }


?>

Use these images if you want!

Replace ‘index.php’ with the name of the page this jQuery contact form is going on in:

<form action="index.php" method="post" id="contact_form">

Also, replace ‘email_to@yourWebsite.com’ with the email address to which you want the submissions sent, and replace ‘email_from@yourWebsite.com’ with the email from which you want the auto-respond message sent.

UPDATE:

If you want the time/date when the email was sent added to the emails, add

$time = date('F j, Y g:i:s A T', time());

to the ‘send_email.php’ page and change the $message line to this:

$message = "From: $name \r\nEmail: $email \r\nTime: $time \r\nTopic: $topic \r\nMessage: \r\n$msg";

ALSO, if you want to add some HTML to the auto-response email, just change content of the $autoResponseMessage to HTML, and add some more info to the content in the $autoResponseHeaders. You can see how it works here. The following is the code I used in the send_email.php in that jQuery contact form.

<?php

	$autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
	$autoResponseSubject = "Demo Contact Form With HTML Email"; 
	$autoResponseMessage = "<html>
<head>
	<title>This is your HTML email!</title>
</head>
<body style='background:#0066cc url(http://eliwedel.com/ewpd/demos/jquery-contact-form-with-html-email/gradient.png) top left repeat-x; text-align:center;'>
	<div style='width:700px; font-family:Arial, Helvetica, sans-serif; font-size:44px; color:#CCC; text-align:center; margin:0 auto; padding:20px;'>THIS IS YOUR</div>
    <img src='http://eliwedel.com/ewpd/demos/jquery-contact-form-with-html-email/HTML.png' width='679' height='206' />
</body>
</html>
";
	$autoResponseHeaders  = "From: your@email.com"."\r\n";
	// To send HTML mail, the Content-type header must be set
	$autoResponseHeaders .= "MIME-Version: 1.0"."\r\n";
	$autoResponseHeaders .= "Content-type: text/html; charset=iso-8859-1"."\r\n";
	
    //we need to get our variables first
	$email_to = $_POST['email'];
	$name = $_POST['name'];
	$time = date('F j, Y g:i:s A T', time());
    
    $message = "From: $name "."\r\n"."Email: $email_to "."\r\n"."Time: $time "."\r\n";

    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know
     who are we replying to. */
    $headers  = "From: $email_to"."\r\n";
    $headers .= "Reply-To: $email_to"."\r\n";
    

    if(mail('your@email.com', 'HTML Email Sent!', $name . ' just had an HTML sent to them', $headers)){ if($autoResponse === true){ mail($email_to, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders); } echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent.. }else{ echo 'failed';// ... or this one to tell it that it wasn't sent } ?>

Now change ‘your@email.com’ to your email!

IMPORTANT: Make sure that any file or link you are linking to has the full URL, otherwise you’ll get no image or an improperly linked link.

That’s it!! Hope this helps!

Pin It on Pinterest