Originally published at: http://www.sitepoint.com/forms-in-email/
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:
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:
< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Email form test</title> </head> <body> <h1>Email form test</h1> <form id="form1" action="result_page.html" method="get"> <div style="margin-bottom:10px"> <label for="text">Text field</label><br /> <input required type="text" id="text" name="text" value="Some text"/> </div> <div style="margin-bottom:10px"> <input type="radio" id="radio1" name="radio" value="radio 1 value" checked/> <label for="radio1">Radio button 1</label><br /> <input type="radio" id="radio2" name="radio" value="radio 2 value"/> <label for="radio2">Radio button 2</label> </div> <div style="margin-bottom:10px"> <input type="checkbox" id="checkbox" name="checkbox" value="checkbox value" checked/> <label for="checkbox">Checkbox</label> </div> <div style="margin-bottom:10px"> <label for="select">Select</label><br /> <select id="select" name="select"> <option value="select option 1">Select option 1</option> <option value="select option 2" selected>Select option 2</option> <option value="select option 3">Select option 3</option> </select> </div> <div style="margin-bottom:10px"> <label for="textarea">Textarea</label><br /> <textarea cols="60" rows="5" name="textarea" id="textarea">More text</textarea> </div> <div> <button type="submit" name="Submit">Submit</button> </div> </form> </body> </html>
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.