Free html email template | coderanks
22/04/2019 . 6 minutes, 37 seconds to read . Posted by Admin#phpcodeigniter #phpemail #htmlemail #codeigniteremail #best-practices #WEBAPI #c#
HTML emails are a special type of emails which contains HTML markup to create a customized design. HTML emails are alternatively named as Newsletters, HTML Email Templates etc.
In this article, we'll create a simple HTML template and will send it using PHP Codeigniter.
Creating A Simple HTML Email Template
We'll use the following template for the sake of this article.
<!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 name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CodeRanks</title>
<style type="text/css" rel="stylesheet" media="all">
*:not(br):not(tr):not(html) {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
box-sizing: border-box;
}
body {
width: 100% !important;
height: 100%;
margin: 0;
line-height: 1.4;
background-color: #F2F4F6;
color: #74787E;
-webkit-text-size-adjust: none;
}
p,
ul,
ol,
blockquote {
line-height: 1.4;
text-align: left;
}
a {
color: #3869D4;
}
/* Layout ------------------------------ */
.email-wrapper {
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #F2F4F6;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}
/* Masthead ----------------------- */
.email-masthead {
padding: 25px 0;
text-align: center;
}
.email-masthead_logo {
width: 94px;
}
.email-masthead_name {
font-size: 16px;
font-weight: bold;
color: #bbbfc3;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
/* Body ------------------------------ */
.email-body {
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
border-top: 1px solid #EDEFF2;
border-bottom: 1px solid #EDEFF2;
background-color: #FFFFFF;
}
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
-premailer-width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #FFFFFF;
}
.email-footer {
width: 570px;
margin: 0 auto;
padding: 0;
-premailer-width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
text-align: center;
}
.email-footer p {
color: #AEAEAE;
}
.body-action {
width: 100%;
margin: 30px auto;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}
.details td{
padding:5px;
border: 1px solid #f2f4f6;
}
.body-sub {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EDEFF2;
}
.content-cell {
padding: 35px;
}
.preheader {
display: none !important;
visibility: hidden;
mso-hide: all;
font-size: 1px;
line-height: 1px;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
/*Media Queries ------------------------------ */
@media only screen and (max-width: 600px) {
.email-body_inner,
.email-footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
/* Buttons ------------------------------ */
.button {
background-color: #3869D4;
border-top: 10px solid #3869D4;
border-right: 18px solid #3869D4;
border-bottom: 10px solid #3869D4;
border-left: 18px solid #3869D4;
display: inline-block;
color: #FFF;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
}
.button--green {
background-color: #22BC66;
border-top: 10px solid #22BC66;
border-right: 18px solid #22BC66;
border-bottom: 10px solid #22BC66;
border-left: 18px solid #22BC66;
}
h1 {
margin-top: 0;
color: #2F3133;
font-size: 19px;
font-weight: bold;
text-align: left;
}
h2 {
margin-top: 0;
color: #2F3133;
font-size: 16px;
font-weight: bold;
text-align: left;
}
h3 {
margin-top: 0;
color: #2F3133;
font-size: 14px;
font-weight: bold;
text-align: left;
}
p {
margin-top: 0;
color: #74787E;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
p.sub {
font-size: 12px;
}
p.center {
text-align: center;
}
</style>
</head>
<body>
<span class="preheader">Use this link to reset your password. The link is only valid for 24 hours.</span>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="email-masthead">
<a href="https://www.coderanks.com" class="email-masthead_name">
Coderanks
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<tr>
<td class="content-cell">
<h1>User details</h1>
<p>A new user tried to contact you from coderanks.com. Following is the details.</p>
<!-- Action -->
<table class="body-action" align="left" width="100%" cellpadding="0"
cellspacing="0">
<tr>
<td align="center">
<table class="details" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<b>Name</b>
</td>
<td>
%NAME%
</td>
</tr>
<tr>
<td>
<b>Email</b>
</td>
<td>
%EMAIL%
</td>
</tr>
<tr>
<td>
<b>Subject</b>
</td>
<td>
%SUBJECT%
</td>
</tr>
<tr>
<td>
<b>Message</b>
</td>
<td>
%MESSAGE%
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-top: 30px;">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="mailto:muhammadumer004@gmail.com" class="button button--green"
target="_blank">Reply</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
<tr>
<td class="content-cell" align="center">
<p class="sub align-center">© 2019 coderanks. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>It's a contact us form template, usually, we send this of templates when any user tries to contact from the website. Here's how it will look like.
Setting up Codeigniter to Send Email
Download and extract the CodeIgniter startup project in your server directory. We can name the project as EmailTemplateSender. Now, we need to complete the following steps to successfully send the email.
- Placing the template file in the project folder
- Creating a Controller and Action
- Sending Email
- Reading Contents of the template file.
- Replacing Data with Keys
- Sending email.
Placing the template file in the project folder
Create an HTML file(contact-us.html) that will contain the above email code. Create an assets folder in the project and create another folder called templates in that folder and place that HTML file this folder.
This is how it will look like.
Creating a Controller and Action
In the Controllers folder, create a controller named as SendMail and create an action in this controller as follows.
<?php
class SendMail extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function Send()
{
# action to send email
}
}
Sending Email
We've divided this step into following three small steps.
- Reading Contents of the template file.
- Replacing Data with Keys
- Sending email.
All these steps are implemented in Send Action as follows.
public function Send()
{
//Reading Contents of the template file
$html_mail = file_get_contents(base_url()."assets/templates/contact-us.html");
//Replacing Data with Keys
$data = array(
"name" => "John Smith",
"email" => "abc@gmail.com",
"subject" => "Contacting with Coderanks.com",
"message" => "Hey There."
);
$placeholders = array(
"%NAME%",
"%EMAIL%",
"%SUBJECT%",
"%MESSAGE%"
);
$final_mail = str_replace($placeholders, $data, $html_mail);
//Sending email from localhost or live server
$localhosts = array(
'::1',
'127.0.0.1',
'localhost'
);
$protocol = 'mail';
if (in_array($_SERVER['REMOTE_ADDR'], $localhosts)) {
$protocol = 'smtp';
}
$config = array(
'protocol' => $protocol,
'smtp_host' => 'ssl://smtp.googlemail.com',
'smtp_port' => 465,
'smtp_user' => 'Your-Email',
'smtp_pass' => 'Your-Email-Password',
'mailtype' => 'html',
'starttls' => true,
'newline' => "\r\n",
);
$this->load->library('email');
$this->email->initialize($config);
$this->email->from("From-Email");
$this->email->to("To-Email");
$this->email->subject("New user contacts");
$this->email->message($final_mail);
$flag = $this->email->send();
if($flag){
echo "Email sent";
}else{
echo "Email sending failed";
}
}This code will able to send email from localhost and live server as well. You can check the Github repository for this article.