HTML email Overview

You can also send HTML-emails with Form Processor Pro. HTML-email templates are used to send HTML-emails.

Entry in the config.php for HTML-email templates is the same as for plain text mail template.

Example:

email = ../somedir/email.txt

Structure of HTML-email template is similar to plain text template. You should only add following header:

Syntax:

Format: html

So header of the mail template will look like following:

Example:

To: recepient@somehost.com
From: sender@somehost.com
Subject: This is an email subject
Format: html

This is an email body.

Empty line should be inserted after headers. Then the email body is located.

Body of the HTML-mail is similar to HTML-page and most of the html tags can be used there, however some of tags advised not to be used in it. This may cause incorrect display of the email.

Avoid these tags in HTML email-template:

•

DOCTYPE

•	HTML tag <HTML></HTML>

•	BODY tag <BODY></BODY>

•	All Meta tags <META>

•	Head tag <HEAD></HEAD>

•	Base tag <BASE>

•	Link tag <LINK>

•	Script tag <SCRIPT></SCRIPT>

•	Title tag <TITLE></TITLE>

•	Applet tag <APPLET></APPLET>

•	Frameset tag <FRAMESET></FRAMESET>

•	Frame tag <FRAME>

•	IFrame tag <IFRAME></IFRAME>

•	Comments <!-- comments -->

Note:
It is advised to create email templates in plain-text editor. If you use some HTML editor (like Dreamweaver® or FrontPage®), make sure that it doesn't add these unwanted tags without notice.

Also there is some general advices for HTML-mail

1.	Use tables for layout. Because of the very limited support of style sheets in webmail clients, the best and safe way to layout your HTML email is to use tables.

2.	Use absolute urls for all your images and links.

Example:

<a href="http://www.example.com/products/shoes/tiger.html">Tiger</a>

3. Use simple style sheets, that means not to use absolute or relative positioning.
This is bad supported by most webmail. Don’t use external or embedded style sheets, because email programs are removing or ignoring everything between the <HEAD></HEAD>. That means the <LINK> tag won’t work if you want to define external style sheets.

Use inline stylesheets for fonts, font colors, links, background colors, etc.

Example:

<tr>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</td>

Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>

</tr>

</table>

4. Create your design with a white background color.
Most webmail and email clients use a white background color to display messages. Often webmail clients ignore or remove the <BODY> tag, which is why background colors often don’t work.

When you do use a different background color than white you could mess up your design. This could for example happen if you create your design for a red background. Images may have a red background. When viewed in a webmail client, you most likely will see a white background and images with a red background that doesn’t seamlessly integrate with the background color.

The best thing to do is to create your design with a white background color. If you must use a different background color than white, you can use a table with a 100% width and perhaps 100% height to simulate the background color:

Example:

<tr>

<tr>

<td>Lorem ipsum dolor sit amet consectetuer</td>

</tr>

</table>

</td>

</tr>

</table>

5. You have to specify the font, font color and the font size for all the text and links in every table cell.
If you don’t specify a style, then most webmail clients will use their own style sheets. This could result in displaying different fonts, font colors and sizes and could also mess up your design.

Hotmail and Yahoo display Arial as the default font if you don’t specify a font. Gmail uses Verdana. Hotmail uses a 11px
as the default font size, Yahoo uses 12px and Gmail uses 16px.

Example:

<tr>

<p><a href=”http://www.example.com/link/” style=”font-family: Verdana, font-size: 11px; color: blue”>Lorem</a>

ipsum dolor sit amet, consectetuer adipiscing elit.</p></td>

<td style=”font-family: Verdana, sans-serif; font-size: 10px; color: black”>Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>

</tr>

</table>

6. The <P> tag in Internet Explorer uses more space (margin-top and margin-bottom) than in Gecko-based browsers. This could lead to layout problems.

For example, if you’re using a table width a fixed width and height and your design is based upon these dimensions. If you have content in the table within <P> tags, than the height of the table could increase in Internet Explorer which could lead to gaps in your design.

To prevent layout problems use the <BR> tag instead of the <P> tag as it renders the same in all browsers. If you still have troubles with the layout you can also use spacers instead of the <P> and the <BR> tag.

Another problem with <P> tags is in Windows Live Hotmail. <P> tags are removed. So the safest way is to use the <BR> tag