You can also send HTML-emails with Form Processor Pro. HTML-email templates are used to send HTML-emails.
The entry in the config.php for HTML-email templates is the same as for the plain text mail template.
Example:
The structure of the HTML-email template is similar to the plain text template. You should only add the following header:
Syntax:
So the headers of the mail template will look like following:
Example:
An empty line should be inserted after the headers. Then the email body follows.
The body of the HTML-mail is similar to an HTML-page and most of the html tags can be used there, however some of tags should not be used in it. They may cause the email to display incorrectly.
Avoid these tags in an 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 -->
It is adivsable to create email templates in a plain-text editor. If you use an HTML editor (like Dreamweaver® or FrontPage®), be sure it doesn't add unwanted tags.
Also, some general advice for HTML-mail
Use tables for layout.
Because of the very limited support of style sheets in webmail clients, the best and safest way to layout your HTML email is to use tables.
Use absolute urls for all your images and links.
Example:
Use simple style sheets, that means don't use absolute or relative positioning.
Most webmail does not support such positioning. Don’t use external or embedded style sheets, because email programs remove or ignore everything between the <HEAD></HEAD> tags. 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:
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 usually don’t work. When you do use a different background color than white, you could mess up your design. This could happen, for example, if you create your design for a red background. Your images may have a red background. When viewed in a webmail client, you will most likely see a white background and images with a red background that don’t seamlessly integrate with the background color. The best thing to do is 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:
You have to specify the font, font color, and 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 than you want 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:
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 with a fixed width and height and your design is based upon these dimensions. If you have content in the table within <P> tags, then the height of your table could increase in Internet Explorer. This increase would 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.
Categories 