Create an AMAZING JQuery Contact Form With Optional HTML Auto-Response Email
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){
if(result == '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 title of the page this 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 sparkles to the auto-response email, and add some HTML, 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 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: info@eliwedel.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('info@eliwedel.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
}
?>
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!
Amazing in deed!
Thanks a lot!
So simple and works so well. Great!
Best,
Jozsef
How can i get the ‘Name’ and the name field on the same line rather that having the field under ‘Name’ ?
Try putting NAME: between <div> and <input ..
Thanks for that, just one last question. I like that fact that this will automatically send the person an email, how can i format that autoresponse email to be a HTML email? would like to use this for my site to automatically send a newsletter.
Check out example #4 at http://php.net/manual/en/function.mail.php
Thanks for that quick reply, but i am not very good with php.. could you please tell me how i incorporate that into your send_mail script so i can have it autorespond with a HTML email? Thanks in advance
I updated that post with more info on what you’re asking. Let me know if you need anymore help! :)
Thanks for that Eli.. fantastic work!
What some validation for this?
It’s not a very high level of validation. Just checks for content within the fields and checks for a ‘@’ in the email field.
this script not working properly, i got the error Sorry, we don’t know what happened. Please try again later… what wrong i did, can u please explain…
I tried out your example but I still have slight issues
1. How many files were used mention is made of send_mail.php, contact.php and index.php.
2. I know the content of send_mail, and say contact.php, what is the content of index.php. or am I getting something wrong here?
All you need is send_mail.php and index.php (or whatever your contact page is called). The header content and body content goes into the contact page (in the sample case it is index.php). Then the php content goes into the send_mail.php page.
It might be something on your servers side. The script works fine for me.