Contact Form Using PHP and JQUERY
So you want to create a contact form using PHP and the Jquery Framework. First you will need the jquery framework which you can download here. Jquery allows you to send a form to the server without having to reload the page. Otherwise known as AJAX. I did not include the .css for this example.
First we will move the file into the directory of your choice. In this example I am just going to put it into the root folder. After that you're going to have to create to two more files. In this example we will use ContactForm.php and ContactSubmit.php.
ContactForm.php
Contains your forms and jquery functions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Jquery Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8>
<meta name="robots" content="index,follow">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="title">Contact Us</div>
<div id="intro">Please feel free to contact us at anytime by filling out the following forms. All fields that are <strong>bolded</strong> are required.</div>
<script type="text/javascript">
$(document).ready(function(){
$("#submitform").submit(function(){
// 'this' refers to the current submitted form
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "ContactSubmit.php",
data: str,
success: function(msg){
$("#showerror").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
var result = '<p>Your request has been sent. You should receive a response from us by email or by phone within the next 12-24hrs.</p>';
$("#form").hide();
$("#intro").hide();
}
else
{
var result = '<p></p><div id=error>Please fill out all required fields.</div>';
}
$(this).html(result);
});
}
});
return false;
});
});
</script>
<div id="showerror"></div>
<div id="form">
<p></p>
<form method="post" action="" id="submitform">
<div style="width: 500px;">
<div id="colWrap">
<div id="colLeft">
To:
</div>
<div id="colRight">
My Business
</div>
</div>
<div id="colWrap">
<div id="colLeft">
<strong>Your Name:</strong>
</div>
<div id="colRight">
<input name="name" type="text" size="15">
</div>
</div>
<div id="colWrap">
<div id="colLeft">
<strong>Email Address:</strong>
</div>
<div id="colRight">
<input name="email" type="text" size="15">
</div>
</div>
<div id="colWrap">
<div id="colLeft">
Phone Number:
</div>
<div id="colRight">
<input name="phone" type="text" size="15">
</div>
</div>
<div id="colWrap">
<div id="colLeft">
<strong>Subject:</strong></div>
<div id="colRight">
<input name="subject" type="text" size="15">
</div>
</div>
<div id="colWrap">
<div id="colLeft">
<strong>Your Message:</strong></div>
<div id="colRight">
<textarea name="message" cols="30" rows="5"></textarea>
</div>
</div>
<div style="padding-left: 0px;padding-top: 10px;clear: both;"><input type="submit" name="contactus" value="Send it"></div>
</div>
</form>
</div>
</body>
<html>
ContactSubmit.php
PHP code used to trap errors or mail data from contact form.
<?php
if(!empty($_POST)) {
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']) || empty($_POST['subject']))
{
echo 'FAIL1';
} else {
$mail_to= ucwords(strtolower("Me"))."<myemailaddey@mydomainname>";
$mail_sub= $_POST["subject"];
$mail_mesg= "Name:\n".$_POSt['name']."\n\nEmail Address:\n".$_POST['email']."\n\nPhone Number:\n".$_POST["phone"]."\n\nMessage:\n".$_POST["message"];
$headers = "From: ".$_POST["name"]."<".$_POST["email"].">\r\n" .
"Reply-To: ".$_POST["name"]."<".$_POST["email"].">\r\n" .
"X-Mailer: PHP/" . phpversion();
mail($mail_to, $mail_sub, $mail_mesg, $headers);
echo 'OK';
}
}
?>
I hope this gives you an idea on how Jquery and PHP can work together to perform a simple function such as submitting a contact form with very little effort.