How to send an email with HTML template using PHP and Ajax

July 23, 2018 XpertPhp Comments 0 Comment

We will have learned how to sending mail with a template using PHP. whenever creating contact form this tutorial is used.

See the below image is my email template design.

First, create an HTML form. take a name, email, subject, and message in this form. after then when clicking on the 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 a handler through send ajax form data. see follow my example.

<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>

<html>

<head>

<title>Ajax by sending an email with a template using PHP - XpertPhp</title>

</head>

<body>

<tr>

<td colspan="2" align="center">Contact Form</a></td>

</tr>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Subject</td>

</tr>

<tr>

<td>Message</td>

</tr>

<tr>

</tr>

</table>

</form>

$(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 a 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.

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

 ?>

<?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='[email protected]';

$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";

}

Please follow and like us: