article

Sunday, May 11, 2014

Ajax Contact Form with an Attachment (jQuery & PHP)

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

Related Post