Send Beautiful HTML Email using PHP

There are many situations where you will need to send Emails to convey information to users. In PHP you will find mail function which works as function takes three arguments to send mail. The mail which your sending should look good because user experience and it can be done by using HTML and CSS. Here we will make simple HTML Template and send that to user. You can download full source code by clicking on Download button. I have also created a post to create simple contact form in PHP, MySQL with javascript validation.

We will create two files to send beautiful mail to the user as follow:

1. Create index.php file which contains code of sending mail as well as simple form to enter email id as follows:

<?php
if(isset($_REQUEST['submit']))
{
$to = 'yourmailid@gmail.com';
$subject = "Beautiful HTML Email using PHP by Discussdesk";
// Get HTML contents from file
$htmlContent = file_get_contents("template.html");

// Set content-type for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// Additional headers
$headers .= 'From: discussdesk<discussdesk@gmail.com>' . "\r\n";
$headers .= 'Cc: discussdesk@gmail.com ' . "\r\n";

// Send email
if(mail($to,$subject,$htmlContent,$headers))
{
echo 'Email has sent successfully.';
}
else{

echo 'Some problem occurred, please try again.';
}
}

?>

<form method="post">
<table border="1" align="center">
<tr>
<td>Enter Your Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="Send Email"> </td>
</tr>
<table>
</form>

2. Before creating the next file you can also check autocomplete search in PHP, MySQL. Now its time to create second file template.html to make Simple or beautify HTML template as follows:

<div style="font-family:HelveticaNeue-Light,Arial,sans-serif;background-color:#eeeeee">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr>
<td>
<table align="center" width="750px" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="width:750px!important">
<tbody>
<tr>
<td>
<table width="690" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr>
<td colspan="3" height="80" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="padding:0;margin:0;font-size:0;line-height:0">
<table width="690" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="30"></td>
<td align="left" valign="middle" style="padding:0;margin:0;font-size:0;line-height:0"><a href="http://discussdesk.com//" target="_blank"><img src="http://discussdesk.com//view/assets/images/logo.png" alt="discussdesk" ></a></td>
<td width="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<table width="630" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" height="60"></td></tr><tr><td width="25"></td>
<td align="center">
<h1 style="font-family:HelveticaNeue-Light,arial,sans-serif;font-size:48px;color:#404040;line-height:48px;font-weight:bold;margin:0;padding:0">Welcome to Discussdesk Programming Blog</h1>
</td>
<td width="25"></td>
</tr>
<tr>
<td colspan="3" height="40"></td></tr><tr><td colspan="5" align="center">
<p style="color:#404040;font-size:16px;line-height:24px;font-weight:lighter;padding:0;margin:0">Hello, Technology Lover!

Welcome to DiscussDesk, A place where you can grow you web programming knowledge.

DiscussDesk.com was started on Nov, 2012 with a passion to create a platform for web programmer where they can grow their web coding knowledge. Here we are trying to share latest web programming tips, fully readymade code in various programming language with full explanation, demo and download facilities. We always improving our technique and we just share this technique to our readers that may help them. When any new web technology or new trends comes in programming fields, we are trying to showcase it to our readers.

Discuss desk (www.discussdesk.com) is a blogging website with new technology content. Here, User can read and comment the latest blog. They can give suggestion about that blog. This Blog contain wide topics from Tech News, Web Design, Social Media, Software and Tech Tutorials.</p><br>
<p style="color:#404040;font-size:16px;line-height:22px;font-weight:lighter;padding:0;margin:0">
Learn PHP, MySQL, JavaScript, jQuery, Ajax, WordPress, Drupal, CodeIgniter, CakePHP, Web Development with Discussdesk tutorials. View live demo and download scripts.</p>
</td>
</tr>
<tr>
<td colspan="4">
<div style="width:100%;text-align:center;margin:30px 0">
<table align="center" cellpadding="0" cellspacing="0" style="font-family:HelveticaNeue-Light,Arial,sans-serif;margin:0 auto;padding:0">
<tbody>
<tr>
<td align="center" style="margin:0;text-align:center"><a href="http://discussdesk.com//" style="font-size:21px;line-height:22px;text-decoration:none;color:#ffffff;font-weight:bold;border-radius:2px;background-color:#0096d3;padding:14px 40px;display:block;letter-spacing:1.2px" target="_blank">Visit website!</a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr><td colspan="3" height="30"></td></tr>
</tbody>
</table>
</td>
</tr>

