Hello! In this post, you will learn to send HTML content inside an e-mail body.
In PHP, you can achieve this in many ways. Below two are commonly used.

1.  Using inbuilt ‘mail()’ function of PHP,or
2. Using ‘PHPMailer’ library.

In the first one, you need to have a properly configured SMTP server of your own, since using Gmail like service provider’s server you will be asked to handle various authentication stuff.
So here, I will show you how to use PHPMailer library to send mail using Gmail’s SMTP server. Let’s start.


PHP send email html demo


 

You can buy our service Mailget for the complete solution.


Step 1. Change Settings in your Gmail account:

For this you can refer to our blog post Send email via Gmail SMTP server in PHP which will give you a clear idea about the settings you need to change in gmail and how you can use PHPMailer Library.


Step 2. Get the PHPMailer library:

The library is written in PHP and includes PHP class files.You can download from Github. Now extract PHPMailer’s .zip file, to your project folder.I had given the path as “/script/phpmailer/”.

Note:

If you are using wamp server and  “php_smtp” PHP extension is not available in your WAMP Server installation (mostly unavailable in WAMP 2.0c and later versions) then you can download the php_smtp.dll and configure php.ini as following:

  1. Download php_smtp.dll file.
  2. Copy-paste the downloaded php_smtp.dll file in the “C:\wamp\bin\php\php5.2.6\ext\” folder.
  3. Open php.ini (C:\wamp\bin\apache\apache2.2.8\bin\). Go to “Dynamic Extensions” section and copy-paste this line somewhere between extensions:
    extension=php_smtp.dll
    and save the file.

4.  Make sure to enable the extensions.

WAMP-Server-PHP-Extensions

5.  Restart WAMP server. Don’t forget this step


Step 3. Create a PHP file: Index.php

First create a php page (e.g. index.php) that will serve the purpose of user interface. In this file first place the html code as  below:

<html>
<head>
<title>PHP Send HTML Email Template</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id='main'><center><h1>PHP Send HTML Email Template</h1></center>
<div id='container' >
<h2>Send a Greeting to your closed ones....!!</h2>
<hr>
<form id="checkinput" action="index.php" method='POST'>
<div> <div id="book_container" class="card_container1" class>

<img id="img1" src='img/greet_1.jpg' style='border-radius:5px;width:190px;height:200px;' alt=''/>
<br/><br/>
<div><img class="right-icon1"id="right-icon"src="img/right.png"/><input id="rad1" type='radio' name='greet_radio' value="1"></div>
</div>

<div id="book_container" class="card_container2" >
<img id="img2" src='img/gree_2.jpg' style='border-radius:5px;width:190px;height:200px;' alt=''/>
<br/><br/>
<div><img class="right-icon2" id="right-icon"src="img/right.png"/><input id="rad2" type='radio' name='greet_radio' value="2"></div>
</div>
<div id="book_container" class="card_container3" >
<img id="img3" src='img/greet_3.jpg' style='border-radius:5px;width:190px;height:200px;' alt=''/>
<br/><br/>
<div><img class="right-icon3" id="right-icon"src="img/right.png"/><input id="rad3" type='radio' name='greet_radio' value="3"></div>
</div>
</div>
<div id="email_input">
<label><b>Enter Email:</b></label>
<input id="email" type='email' maxlength="50" name='mail_receiver'/></div>
<input type='submit' id='submit' name='send_greet' value='Send Greeting'/>
</form>
</div>
</div>
</body>
</html>

Now Append below code of PHPMailer, which handles the mailing part, to this file .

<?php

