Filename: index.

html

This is the page where we have a simple form that collects all the information from the user to send an email via PHP
mail.

HTML Form
XHTML

1 <form id="contact-form" method="post" enctype="multipart/form-data">

2   <div class="form-group">
3     <label for="fname">First Name:</label>
4     <input type="text" class="form-control" id="fname">
5   </div>
6   <div class="form-group">
7     <label for="email">Email Address:</label>
8     <input type="email" class="form-control" id="email_address">
9   </div>
10   <div class="form-group">
11   <label for="attachment">File attachment:</label>
12    <input type="file" name="file_attach" class="input-field"/>
13   </div>
14
15   <button type="button" id="submit" class="btn btn-default btn-dark">Submit</button>
16 </form>
Above form have fields like First Name, Email Address and File attachment. Each input filed has its unique ID to
fetch the data once the form has submitted.

Note : We have set  enctype=”multipart/form-data” . This is used for file attachment.

The script that gather all information submitted by the Form and pass the data to process.php to send an email.

JavaScript

1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
2 <script type="text/javascript">
3   $(document).ready(function() {
4           
5            $("#submit").click(function(e) {
6               
7                var proceed = true;
8  
9                if(proceed) //everything looks good! proceed...
10         {
11  
12            //data to be sent to server        
13             var m_data = new FormData();  
14             m_data.append( 'first_name', $('#fname').val());
15             m_data.append( 'email_address', $('#email_address').val());
16             m_data.append( 'file_attach', $('input[name=file_attach]')[0].files[0]);
17               
18             //instead of $.post() we are using $.ajax()
19             //that's because $.ajax() has more options and flexibly.
20  
21             $.ajax({
22               url: 'process.php',
23               data: m_data,
24               processData: false,
25               contentType: false,
26               type: 'POST',
27               dataType:'json',
28               success: function(response){
29                  //load json data from server and output message    
30                 if(response.type == 'error'){ //load json data from server and output message    
31                     output = '<div class="error">'+response.text+'</div>';
32                 }else{
33                     output = '<div class="success">'+response.text+'</div>';
34                 }
35                 $("#response").hide().html(output).slideDown();
36               }
37             });
38             
39
40         }
41  
42            });
43   });
44  
45 </script>
process.php

 Collect data send by jQuery using Ajax

 Construct the email
 Check whether have attachment or not
 Send Email using the PHP mail function.
PHP

1 <?php
2  
3  
4         
5     //Recepient Email Address
6     $to_email       = "[email protected]";
7  
8     //check if its an ajax request, exit if not
9     if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
10         $output = json_encode(array( //create JSON data
11             'type'=>'error',
12             'text' => 'Sorry Request must be Ajax POST'
13         ));
14         die($output); //exit script outputting json data
15     }
16  
17     //Sanitize input data using PHP filter_var().
18     $first_name      = filter_var($_POST["first_name"], FILTER_SANITIZE_STRING);
19     $email_address   = filter_var($_POST["email_address"], FILTER_SANITIZE_EMAIL);
20     $subject         = "Your Email Subject Goes Here...";
21   
22      
23     //Textbox Validation
24     if(strlen($first_name)<4){ // If length is less than 4 it will output JSON error.
25         $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
26         die($output);
27     }
28     
29  
30  
31     $message = '<html><body>';
32     $message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
33     $message .= "<tr style='background: #eee;'><td><strong>First Name:</strong> </td><td>" . strip_tags($_POST['first_name']) . "</td></tr>";
34     $message .= "<tr><td><strong>Email Address :</strong> </td><td>" . strip_tags($_POST['email_address']) . "</td></tr>";
35     $message .= "</table>";
36     $message .= "</body></html>";
37  
38  
39     $file_attached = false;
40     if(isset($_FILES['file_attach'])) //check uploaded file
41     {
42         //get file details we need
43         $file_tmp_name    = $_FILES['file_attach']['tmp_name'];
44         $file_name        = $_FILES['file_attach']['name'];
45         $file_size        = $_FILES['file_attach']['size'];
46         $file_type        = $_FILES['file_attach']['type'];
47         $file_error       = $_FILES['file_attach']['error'];
48  
49  
50  
51         //exit script and output error if we encounter any
52         if($file_error>0)
53         {
54             $mymsg = array(
55             1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
56             2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
57             3=>"The uploaded file was only partially uploaded",
 58             4=>"No file was uploaded",
59             6=>"Missing a temporary folder" );
60              
61             $output = json_encode(array('type'=>'error', 'text' => $mymsg[$file_error]));
62             die($output);
63         }
64          
65         //read from the uploaded file & base64_encode content for the mail
66         $handle = fopen($file_tmp_name, "r");
67         $content = fread($handle, $file_size);
68         fclose($handle);
69         $encoded_content = chunk_split(base64_encode($content));
70         //now we know we have the file for attachment, set $file_attached to true
71         $file_attached = true;
72  
73  
74  
75         
76     }
77  
78  
79      
80     if($file_attached) //continue if we have the file
81     {
82        
83     // a random hash will be necessary to send mixed content
84     $separator = md5(time());
85  
86     // carriage return type (RFC)
87     $eol = "\r\n";
88  
89     // main header (multipart mandatory)
90     $headers = "From:Fromname <[email protected]>" . $eol;
91     $headers .= "MIME-Version: 1.0" . $eol;
92     $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
93     $headers .= "Content-Transfer-Encoding: 7bit" . $eol;
94     $headers .= "This is a MIME encoded message." . $eol;
95  
96     // message
97     $body .= "--" . $separator . $eol;
98     $body .= "Content-type:text/html; charset=utf-8\n";
99     $body .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
100     $body .= $message . $eol;
101  
102     // attachment
103     $body .= "--" . $separator . $eol;
104     $body  .= "Content-Type:".$file_type." ";
105     $body .= "Content-Type: application/octet-stream; name=\"" . $file_name . "\"" . $eol;
106     $body .= "Content-Transfer-Encoding: base64" . $eol;
107     $body .= "Content-Disposition: attachment; filename=\"".$file_name."\"". $eol;
108     $body .= $encoded_content . $eol;
109     $body .= "--" . $separator . "--";
110         
111     }
112     else
113     {
114         
115         $eol = "\r\n";
116         
117         $headers = "From: Fromname <[email protected]>" . $eol;
118         $headers .= "Reply-To: ". strip_tags($email_address) . "\r\n";
119         $headers .= "MIME-Version: 1.0\r\n";
120         $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
121         $body .= $message . $eol;
122  
123     }
124  
125  
126     $send_mail = mail($to_email, $subject, $body, $headers);
127  
128     if(!$send_mail)
129     {
130         //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
131         $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
132         die($output);
133     }else{
134         $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$first_name .' Thank you for your order, will get back to you shortly'));
135         die($output);
136     }
137  
138 ?>