4. Using Forms in HTML Emails
We generally discourage the use of forms in email to prevent delivery or usability problems. However, at times you might still need to use a form in an email instead of directing readers to your Website. Consider these factors before you use a form in your next email message.
Those recipients of your email who use Hotmail or those who use Outlook 2007 will not be able to use the form because:

  • Hotmail displays the form but strips all values from your <FORM> tag and removes the name values of all form elements, rendering the form useless.
  • Hotmail recipients can complete the form, but nothing will happen when they hit the submit button so they will not know it has not been received .
  • Outlook 2007 has limitations when viewing forms in the mail client. Outlook 2007 cannot see data in a “form tag”, when a form is passed via email and viewed in Outlook 2007 as outlook strips out form elements.

Refer:

http://help.isu.edu/index.php?action=knowledgebase&catid=38&subcatid=39&docid=1058
http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/

Some email clients do not support forms that use “POST” method, which allows form data to appear within the message body. Instead you will need to replace it with the “GET” method, which will write all form content to the query string of the page to which the form is posted.
For example: <form method=”get” action=”http://…..>

Most email clients that provide a preview pane don’t allow you to tab between form elements. This means that when a recipient completes the first field in your form and clicks the TAB key, the focus is automatically shifted to another part of the software. This hinders usability and can confuse your recipient.

 

Form based mailer Format

1. Form tags needs to be defined for the section that has the form details/elements to be captured.
2. Specify relevant names for the data capture elements.
3. All the data validations should be done on the server side at the client’s end.
4. Specify the form Method as GET.
5. Define appropriate action for the form. The action should ideally take them to the page which captures and validates data on the server side at the client’s end.

Once data is validated then appropriate action needs to be taken, the process should be as follows:

– Data should be captured from the GET parameters.

– Once the data is captured, validate the data.

– If everything is fine, then it should take the user to a Thank You page hosted by the client.

– Else, it should redirect to the same or similar form page which will be hosted by the client, where all the errors should be highlighted and data should be pre-populated if needed

6. There should be no Javascript code present in the email html.

Sample code snippet

<form method=”GET” action=”http://” >

<table>

<tr>

<td>Name : <input type=”text” name=”name” value=””/></td>

</tr>

<tr>

<td>Email : <input type=”text” name=”Email” value=””/></td>

</tr>

<tr>

<td><input type=”submit” name=”submit”></td>

</tr>

</table>

</form>

 

Read earlier blogs on the same subject.

Validate HTML Content and Avoid Using Scripts – Guide to a Better HTML Email Design – Part 4


HTML Email Coding Guidelines – Guide to a Better HTML Email Design – Part 3

HTML Email Layout – Guide to a Better HTML Email Design – Part 2

Guide to a Better HTML Email Design – Part 1

Share