Using Forms in Email: Method or Madness?

So, the first question is: why would to want to use forms in email?

It's a good one since I personally don't believe there currently is a good reason to embed a form in an e-mail. Users will still need to submit the form to a web page, so there is really no extra convenience in terms of usability.

In addition, you now lost the ability to perform client-side validation on email forms because JavaScript and HTML5 form constraints are inconsistent.

There may be usecases where adding a form to an email is raised as an option - maybe to increase the impact of a message or to stimulate immediate user interaction (for example, to ask for a comment).

In cases like this we are not talking about something that can be solved with a simple web link.

You may have seen something like this:

The safest and simplest way to do that is to add a link to each smile with a specific variable to record the user choice.

But what about something like this one?

Obviously you can't use a unique link to save both satisfaction and comment, so, if you decide you don't want to send users to a web page, you'll need to add a form to your email.

I searched the web for information on email form compatibility, but only found a handful of (mostly old) articles on the subject:

• CSS-Tricks: HTML Forms in HTML Emails


• Campaign Monitor: Using Forms in Email

On the positive side, things have not changed very much from what they describe, but out of curiosity, I decided to run some of my own tests with a simple form on some email clients.

The Form

I built a very simple mail: it contains a sample of main form elements:

• a text input


• two radio buttons


• a checkbox


• a select


• a textarea.

For each of them I provided a default value and, in addition, the input text field had a required attribute.

I ran two test with HTML5 and XHTML 1 strict doctypes. Both versions have passed the W3C validator.

Here is the HTML5 code I used:

[code] < !DOCTYPE html>

Email form test

Text field

Radio button 1

Radio button 2

Checkbox

Select


Select option 1
Select option 2
Select option 3

Textarea

<br />More text<br />

[/code]

Here is how it appears in Chrome (mac):

The XHTML version is the same with a handful of some language-specific differences.

Checked clients

I've tried both versions of the form on these clients:

Desktop:

• Apple Mail (v.8.2)


• Thunderbird (OSX, v.31.4)


• Windows Live Mail 2012 (Windows 7)


• Outlook 2013 (Windows 7)

Mobile:

• iPad Mail (IOS 8.2)


• Gmail App on iPad


• Yahoo Mail on iPad


• Outlook for IOS


• Gmail App on Android (v.5.0.1)


• Native E-Mail App on Android 4.4.4


• Yahoo Mail on Android (v.4.8.4)


• Gmail Inbox Android (v.1.2)

Webmail:

• Gmail


• Yahoo Mail


• Outlook.com

Webmail versions have been tested using Firefox 35 on OSX.

Continue reading %Using Forms in Email: Method or Madness?%

by Massimo Cassandro via SitePoint