How to send an email with HTML template using PHP and Ajax
We will have learned how to sending mail with a template using PHP. whenever creating contact form this tutorial is used.
See below image is my email template design.
First, create html form. take a name, email, subject, and message in this form. after then when click on submit button then Ajax will take data and send the request to another page. I have created jquery validation in this html form and when validations are completed then submit handler through send ajax form data. see follow my example.
|
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 |
<html> <head> <title>Ajax by sending an email with a template using PHP - XpertPhp</title> </head> <body> <form name="frmContact" id="frmContact"> <table border="1" align="center"> <tr> <td colspan="2" align="center">Contact Form</a></td> </tr> <tr> <td>Name</td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td>Email</td> <td><input type="email" name="email" id="email"></td> </tr> <tr> <td>Subject</td> <td><input type="text" name="subject" id="subject"></td> </tr> <tr> <td>Message</td> <td><input type="text" name="message" id="message"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="btnContact"></td> </tr> </table> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <script> $(document).ready(function(){ $("#frmContact").validate({ rules: { name: { required:true }, email: { required:true, email:true }, subject: { required:true }, message: { required:true } }, messages: { }, submitHandler: function(form) { var fomr = $('form')[0]; var formData = new FormData(fomr); $.ajax({ type: 'POST', url: "contact_sendmail.php", data:formData, cache:false, contentType: false, processData: false, success: function(data) { if(data=='Message Send Successfully') { alert(data); } else { alert(data); } } }); return false; } }); }); </script> </body> </html> |
Get the all form data and store in particular variable. This has used the PHP Mail function in the below example. if you want to send mail in the template then create the template and its store in the variable, and this variable can pass in the mail function. if mail will be sent successfully then return the success message otherwise return fail message.
|
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 |
<?php if(isset($_POST['btnContact'])) { $name = $_REQUEST['name']; $email = $_REQUEST['email']; $subject = $_REQUEST['subject']; $msg = $_REQUEST['message']; $message = '<html><body>'; $message.='<table border="0" width="600px" style="font-size:14px; text-align:center">'; $message.='<tr style="background: #1eaace; color:#FFFFFF; height: 50px;"><td colspan="2">Contact Information</td></tr>'; $message.='<tr style="background: #1eaace; color:#FFFFFF; height: 50px;"><td>Name</td><td>'.strip_tags($name).'</td></</tr>'; $message.='<tr style="background: #1eaace; color:#FFFFFF; height: 50px;"><td>Email</td><td>'.strip_tags($email).'</td></</tr>'; $message.='<tr style="background: #1eaace; color:#FFFFFF; height: 50px;"><td>Subject</td><td>'.strip_tags($subject).'</td></</tr>'; $message.='<tr style="background: #1eaace; color:#FFFFFF; height: 50px;"><td>Message</td><td>'.strip_tags($msg).'</td></</tr>'; $message.='</table>'; $message.='</body></html>'; $to=$email; $from='xyz@gmail.com'; $subject='Contact Infromation'; $headers = "From: " . $from . "\r\n"; $headers .= "Reply-To: ". strip_tags($from) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; $retval = mail ($to,$subject,$message,$headers); if($retval==true) { echo "Message Send Successfully"; } else { echo "failed"; } } ?> |