if (isset($_POST['send_greet']) && isset($_POST['greet_radio'])) {
require 'scripts/phpmailer/PHPMailerAutoload.php';

//Create a new PHPMailer instance
$mail = new PHPMailer;

//Tell PHPMailer to use SMTP
$mail->isSMTP();

//Ask for HTML-friendly debug output
$mail->Debugoutput = 'html';

//Set the hostname of the mail server
$mail->Host = 'smtp.gmail.com';
// use
// $mail->Host = gethostbyname('smtp.gmail.com');
// if your network does not support SMTP over IPv6

//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
$mail->Port = 587;

//Set the encryption system to use - ssl (deprecated) or tls
$mail->SMTPSecure = 'tls';

//Whether to use SMTP authentication
$mail->SMTPAuth = true;

//Username to use for SMTP authentication - use full email address for gmail
$mail->Username = "your user name";

//Password to use for SMTP authentication
$mail->Password = "your password";

//Whether mail body contains HTML,false is plain text
$mail->IsHTML(true);

//Set who the message is to be sent from
$mail->setFrom('sender's email', 'sender's name');

//Set who the message is to be sent to
$mail_receiver = $_POST['mail_receiver'];

//email Address of reciever,
//here php variable has been used which stores and
//provides email-id entered through form
$mail->addAddress($mail_receiver, "");

//Set the subject line
$mail->Subject = "Hi !";

//Set Body of message
if ($_POST['greet_radio'] == '1') {

$mail->Body = "                                 // First HTML template

<div style='margin-left:150px;background-image:url(https://archive.customize.org/files/old/wallpaper/files/Surreal_Red_big.jpg); padding:50px;width:600px;'>
<h1 style='color:#FFFFFF;font-family: Arial, Helvetica, sans-serif;text-align:center;line-height:2.5em;'>Diwali Wishes!</h1>
<hr>
<table>
<tr><td style='text-align:center'>
<div>
<a href=''><img src='http://webneel.com/daily/sites/default/files/images/daily/09-2013/14-diwali-greeting-card.jpg' align='left' style='width:250px;height:250px;' alt=''/></a>
<p style='color:#FFFFDD; font-family: Allura,cursive,Arial, Helvetica, sans-serif; font-size:20px'>'Have a prosperous Diwali.Hope this festival of lights,brings you every joy and happiness.May the lamps of joy,illuminate your life and fill your days with the bright sparkles of peace,mirth and good will.'</p>
</div>
</td>
</tr>
<tr>
<td><div style='float:left;'><p style='color:#FFFFFF;font-family: Arial, Helvetica, sans-serif; font-size:20px'>'May the joy, cheer, Mirth and merriment Of this divine festival Surround you forever......'</p></div></td>
</tr>
</table>
</div>";   }

if ($_POST['greet_radio'] == '2') {
$mail->Body = "                                    //Second HTML template
<div style='margin-left:150px;background-image:url(https://archive.customize.org/files/old/wallpaper/files/Surreal_Red_big.jpg); padding:50px;width:600px;'>
<h1 style='color:#FFFFFF;font-family: Arial, Helvetica, sans-serif;text-align:center;line-height:2.5em;'>Diwali Wishes!</h1>
<hr>
<table>
<tr><td style='text-align:center'>
<div>
<a href=''><img src='http://webneel.com/daily/sites/default/files/images/daily/09-2013/14-diwali-greeting-card.jpg' align='left' style='width:250px;height:250px;' alt=''/></a>
<p style='color:#FFFFDD; font-family: Allura,cursive,Arial, Helvetica, sans-serif; font-size:20px'>'Have a prosperous Diwali.Hope this festival of lights,brings you every joy and happiness.May the lamps of joy,illuminate your life and fill your days with the bright sparkles of peace,mirth and good will.'</p>
</div>
</td>
</tr>
<tr>
<td><div style='float:left;'><p style='color:#FFFFFF;font-family: Arial, Helvetica, sans-serif; font-size:20px'>'May the joy, cheer, Mirth and merriment Of this divine festival Surround you forever......'</p></div></td>
</tr>
</table>
</div>";
}
if ($_POST['greet_radio'] == '3') {
$mail->Body = "                                     //Third HTML template
<div style='margin-left:150px;background-image:url(https://wallpaperology.com/zombie/93234-Happy-Raksha-Bandhan-Hd-Photo.jpg); padding:50px;width:600px;height:572px;'>
<h1 style='color:#FFAF09;font-family: Arial, Helvetica, sans-serif;text-align:center;line-height:2.5em;'>Greetings For You!</h1>
<hr>
<table>
<tr><td>
<div>
<img src='http://www.graphics18.com/wp-content/uploads/2009/08/rakhi-greetings-3.jpg' align='right' style='width:450px;height:250px;' alt=''/>
<p style='color:#FFDDBB; font-family: Allura,cursive,Arial, Helvetica, sans-serif; font-size:20px;'><i>The time is here again. The time where brothers and sisters all across the world reunite, to celebrate their bond of love and beauty. The most sacred bond between a man and a woman. The bond of brothers and sisters. The time for celebration,</i><br/><b><span style='color:#CCCC00;'>'Happy Raksha Bandhan'</span></b></p>
</div>
</td>
</tr>
<tr>
<td><div style='float:left;'><p style='color:#FFFFFF;font-family: Arial, Helvetica, sans-serif; font-size:20px'></p></div></td>
</tr>
</table>
</div>";
}

//send the message, check for errors
if (!$mail->send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
echo '<script type="text/javascript">alert("Message has been sent");</script>';
}
}

 ?>

JQuery code : custom.js

$(document).ready(function () {

$("#checkinput" ).submit(function() {
var email = $("#email").val();
if(email==''){
alert( "Please provide an email address..... ");
return false;
}else{if($('#rad1').is(':checked') ||$('#rad2').is(':checked')||$('#rad3').is(':checked')) {/* DO NOTHING*/ }
else {alert("Please select a Greeting.....");
return false;}}
});

$("#img1").click(function () { //when click on image button
$('.card_container1').css('-webkit-transform','scale(1.08)');
$('.card_container2').css('-webkit-transform','scale(1)');
$('.card_container3').css('-webkit-transform','scale(1)');

$('.right-icon1').css('display','block');
$('.right-icon2').css('display','none');
$('.right-icon3').css('display','none');
$('input:radio[id=rad1]').prop('checked', true);
});
$("#img2").click(function () {
$('.card_container2').css('-webkit-transform','scale(1.08)');
$('.card_container1').css('-webkit-transform','scale(1)');
$('.card_container3').css('-webkit-transform','scale(1)');

$('.right-icon1').css('display','none');
$('.right-icon2').css('display','block');
$('.right-icon3').css('display','none');
$('input:radio[id=rad2]').prop('checked', true); //select radio button second
});

$("#img3").click(function () {
$('.card_container3').css('-webkit-transform','scale(1.08)');
$('.card_container1').css('-webkit-transform','scale(1)');
$('.card_container2').css('-webkit-transform','scale(1)');

$('.right-icon1').css('display','none');
$('.right-icon2').css('display','none');
$('.right-icon3').css('display','block');

$('input:radio[id=rad3]').prop('checked', true); //select radio button third

});
});

CSS code : style.css

@import url(https://fonts.googleapis.com/css?family=Raleway);

#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
#container{
width: 88%;
float: left;

border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin: 20px 40px 40px 0;}

select{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}

input[type=submit] {
width: 20%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 6px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin: 15px 1%;
float: left;
}
input[type=button] {
width: 48%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin: 15px 1%;
float: left;
}
input[type=button]:hover{
transform: scale(1.05);
}
input[type=submit]:hover{
transform: scale(1.05);
}
#profile{
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7;
}

