So let’s start the coding. Before begin, take a look at major files used for this tutorial.
- index.php
- email_send.php
- form_validation.js
Step1: Create Email Form HTML
First we will create email Form HTML in index.php. The Form will contain name, email, attachment and message inputs.
<div class="container">
<h2>Example: Send Email with Attachment in PHP</h2>
<div id='success_message' class='hidden'>
<h2>Your Mail Sent Successfully!</h2>
<p><strong>You will be in touch soon.</strong></p>
</div>
<form action='email_send.php' class="form-email" method="post" id="email-form" enctype='multipart/form-data'>
<div id="error">
</div>
<div class="form-group">
<input type="input" class="form-control" placeholder="Name" name="u_name" id="u_name" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="u_email" id="u_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="file" class="form-control" placeholder="File" name="attach" id="attach" />
</div>
<div class="form-group">
<textarea cols="60" rows="5" id="message" name="message" placeholder='Message'></textarea>
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="email_send" id="email_send">
Send Email
</button>
</div>
</form>
</div>
Step2: Validate Email Form
Then we will handle functionality to validate email send form inputs in form_validation.js using jQuery form plugin. We will also handle functionality to display messages after email send successfully.
$('document').ready(function() {
(function() {
$('form').ajaxForm({
beforeSubmit: function() {
$("#email-form").validate({
rules: {
u_name: {
required: true,
minlength : 3
},
u_email: {
required: true,
email: true
},
attach: {
required: true
},
message: {
required: true
}
},
messages: {
u_name: {
required:"Please enter name",
minlength: "Please enter a valid name"
},
u_email:{
required: "Please enter your email",
minlength: "Please enter a valid email address",
},
attach: "Please Choose image",
message: "Please enter message"
},
});
var flag= $('#email-form').valid();
if(!flag){
return false;
}
},
complete: function(xhr) {
$("#email-form").addClass("hidden");
$("#success_message").removeClass("hidden");
}
});
})();
});
Step3: Implement Email Send with Attachment using PHPMailer
The email send form will be submitted to email_send.php after validation. In this file, we will have form post data and handle functionality to send email with attachment using PHPMailer.
<?php
require 'PHPMailer/PHPMailerAutoload.php';
try {
if(isset($_POST['email_send'])) {
$mail = new PHPMailer;
$mail->FromName = $_POST['u_name'];
$to_email = $_POST['u_email'];
$mail->AddAddress($to_email);
$mail->From = "admin@phpzag.com";
$mail->Subject = "Test Email Send using PHP";
$body = "<table>
<tr>
<th colspan='2'>This is a test email</th>
</tr>
<tr>
<td>Name :</td>
<td>".$_POST['u_name']."</td>
</tr>
<tr>
<td>E-mail : </td>
<td>".$_POST['u_email']."</td>
</tr>
<tr>
<td>Message : </td>
<td>".$_POST['message']."</td>
</tr>
<table>";
$body = preg_replace('/\\\\/','', $body);
$mail->MsgHTML($body);
$mail->IsSendmail();
$mail->AddReplyTo("admin@phpzag.com");
$mail->AltBody = "To view the message, please use an HTML compatible email viewer!";
$mail->WordWrap = 80;
$mail->AddAttachment($_FILES['attach']['tmp_name'], $_FILES['attach']['name']);
$mail->IsHTML(true);
$mail->Send();
echo 'The message has been sent.';
}
} catch (phpmailerException $e) {
echo $e->errorMessage();
}
?>
You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]