<tr bgcolor="#ffffff">
<td width="30" bgcolor="#eeeeee"></td>
<td>
<table width="570" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
<tr>
<td colspan="4" align="center"><h2 style="font-size:24px">Best Tutorials on</h2></td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td width="120" align="right" valign="top"><img src="https://i.imgbox.com/qrfX6RWN.png" alt="tool" width="120" height="120"></td>
<td width="30"></td>
<td align="left" valign="middle">
<h3 style="color:#404040;font-size:18px;line-height:24px;font-weight:bold;padding:0;margin:0">Programming</h3>
<div style="line-height:5px;padding:0;margin:0">&nbsp;</div>
<div style="color:#404040;font-size:16px;line-height:22px;font-weight:lighter;padding:0;margin:0">PHP/MySQL, Frameworks (CodeIgniter, CakePHP etc.), CMS (Drupal, WordPress etc.), Ajax, jQuery, JavaScript, HTML, CSS amd many more.</div>
<div style="line-height:10px;padding:0;margin:0">&nbsp;</div>
</td>
<td width="30"></td>
</tr>
<tr>
<td colspan="5" height="40" style="padding:0;margin:0;font-size:0;line-height:0"></td>
</tr>
<tr>
<td width="120" align="right" valign="top"><img src="https://i.imgbox.com/5zbmOytI.png" alt="no fees" width="120" height="120"></td>
<td width="30"></td>
<td align="left" valign="middle">
<h3 style="color:#404040;font-size:18px;line-height:24px;font-weight:bold;padding:0;margin:0">Web Development</h3>
<div style="line-height:5px;padding:0;margin:0">&nbsp;</div>
<div style="color:#404040;font-size:16px;line-height:22px;font-weight:lighter;padding:0;margin:0">Web development makes simple.</div>
<div style="line-height:10px;padding:0;margin:0">&nbsp;</div>
</td>
<td width="30"></td>
</tr>
<tr>
<td colspan="5" height="40" style="padding:0;margin:0;font-size:0;line-height:0"></td>
</tr>
<tr>
<td width="120" align="right" valign="top"><img src="https://i.imgbox.com/AXtx1Oto.png" alt="creditibility" width="120" height="120" class="CToWUd"></td>
<td width="30"></td>
<td align="left" valign="middle">
<h3 style="color:#404040;font-size:18px;line-height:24px;font-weight:bold;padding:0;margin:0">API Implementation</h3>
<div style="line-height:5px;padding:0;margin:0">&nbsp;</div>
<div style="color:#404040;font-size:16px;line-height:22px;font-weight:lighter;padding:0;margin:0">Google, Google+, Google Map, Facebook, Twitter, LinkedIn and many more.</div>
<div style="line-height:10px;padding:0;margin:0">&nbsp;</div>
</td>
<td width="30"></td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
</tbody>
</table>
<table width="570" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h2 style="color:#404040;font-size:22px;font-weight:bold;line-height:26px;padding:0;margin:0">&nbsp;</h2>
<div style="color:#404040;font-size:16px;line-height:22px;font-weight:lighter;padding:0;margin:0">Visit Discussdesk now and access tutorials, view live demo, download scripts at free of cost. </div>
</td>
</tr>
<tr>
<td align="center">
<div style="text-align:center;width:100%;padding:40px 0">
<table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;padding:0">
<tbody>
<tr>
<td align="center" style="margin:0;text-align:center"><a href="http://discussdesk.com//" style="font-size:18px;font-family:HelveticaNeue-Light,Arial,sans-serif;line-height:22px;text-decoration:none;color:#ffffff;font-weight:bold;border-radius:2px;background-color:#00a3df;padding:14px 40px;display:block" target="_blank">Visit Now!</a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><tr><td>&nbsp;</td>
</tr></tbody></table></td>
<td width="30" bgcolor="#eeeeee"></td>
</tr>
</tbody>
</table>
<table align="center" width="750px" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="width:750px!important">
<tbody>
<tr>
<td>
<table width="630" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr><td colspan="2" height="30"></td></tr>
<tr>
<td width="360" valign="top">
<div style="color:#a3a3a3;font-size:12px;line-height:12px;padding:0;margin:0">&copy; 2015 discussesk. All rights reserved.</div>
<div style="line-height:5px;padding:0;margin:0">&nbsp;</div>
<div style="color:#a3a3a3;font-size:12px;line-height:12px;padding:0;margin:0">Made in India</div>
</td>
<td align="right" valign="top">
<span style="line-height:20px;font-size:10px"><a href="https://www.facebook.com/discussdesk" target="_blank"><img src="https://i.imgbox.com/BggPYqAh.png" alt="fb"></a>&nbsp;</span>
<span style="line-height:20px;font-size:10px"><a href="https://twitter.com/discussdeskblog" target="_blank"><img src="https://i.imgbox.com/j3NsGLak.png" alt="twit"></a>&nbsp;</span>
<span style="line-height:20px;font-size:10px"><a href="https://plus.google.com/+discussdeskworld" target="_blank"><img src="https://i.imgbox.com/wFyxXQyf.png" alt="g"></a>&nbsp;</span>
</td>
</tr>
<tr><td colspan="2" height="5"></td></tr>

</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Now Run your index.php file on the browser and enter the mail id in which you want to send mail will have the following screen as shown below. Click on the Send Mail button after that mail will be sent to entered mail id user.