Ajax Contact Form with an Attachment (jQuery and PHP)
//index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax Contact Form</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_btn").click(function() {
//get input field values
var user_name = $('input[name=name]').val();
var user_email = $('input[name=email]').val();
var user_phone = $('input[name=phone]').val();
var attach_file = $('input[name=file_attach]')[0].files[0];
var user_message = $('textarea[name=message]').val();
//simple validation at client's end
//we simply change border color to red if empty field using .css()
var proceed = true;
if(user_name==""){
$('input[name=name]').css('border-color','red');
proceed = false;
}
if(user_email==""){
$('input[name=email]').css('border-color','red');
proceed = false;
}
if(user_phone=="") {
$('input[name=phone]').css('border-color','red');
proceed = false;
}
if(user_message=="") {
$('textarea[name=message]').css('border-color','red');
proceed = false;
}
//everything looks good! proceed...
if(proceed)
{
$(".loading-img").show(); //show loading image
$(".submit_btn").hide(); //hide submit button
//data to be sent to server
var post_data = new FormData();
post_data.append( 'userName', user_name );
post_data.append( 'userEmail', user_email );
post_data.append( 'userPhone', user_phone );
post_data.append( 'userMessage',user_message);
post_data.append( 'file_attach', attach_file );
//instead of $.post() we are using $.ajax()
//that's because $.ajax() has more options and can be used more flexibly.
$.ajax({
url: 'contact_me.php',
data: post_data,
processData: false,
contentType: false,
type: 'POST',
dataType:'json',
success: function(data){
//load json data from server and output message
if(data.type == 'error')
{
output = '<div class="error">'+data.text+'</div>';
}else{
output = '<div class="success">'+data.text+'</div>';
//reset values in all input fields
$('#contact_form input').val('');
$('#contact_form textarea').val('');
}
$("#result").hide().html(output).slideDown(); //show results from server
$(".loading-img").hide(); //hide loading image
$(".submit_btn").show(); //show submit button
}
});
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function() {
$("#contact_form input, #contact_form textarea").css('border-color','');
$("#result").slideUp();
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset id="contact_form">
<legend>Contact Form</legend>
<div id="result"></div>
<label for="name"><span>Name</span>
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
<label for="email"><span>Email Address</span>
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
<label for="phone"><span>Phone</span>
<input type="text" name="phone" id="phone" placeholder="Phone Number" />
</label>
<label for="phone"><span>Attachment</span>
<input type="file" name="file_attach" id="file_attach" />
</label>
<label for="message"><span>Message</span>
<textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
</label>
<label><span> </span>
<button class="submit_btn" id="submit_btn">Submit</button>
<img src="ajax-loader.gif" class="loading-img" style="display:none">
</label>
</fieldset>
</body>
</html>
//style.css
#contact_form{
width:350px;
padding:20px;
border: 1px solid #DDD;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
background:#FAFAFA;
margin-right: auto;
margin-left: auto;
}
#contact_form legend{
font-size: 15px;
color: #C9C9C9;
}
#contact_form label{
display: block;
margin-bottom:5px;
}
#contact_form label span{
float:left;
width:100px;
color:#666666;
}
#contact_form input{
height: 25px;
border: 1px solid #DBDBDB;
border-radius: 3px;
padding-left: 4px;
color: #666;
width: 230px;
font-family: Arial, Helvetica, sans-serif;
}
#contact_form textarea{
border: 1px solid #DBDBDB;
border-radius: 3px;
padding-left: 4px;
color: #666;
height:100px;
width: 230px;
font-family: Arial, Helvetica, sans-serif;
}
.submit_btn {
border: 1px solid #D8D8D8;
padding: 5px 15px 5px 15px;
color: #8D8D8D;
text-shadow: 1px 1px 1px #FFF;
border-radius: 3px;
background: #F8F8F8;
}
.submit_btn:hover
{
background: #ECECEC;
}
.success{
background: #CFFFF5;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #B9ECCE;
border-radius: 5px;
font-weight: normal;
}
.error{
background: #FFDFDF;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #FFCACA;
border-radius: 5px;
font-weight: normal;
}
//contact_me.php
<?php
if($_POST)
{
$to_Email = "recipient_email@yourdomain.com"; //Replace with recipient email address
$subject = 'contact form'; //Subject line for emails
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userPhone"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Phone = filter_var($_POST["userPhone"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
{
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(!is_numeric($user_Phone)) //check entered data is numbers
{
$output = json_encode(array('type'=>'error', 'text' => 'Only numbers allowed in phone field'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
### Attachment Preparation ###
$file_attached = false; //initially file is not attached
if(isset($_FILES['file_attach'])) //check uploaded file
{
//get file details we need
$file_tmp_name = $_FILES['file_attach']['tmp_name'];
$file_name = $_FILES['file_attach']['name'];
$file_size = $_FILES['file_attach']['size'];
$file_type = $_FILES['file_attach']['type'];
$file_error = $_FILES['file_attach']['error'];
//exit script and output error if we encounter any
if($file_error>0)
{
$mymsg = array(
1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
3=>"The uploaded file was only partially uploaded",
4=>"No file was uploaded",
6=>"Missing a temporary folder" );
$output = json_encode(array('type'=>'error', 'text' => $mymsg[$file_error]));
die($output);
}
//read from the uploaded file & base64_encode content for the mail
$handle = fopen($file_tmp_name, "r");
$content = fread($handle, $file_size);
fclose($handle);
$encoded_content = chunk_split(base64_encode($content));
//now we know we have the file for attachment, set $file_attached to true
$file_attached = true;
}
if($file_attached) //continue if we have the file
{
# Mail headers should work with most clients (including thunderbird)
$headers = "MIME-Version: 1.0\r\n";
$headers .= "X-Mailer: PHP/" . phpversion()."\r\n";
$headers .= "From:".$user_Email."\r\n";
$headers .= "Subject:".$subject."\r\n";
$headers .= "Reply-To: ".$user_Email."" . "\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=".md5('boundary1')."\r\n\r\n";
$headers .= "--".md5('boundary1')."\r\n";
$headers .= "Content-Type: multipart/alternative; boundary=".md5('boundary2')."\r\n\r\n";
$headers .= "--".md5('boundary2')."\r\n";
$headers .= "Content-Type: text/plain; charset=ISO-8859-1\r\n\r\n";
$headers .= $user_Message."\r\n\r\n";
$headers .= "--".md5('boundary2')."--\r\n";
$headers .= "--".md5('boundary1')."\r\n";
$headers .= "Content-Type: ".$file_type."; ";
$headers .= "name=\"".$file_name."\"\r\n";
$headers .= "Content-Transfer-Encoding:base64\r\n";
$headers .= "Content-Disposition:attachment; ";
$headers .= "filename=\"".$file_name."\"\r\n";
$headers .= "X-Attachment-Id:".rand(1000,9000)."\r\n\r\n";
$headers .= $encoded_content."\r\n";
$headers .= "--".md5('boundary1')."--";
}else{
# Mail headers for plain text mail
$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
}
//send the mail
$sentMail = @mail($to_Email, $subject, $user_Message, $headers);
if(!$sentMail) //output success or failure messages
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email'));
die($output);
}
}
?>
.jpg)
