HTML Mail Format
following is our HTML format :
$message = "<html><body>";
$message .= "<table width='100%' bgcolor='#e0e0e0' cellpadding='0' cellspacing='0' border='0'>";
$message .= "<tr><td>";
$message .= "<table align='center' width='100%' border='0' cellpadding='0' cellspacing='0' style='max-width:650px; background-color:#fff; font-family:Verdana, Geneva, sans-serif;'>";
$message .= "<thead>
<tr height='80'>
<th colspan='4' style='background-color:#f5f5f5; border-bottom:solid 1px #bdbdbd; font-family:Verdana, Geneva, sans-serif; color:#333; font-size:34px;' >Coding Cage</th>
</tr>
</thead>";
$message .= "<tbody>
<tr align='center' height='50' style='font-family:Verdana, Geneva, sans-serif;'>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/PDO' style='color:#fff; text-decoration:none;'>PDO</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/jQuery' style='color:#fff; text-decoration:none;'>jQuery</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/PHP OOP' style='color:#fff; text-decoration:none;' >PHP OOP</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/MySQLi' style='color:#fff; text-decoration:none;' >MySQLi</a></td>
</tr>
<tr>
<td colspan='4' style='padding:15px;'>
<p style='font-size:20px;'>Hi' ".$full_name.",</p>
<hr />
<p style='font-size:25px;'>Sending HTML eMaile using PHPMailer</p>
<img src='https://4.bp.blogspot.com/-rt_1MYMOzTs/VrXIUlYgaqI/AAAAAAAAAaI/c0zaPtl060I/s1600/Image-Upload-Insert-Update-Delete-PHP-MySQL.png' alt='Sending HTML eMail using PHPMailer in PHP' title='Sending HTML eMail using PHPMailer in PHP' style='height:auto; width:100%; max-width:100%;' />
<p style='font-size:15px; font-family:Verdana, Geneva, sans-serif;'>".$text_message.".</p>
</td>
</tr>
<tr height='80'>
<td colspan='4' align='center' style='background-color:#f5f5f5; border-top:dashed #00a2d1 2px; font-size:24px; '>
<label>Coding Cage On :
<a href='https://facebook.com/CodingCage' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-facebook-m.png' /></a>
<a href='https://twitter.com/CodingCage' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-twitter-m.png' /></a>
<a href='https://plus.google.com/+PradeepKhodked' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-googleplus-m.png' /></a>
<a href='https://feeds.feedburner.com/cleartutorials' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-rss-m.png' /></a>
</label>
</td>
</tr>
</tbody>";
$message .= "</table>";
$message .= "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
HTML Form to Send Mail to the Receiver
here in this form i have taken two input fields, full name and email, full name and email will be displayed in above created HTML Mail Template with message and image
<form method="post" class="form-control-static">
<div class="form-group">
<input class="form-control" type="text" name="full_name" placeholder="Full Name" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="email" placeholder="Your Mail" />
</div>
<div class="form-group">
<button class="btn btn-success" type="submit" name="btn_send">
<span class="glyphicon glyphicon-envelope"></span> Send Mail
</button>
</div>
</form>
Mailer Class
include mailer class and create a new object as “$mail” and using $mail you can call all functions and methods of mailer class file
// include phpmailer class
require_once 'mailer/class.phpmailer.php';
// creates object
$mail = new PHPMailer(true);
Mail Sending Code
I have used here Gmail SMTP to send mail it will also work from localhost, create a new file as “index.php” and include required mailer class file, it is there in the downloadable file, you can get it from there, to handle mailer exception and error i have put the mail sending code within try, catch block, you can see it.
try
{
$mail->IsSMTP();
$mail->isHTML(true);
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.com";
$mail->Port = 465;
$mail->AddAddress($email);
$mail->Username ="[email protected]";
$mail->Password ="your_gmail_password";
$mail->SetFrom('[email protected]','Coding Cage');
$mail->AddReplyTo("[email protected]","Coding Cage");
$mail->Subject = $subject;
$mail->Body = $message;
$mail->AltBody = $message;
if($mail->Send())
{
$msg = "<div class='alert alert-success'>
Hi,<br /> ".$full_name." mail was successfully sent to ".$email." go and check, cheers :)
</div>";
}
}
catch(phpmailerException $ex)
{
$msg = "<div class='alert alert-warning'>".$ex->errorMessage()."</div>";
}
index.php / Complete Code
Here is our final page contains all necessary code to send mail in HTML format, configure your gmail credentials within try blocks username, and password object, you can also use your domain SMTPas well.
<?php
// include phpmailer class
require_once 'mailer/class.phpmailer.php';
// creates object
$mail = new PHPMailer(true);
if(isset($_POST['btn_send']))
{
$full_name = strip_tags($_POST['full_name']);
$email = strip_tags($_POST['email']);
$subject = "Sending HTML eMail using PHPMailer.";
$text_message = "Hello $full_name, <br /><br /> This is HTML eMail Sent using PHPMailer. isn't it cool to send HTML email rather than plain text, it helps to improve your email marketing.";
// HTML email starts here
$message = "<html><body>";
$message .= "<table width='100%' bgcolor='#e0e0e0' cellpadding='0' cellspacing='0' border='0'>";
$message .= "<tr><td>";
$message .= "<table align='center' width='100%' border='0' cellpadding='0' cellspacing='0' style='max-width:650px; background-color:#fff; font-family:Verdana, Geneva, sans-serif;'>";
$message .= "<thead>
<tr height='80'>
<th colspan='4' style='background-color:#f5f5f5; border-bottom:solid 1px #bdbdbd; font-family:Verdana, Geneva, sans-serif; color:#333; font-size:34px;' >Coding Cage</th>
</tr>
</thead>";
$message .= "<tbody>
<tr align='center' height='50' style='font-family:Verdana, Geneva, sans-serif;'>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/PDO' style='color:#fff; text-decoration:none;'>PDO</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/jQuery' style='color:#fff; text-decoration:none;'>jQuery</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/PHP OOP' style='color:#fff; text-decoration:none;' >PHP OOP</a></td>
<td style='background-color:#00a2d1; text-align:center;'><a href='https://codingcage.com/search/label/MySQLi' style='color:#fff; text-decoration:none;' >MySQLi</a></td>
</tr>
<tr>
<td colspan='4' style='padding:15px;'>
<p style='font-size:20px;'>Hi' ".$full_name.",</p>
<hr />
<p style='font-size:25px;'>Sending HTML eMail using PHPMailer</p>
<img src='https://4.bp.blogspot.com/-rt_1MYMOzTs/VrXIUlYgaqI/AAAAAAAAAaI/c0zaPtl060I/s1600/Image-Upload-Insert-Update-Delete-PHP-MySQL.png' alt='Sending HTML eMail using PHPMailer in PHP' title='Sending HTML eMail using PHPMailer in PHP' style='height:auto; width:100%; max-width:100%;' />
<p style='font-size:15px; font-family:Verdana, Geneva, sans-serif;'>".$text_message.".</p>
</td>
</tr>
<tr height='80'>
<td colspan='4' align='center' style='background-color:#f5f5f5; border-top:dashed #00a2d1 2px; font-size:24px; '>
<label>
Coding Cage On :
<a href='https://facebook.com/CodingCage' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-facebook-m.png' /></a>
<a href='https://twitter.com/CodingCage' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-twitter-m.png' /></a>
<a href='https://plus.google.com/+PradeepKhodked' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-googleplus-m.png' /></a>
<a href='https://feeds.feedburner.com/cleartutorials' target='_blank'><img style='vertical-align:middle' src='https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-rss-m.png' /></a>
</label>
</td>
</tr>
</tbody>";
$message .= "</table>";
$message .= "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
// HTML email ends here
try
{
$mail->IsSMTP();
$mail->isHTML(true);
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.com";
$mail->Port = 465;
$mail->AddAddress($email);
$mail->Username ="[email protected]";
$mail->Password ="your_gmail_password";
$mail->SetFrom('[email protected]','Coding Cage');
$mail->AddReplyTo("[email protected]","Coding Cage");
$mail->Subject = $subject;
$mail->Body = $message;
$mail->AltBody = $message;
if($mail->Send())
{
$msg = "<div class='alert alert-success'>
Hi,<br /> ".$full_name." mail was successfully sent to ".$email." go and check, cheers :)
</div>";
}
}
catch(phpmailerException $ex)
{
$msg = "<div class='alert alert-warning'>".$ex->errorMessage()."</div>";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sending HTML eMail using PHPMailer in PHP</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.codingcage.com" title='Programming Blog'>Coding Cage</a>
<a class="navbar-brand" href="https://codingcage.com/search/label/CRUD">CRUD</a>
<a class="navbar-brand" href="https://codingcage.com/search/label/PDO">PDO</a>
<a class="navbar-brand" href="https://codingcage.com/search/label/jQuery">jQuery</a>
</div>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>Send HTML eMails using PHPMailer in PHP</h1>
</div>
<div class="email-form">
<?php
if(isset($msg))
{
echo $msg;
}
?>
<form method="post" class="form-control-static">
<div class="form-group">
<input class="form-control" type="text" name="full_name" placeholder="Full Name" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="email" placeholder="Your Mail" />
</div>
<div class="form-group">
<button class="btn btn-success" type="submit" name="btn_send">
<span class="glyphicon glyphicon-envelope"></span> Send Mail
</button>
</div>
</form>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">© copyright, <a href="http://www.codingcage.com" target="_blank">www.codingcage.com</a></p>
</div>
</footer>
</body>
</html>
That’s it Here using this simple script you can send emails in HTML Format, i have used here gmail smtp you can use yours and you can also use your domain smtp details, try it in your localhost server, but make sure that you are connected to the internet