You know how you can send HTML email?
You know how things like text areas and radio buttons are HTML elements?
Yep.
I got thinking about this after getting this email from Google:
So clearly, it can be done. Inspecting the source of the Google email, it’s nothing special. Just an HTML form like any other.
I decided to try it myself, so I made a quick PHP page to send myself an HTML email.
<?php
$to = '[email protected]';
$subject = 'HTML Form in HTML Email';
$headers = "From: [email protected]\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = '<html><body>';
$message .= '<form action="http://mysite.com/process.php" method="post" target="_blank">';
$message .= '<label>How did you like the movie <strong>Turfnuts</strong>?</label><br />';
$message .= '<input name="rating" type="radio" /> ★☆☆☆<br />';
$message .= '<input name="rating" type="radio" /> ★★☆☆<br />';
$message .= '<input name="rating" type="radio" /> ★★★☆<br />';
$message .= '<input name="rating" type="radio" /> ★★★★<br />';
$message .= '<br />';
$message .= '<label for="commentText">Leave a quick review:</label><br />';
$message .= '<textarea cols="75" name="commentText" rows="5"></textarea><br />';
$message .= '<br />';
$message .= '<input type="submit" value="Submit your review" /> </form>';
$message .= '</body></html>';
mail($to, $subject, $message, $headers);
?>
I have only tested GMail so far. GMail gives this warning when submitting the form:
It’s just a warning. It doesn’t sound too scary. But it’s not as clean as submitting a form on a regular website. There are certainly some users that will cancel and not go through with submission. Google’s own email does this as well. If you click “OK”, the form submits as you expect it would.
Identifying Sendee
Notice the Google email (or my quick test) doesn’t include fields like “Name” and “Email”. That would be silly wouldn’t it? Anyone sending an email like this already knows that information. But how do you know it when you receive the form data? One way would be to pass it along with the post data in a hidden input. Whatever system you use to generate these emails could also drop that email in the value of the input:
<input type="hidden" name="email" value="[[prefill with email]]">But that’s not particularly secure. Anyone digging around could see how you are posting that data and submit bogus posts with real email addresses. Not good. It’s probably better to post the form with secret codes that identify the user (and anything else you want to identify securely, like the product they are reviewing).
<input type="hidden" name="email" value="90d8a0f9d87a0987d098ad87fa0ds7fd">
<input type="hidden" name="product" value="0870n89f7cxz98f7e0qwd87sdf">Those gibberish values would be salted hashes that you store on your end before sending out. Then when you receive them back, you can match them up and know exactly what user and product the review is for. Now I’m no security expert, so let me know if there is a smarter way.
Support
Mark Wyner blogged about this for Campaign Monitor in 2007. Here is the support from back then:
I’d love to update this chart with more current email clients. If anyone can run a test, let me know, we’ll get started building it.
Because of that blog post on Campaign Monitor, I can only assume they allow you to send emails that include forms, but I haven’t tested it. I did try sending one from MailChimp, but it appeared that they stripped form before sending the email. According to that old article, some email clients consider emails with forms “insecure”, so it might be a play on MailChimp’s part to prevent bad experiences for users like that and increase deliverability.
If you are thinking of using this idea in practice, for a use case like presented above, you won’t be able to use a service to send the emails anyway (since you’ll need to generate, store, send those salted hashes securely).
Outlook
It looks like older versions of Outlook strip the forms functionality. So that’s a problem. Hopefully new versions don’t do that. Older versions of outlook also used Internet Explorer as the rendering engine, which means that you could use conditional tags to help:
<!--[if IE]>
<a href="http://yourwebsite.com/review.php?whatever">
Review this product
</a>
<![endif]-->
<!--[if !IE]><!-->
<form>
<!-- Actual review form -->
</form>
<!--<![endif]-->Milage on that may vary… apparently Outlook 2007 and Outlook 2010 use Microsoft Word (WTF) as the rendering engine instead of Internet Explorer. Not sure how conditional tags work in Microsoft Word (again, WTF).
Tangential Examples
For some reason, Microsoft feels using Word as the rendering engine is more secure…
I have never asked for more. Awesome :) Thanks for sharing.
And they didn’t even update it for Office 2011. Although last time I heard there was a petition. I think the guys from Newism (web design studio in Australia) build a site for a petition to Microsoft to PUT SOME standards on emails.
I haven’t tested this myself, but it looks like you can target Microsoft Word in conditional comments using “mso” instead of “ie”: http://www.campaignmonitor.com/blog/post/1774/using-conditional-comments-to-1/
We use the conditional statements in our marketing emails to provide a “search” box. The lack of standards is a total pain. -grin-
You probably want to use UTF-8 instead of ISO-8859-1, and
\nline endings instead of CRLF/\r\nto avoid issues in several mail clients.Great article. Totally agree, standards on email would be most welcomed.
I hear office Office 2011 on Mac will render emails with Webkit. Not sure if that’s true though.
Written a lot of HTML emails in the past, and it is like taking a huge step back. Everything being in HTML tables and all. The fact that in 07 MS decided to use Word as its rendering engine was amazing. As most corporate users use that as their email client, then this pretty much renders this technique useless unless there is a good fall back option (maybe a link to a web form as well). Hopefully their decision to use webkit as reported for 2011 on MAC will be continues to their next Windows versions as well. As with old versions of IE though, companies upgrade MS Office once in a blue moon.
As someone who writes about HTML email, designs and codes them; this is cool but there are factors beyond the email clients ability to rend such emails. For instance, the examples; Netflix and amazon.com, would both be established relationship accounts and thus whit listed or accepted senders. If I was to send a third party email campaign with <input> or <form> tags, the inbox deliverability of that campaign goes way down. If you want to do a poll, simply fake the star rating and use the image as your CTA/click through conversion would then take place on the landing page.
For quick an easy forms in emails, I use google doc forms via emails all the time for organizing sign-ups for local church activities. Once you send the form to yourself via an email, you can edit it inside the gmail window somewhat (no code, but you can at least edit labels and some of the formatting). It also provides a fallback for clients that don’t support the forms by providing a link to the form on a web page. I think that’s the safest fallback right now, just like mass mail services include in any type of html email blast (por exemplo, mailchimp or constant contact).
I don’t know why I typed por exemplo. I don’t speak spanish.
I’d expect Kmail and Thunderbird probably have all the capabilities of Webkit and Gecko respectively. Obviously almost everybody filters HTML. There’s still the web bug problem and the fact that it’s impossible to load external content without a big privacy issue. HTML in email = automatic confirmation of recipt. Great for spammers. Unless absolutely everything is encoded into a data URI, or some trickery with multipart MIME were implemented to send such email safely.
All I have to say is: http://pastebin.com/DNgW3LZp
More importantly, why aren’t labels being used to label the inputs correctly? The question “how did you like…” isn’t the label, the start characters are the label.
Two years ago I was trying to make a form for ordering latest products for one of my customers. I quit after a few hours. If there is no chance of making it at least barely functional for every client why even bother?
To answer the last question about Outlook 2007/2010 conditional comments, you can still use them, just use “mso gte 9” instead of “IE” (eg: <!–[if mso gte 9]><![endif]–>)
Thank you for the interesting post….A bit of a newbie here so I may be laughed of this blog post…but how do you get those star characters… ” ★★★☆” … I just copied these from your code…but how do you type them in….I work on a Windows machine….
Alt + 2605 = ★
Alt + 2606 = ☆
That’s Alt, then the plus key on the numeric keypad, then the numbers, again on the numeric keypad.
Also, & #9733; = ★ and & #9734; = ☆Without the spaces after the ampersand, of course
RE: salted hashes. Much better than average. What you want is a pair of “callback data” and HMAC of that data. Two upsides:
1. HMAC can be thought of as “the correct way to use secret salt”
2. No need to keep a hash -> email and hash -> product lookup table
My favourite reason for not placing a form in an email, illustrated using the power of step-by-step:
1. View a form-laden email in an Outlook preview pane.
2. If the form is actually visible, type something into the form’s text input field, or textarea.
3. Realise that you’ve made a typo… and, using years of experience and muscle memory, hit the Backspace key to correct it.
4. Curse with gusto and flair as Outlook instantly deletes the *entire* email from your inbox, thanks to the damnable program interpreting the Backspace keypress as a “delete this email” shortcut no matter where the cursor/focus is.
This sort of Krug-baiting usability carcrash is what makes forms in emails too risky a proposition, even now. That’s why I urge clients to use landing pages for any data collection.
I’d love to see CM do an updated all-platform test, but I’m not hopeful of the results.
Woa! Well, won’t be wasting my time on creating a subscription formmail. @Simisker-Thanks for the info.
cool chris.. :)
I totally agree with Jonathan. It might be cool thing to have but deliverability goes down. Simisker made a good point too
But thanks for sharing Chris. I’ll definitely look into this
This is one of the reasons I don’t read or write HTML emails. Just pure text… Of course sometimes I’m forced be sender, but that’s a different story….
One thing I learned in this article, was to create a mail from scratch, by concatenating strings together. I love that idea, because HTML, emails, HTTP request and response, and many other concepts are simply pure text. Creating them by hand makes you know more about them.
Thanks Chris. I liked this tutorial.
Hey Chris,
I recently did such research about HTML forms in emails for a client of ours. The bottom line is that it barely works, so it’s best to link to a form in a browser. Here’s the article (and chart) with my results:
http://www.flitehaus.com/blog/2011-06-20-can-i-include-form-email
Bummmmmer.
Chris nice and informative post !
I have a question here, a little bit off topic. I use a simple HTML template for my personal emails ! is it a good practice? Some people told me HTML email looks good only when you are marketing your campaign about some blah blah thing ! Is that so?
Ahmad, a lot of formatting that you do within an email client like Outlook or Gmail can end up rendering differently than if you code it as HTML and send it out using a service like MailChimp/Emma/Constant Contact/etc. That’s obviously overkill if all you want to do is send a casual email your friend. It really depends on how much and what type of formatting you are adding to your message.
If you’re really concerned how things are rendering on other people’s PCs then I recommend setting up test accounts on webmail services like Yahoo Mail, Hotmail, Gmail, etc. and also installing software-based clients like Outlook, Mac Mail, etc. Then send a formatted email to each of those addresses and see how things look. That’s a LOT of work for what might end up being little pay-off. And, speaking of overkill, for my HTML email customers I use Email on Acid’s testing service on the following platforms:
Web Clients (using Chrome, Firefox, IE 8 & IE9):
AOL Web
Gmail
Hotmail
Yahoo!
Mobile Devices:
Android Gmail 2.2
iPad 3.0
iPhone 3.0
Desktop Clients:
Entourage 2004
Entourage 2008
Live Mail
Lotus Notes 8
Mac Mail
Outlook 2003
Outlook 2007
Outlook 2010
And you better believe my coded emails display virtually identically across all of those.
I do a hundred or so HTML emails per year and get this request frequently (along with the ol’ “can we embed a Flash movie in an email?”). The risk of failure on either the client side or mail server side is not worth the effort you would have to put in to try and make it work in one scenario without breaking it in another. And even then your success rate would be minimal. With all the effort that goes into simply coding and testing emails to display right across 20-some-odd client scenarios I’m frankly glad it’s an unreliable feature.
But thanks for digging into it as deeply as you did. It’s why I come back to this site.
With your salted hash approach to the hidden inputs, you have to have at least an extra column in your database to store the hashes. Kind of annoying. (And as long as you’re storing these ugly strings server side, why do they need to be hashes of anything? They could just be random strings that match to users/products in a lookup table.)
A cleaner solution is to leave the email and product values in plaintext, and include a third hidden value. Call it “signature”. Make its value a hash of the email, the product, and a secret key known only to you. Then when the form is submitted, compute the hash on the submitted email, submitted product, and your secret key. If the computed sig matches the submitted sig, then you know the values came from you originally, without having to maintain special database columns full of random-looking numbers. Facebook Connect uses this method to sign the redirected URL query string parameters while doing logins on 3rd party sites. HMAC (http://en.wikipedia.org/wiki/HMAC) is a version of this approach that has been put through the academic ringer to ensure that it’s safe even from advanced attacks based on hash function collisions.
Interesting article. As a frequent HTML email coder I share the frustrations of the complete lack of standards. In principle the forms would be genius but as support is so sketchy it just doesn’t seem advantageous to do at the moment.
Simisker, love your comment. I didn’t even think of the inherent backspace issue. Sometimes the simplest things are the most intriguing. We strive to make work arounds and be super clever and then suddenly there is that”doh!” moment when you think why didn’t someone think of that. You my friend are a common sense genius. :)
While you may find it sometimes useful to have a kitchen in your car, its most certainly not.
Think of all the security and spam related issues this would cause. “Hey Buddy, this is your Bank. Were having some trouble with our data. Could you please provide your credentials again? Thanks!”
The web handles forms really great these days, so why bother with forms in emails. A email is a email. A website is a website. A kitchen is a kitchen. A car is a car.
I prefer innovative thinking to “this is this and that’s all there is to it”.
I’m sure glad companies decided to start putting things together into smartphones instead of saying “a phone is a phone, a music player is a music player, and a computer is a computer.”
I’d recommend linking to a landing page that hosts the form, for anything you’re seriously interested in collecting the data for. Alternatively, you can take the Netflix approach and track who has clicked on which link, if your email sender can track that.
There are conditional statements for outlook (which also affect hotmail) but they can cause rendering issues elsewhere (most notably forcing the html to be displayed on older Blackberries).
I received an HTML form from Amazon just this morning!
Great post… i love this html tip….
I know that Outlook uses Word to render HTML, while before they had IE do it. But from a point of view I understand why (though I disagree). A lot of users compose their e-mail in Word, long before sending it, sharing the Word doc with other users to check/correct it all. And when they’re satisfied, copy/pasta it into Outlook.
In the days that Outlook had IE rendering, the mail would suddenly look different, causing a lot of frustration in correcting the layout. That’s why MS changed back to Word again. Makes a bit of sense, even though we, developers, hate that decision.
If it was my decision I’d let Word use IE rendering too.
I haven’t tested this but i think this is such a great and informative tips which you posted here.keep sharing
this is a cool feature. it’s a shame that it’s not supported in some of the popular email clients.
wow. that is really cool for sending some good looking newsletters to our ustomers! thanks a lot for the information and the code!
Thanks for the tips, it looks like a brilliant way to utilise emails for conducting client surveys and feedback. Definitely going to give it a try
Any updated on form compatibility in the different email clients? I’d be super interested to hear.
You can use 2 way encryption to your email with salt. encrypt the email when you send it to your client then decrypt it back to get the real email when the values passes back to your server.
Hi All,
I am building an application to send a html form in email with Approve/Reject buttons.
I am able to receive the response from the user and store it in the database.
Sometimes, I am sending the email to a distribution list. Here, I am not able to find out which user has responded as I only have the hidden field containing the DL email id.
As a result, I am getting numerous responses for a DL email id in my database.
Is there any way I can capture the mail id of the user who is actually responding.
I am using gmail as my mail client.
Please suggest a solution or a workaround to achieve this.
Any help would be greatly helpful.
Thanks in advance.
We need to send a survey form inside an email. Is there any information on outlook 2010 or latest versions, if they at all support this?