Creating an email template
Date: 15-Jun-2010
This article describes how to create a new email template, and includes an example template to demonstrate the process.
There are two ways to create a new email template:
1. create the template offline and upload it to the Admin through the Media section;
2. edit an existing template and save it as a new template using the “save as a template” option.
If you wish to create a new template that uses the content editing WISYWIG then use the following tags in your html. When the WISYWIG editor renders the page in the Admin it will display the appropriate fields in place of the tag.
Using Replacement Tags
1. The following tags will create text fields which can then be edited through the WISYWIG format (where “X” is the number of the field). Each field must have a unique number; ensuring the numbers are sequential is helpful when editing the html code.
· [titleX]
· [textblockX]
2. The following tags will enable you to add images to the template. You need to use the same value of “X” in the html to ensure that all the information for each image is grouped together.
· [imageX]
· [captionX]
· [linkX]
· [altX]
3. In addition the following tags will act as text replacement tags with the Member database. For example, the email above will be personalised with the member’s first name from their member profile.
· [first_name]
· [last_name]
· [full_name]
· [email]
4. Add the following html tag to define the style for the hyperlinks in the template:
<!-- HREFStyle="color:#ffffff;font-size:12px;" -->
5. Add the following html tag to include an unsubscribe link in the template.
href="http://[site URL]/emailer/unsubscribe.asp">Click here</a>
6. Add the following html tag to include a link to a webpage of the personalised email.
href="http:// [site URL]/emailer/emailer_view.asp" target="_blank">click here</a>
7. Use the following tag to add specific styles to the lists in the email template:
<!-- LIST --> this can set whatever normal CSS styling you want for <UL> and <OL> lists in the content
<!-- LISTstyle="color:#000000;" -->
Example template<!-- LISTstyle="color:#000000;" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>ACF Email</title>
</head>
<body>
<!-- HREFStyle="color:#ffffff;font-size:12px;" -->
<p style="margin-bottom:0px;color:#000000;font-size:12px;">If you are having difficulty viewing this email, <a style="color:#000000;font-size:12px;" href="http://www.acfonline.org.au/emailer/emailer_view.asp" target="_blank">click here</a> to view in a web browser.</p>
<div style="width:545px;background:#ffffff;">
<div style="padding:10px 0px;"><a style="color:#729130;" href="http://www.acfonline.org.au/" target="_blank"><img src="http://www.acfonline.org.au/params/img/email/header_40years.gif" alt="Australian Conservation Foundation - 40 years of action" width="545" height="75" border="0"></a></div>
<table width="545" cellspacing="0" cellpadding="0" border="0">
<tr>
<!--begin 1st column-->
<td width="360" style="vertical-align:top;">
<div style="padding-bottom:5px;">
<div style="background:#719230;">
<div><img src="http://www.acfonline.org.au/params/img/email/module_big_top.gif" alt="" width="360" height="8"></div>
<div style="padding:0px 10px;">
<h2 style="margin:0px;color:#ffffff;font-size:18px;">Hi [first_name]!</h2>
</div>
<div><img src="http://www.acfonline.org.au/params/img/email/module_big_bottom.gif" alt="" width="360" height="8"></div>
</div>
</div>
<div style="padding-bottom:5px;">
<div style="background:#719230;">
<div><img src="http://www.acfonline.org.au/params/img/email/module_big_top.gif" alt="" width="360" height="8"></div>
<div style="padding:0px 10px 120px 10px;">
<h2 style="margin:0px;color:#ffffff;font-size:18px;">[title1]</h2>
<p style="margin:10px 0px;color:#ffffff;font-size:12px;">[textblock1]</p>
</div>
<div><img src="http://www.acfonline.org.au/params/img/email/module_big_bottom.gif" alt="" width="360" height="8"></div>
</div>
</div>
</td>
<!--end 1st column-->
<td width="5" style="vertical-align:top;"> </td>
<!--begin 2nd column-->
<td width="180" style="vertical-align:top;">
<div style="padding-bottom:5px;">
<div style="background:#B8C897;">
<div><img src="http://www.acfonline.org.au/params/img/email/module_top.gif" alt="" width="180" height="8"></div>
<div style="padding:0px 10px;">
<h2 style="margin:0px;color:#ffffff;font-size:18px;">[title2]</h2>
<p style="margin:5px 0px;"><a href="[link1]" target="_blank" style="color:#ffffff;font-size:12px;"><img src="[image1]" alt="[alt1]" width="160" height="112" border="0"></a></p>
<p style="margin:10px 0px;color:#ffffff;font-size:12px;">[textblock2]</p>
</div>
<div><img src="http://www.acfonline.org.au/params/img/email/module_bottom.gif" alt="" width="180" height="8"></div>
</div>
</div>
<div style="padding-bottom:5px;">
<div style="background:#B8C897;">
<div><img src="http://www.acfonline.org.au/params/img/email/module_top.gif" alt="" width="180" height="8"></div>
<div style="padding:0px 10px;">
<h2 style="margin:0px;color:#ffffff;font-size:18px;">[title3]</h2>
<p style="margin:10px 0px;color:#ffffff;font-size:12px;">[textblock3]</p>
</div>
<div><img src="http://www.acfonline.org.au/params/img/email/module_bottom.gif" alt="" width="180" height="8"></div>
</div>
</div>
</td>
<!--end 2nd column-->
</tr>
</table>
<div style="padding:5px 0px;">
<div style="background:#E1DED8;">
<div><img src="http://www.acfonline.org.au/params/img/email/footer_top.gif" alt="" width="545" height="8"></div>
<div style="padding:0px 10px 0px 10px;">
<p style="margin-top:0px;color:#333333;font-size:10px;">Please do not reply to this email. No replies will be answered. For all enquires please email us at <a style="color:#729130;font-size:10px;" href="mailto:acf@acfonline.org.au">acf@acfonline.org.au</a> or call toll-free on 1800 332 510.</p>
<p style="color:#333333;font-size:10px;"><a style="color:#729130;font-size:10px;" href="http://www.acfonline.org.au/utility/news.asp?news_id=512">Click here</a> to read ACF's privacy policy. <a style="color:#729130;font-size:10px;" href="http://www.acfonline.org.au/emailer/unsubscribe.asp">Click here</a> to unsubscribe from the email list.</p>
</div>
<div><img src="http://www.acfonline.org.au/params/img/email/footer_bottom.gif" alt="" width="545" height="8"></div>
</div>
</div>
</div>
</body>
</html>