#logout{
float:right;
padding:5px;
border:dashed 1px gray;
}

a{
text-decoration:none;
color: cornflowerblue;
}

i{
color: rgb(155, 155, 155);
}

#formget{
float:right;
}
.card_container1{

-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.card_container1:hover{

-webkit-transform: scale(1.08);
transform: scale(1.08);
cursor:pointer
}

.card_container2{

-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.card_container2:hover{

-webkit-transform: scale(1.08);
transform: scale(1.08);
cursor:pointer
}

.card_container3{

-webkit-transition: 0.4s ease;
transition: 0.4s ease;
cursor:pointer
}

.card_container3:hover{

-webkit-transform: scale(1.08);
transform: scale(1.08);
}
#book_container{
width: 190px;
height: 260px;
border: 1px dashed rgb(195, 195, 195);
float: left;
margin: 9px 24px;
padding: 20px;
box-shadow: 0px 5px 17px 1px #99A3AD, 0px 0px 40px #EEEEEE;
}
hr.type_1 {
border: 0;
height: 55px;
background-image: url(../images/type_1.png);
background-repeat: no-repeat;
margin: 10px 67px;
}
#product_img{
width: 325px;
}
img#paypal_logo {
float: right;
margin-right: 27px;
margin-top: 1%;
padding-bottom: 15px;
}
.fgrow{
margin-bottom: 15px;
}

