article

Sunday, May 11, 2014

Ajax Contact Form with an Attachment (jQuery & PHP)

Ajax Contact Form with an Attachment (jQuery and  PHP)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
//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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//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;
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
//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);
 }
}
?>
Posted by ednalan at 3:52 AM . Under , .

Related Post