#return {
width: 492px;
height: 350px;
float: left;
border-radius: 10px;
font-family: raleway;
border: 2px solid #ccc;
padding: 10px 40px 11px;
margin: 16PX;
}
#return h3#success {
text-align: center;
font-size: 24px;
margin-top: 50px;
color: green;
}
#return P {
margin-left: 122px;
}
#return .back_btn {
margin-top: 51px;
text-align: center;
}
#btn {
width: 100%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px 70px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 15px;

}
a{
text-decoration:none;
color: cornflowerblue;
}
#formget{
float: right;
}
#return h3#fail{
text-align: center;
font-size: 24px;
margin-top: 50px;
color: red;
}

.mrtpbt{
margin-top: 5px;
margin-bottom: 15px;
line-height: 25px;
}
#return h3#Pending{
color: #FFBC00;
text-align: center;
font-size: 24px;
margin-top: 50px;

}
.description{

border: 1px dashed rgb(195, 195, 195);
height: 150px;
margin: 10px auto;
}
.description p{
color: black;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.simplePopup {
display:none;
position:fixed;
border: 4px solid #FD703F;
background:#fff;
z-index:3;
width: 290px;
min-width: 290px;
padding: 12px;
text-align: center;
}

.simplePopupClose {
float:right;
cursor:pointer;
margin-left:10px;
margin-bottom:10px;
}
.simplePopup h3{
text-align: center;
font-family: raleway;
}
.simplePopup b{
font-size: 30px;
}
.simplePopup img{
position: relative;
background-color: #FFFFFF;
border-width: 7px;
border-style: solid;
border-color: rgb(253, 112, 63);
border-radius: 0px;
width: 100px;
}
.simplePopupBackground {
display:none;
background:#000;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
z-index:1;
}
#results {
width: 100%;
margin-top: 30px;
border: 1px solid #ccc;
table-layout: fixed;
margin-bottom: 15px;
font-family:raleway;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
.head {
font-size: 15px;
font-family: "proxima_novasemibold", sans-serif;
background: #FEFFED;
color: #1d4c55;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.head th, td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: normal;
padding: 10px 0 10px;
text-align: center;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
#email_input{
margin:50px 0 0 145px;
float:left;
}
#submit{
margin:50px 20px;
}

input[type='email']{

height:40px;
width:280px;
}

input[type=radio] {
width: 100%;
height: 1.5em;
display:none;
}

.hli {

border:2px solid blue;

}
#right-icon{

width: 35px;
height: 35px;
margin-left: 76px;
}
.right-icon1,.right-icon2,.right-icon3{

display:none;
}
label b{
margin-right: 18px;
}

Step 4. Create HTML Template:

It is the html code you want to send inside an email. Remember to use inline CSS only,since many email service provider don’t support external/internal CSS.
Place this code in your PHP file, inside the mail’s body of PHPMailer code.It will look like $mail->Body = “your HTML template”;

Now save the file and execute.

You can create your own customized HTML template for email or you can use an Email Builder Tool to create responsive email templates.


Explanation of working:

When the program executes, an interface will be displayed which contains the HTML templates to select and a form which will ask for an email address to send the element.
To determine which template is selected by the user, the value of checked radio button is also supplied with the form data.
Now on submission of the form, email-id and value of radio button will be captured by mailer code and using ‘if ($_POST[‘greet_radio’] == ‘value’) ,the selected template will be sent to provided email id.


Conclusion:

I hope that at this point you must be feeling yourself comfortable with sending HTML inside email body. You can also try  sending mail using other SMTP servers. Please comment for any query. Keep visiting our website.