Grow your CSS skills. Land your dream job.

HTML Forms in HTML Emails

Published by Chris Coyier

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:


HTML form right in an HTML email

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 = 'myself@myemail.com';

$subject = 'HTML Form in HTML Email';

$headers = "From: myself@myemail.com\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" />&nbsp;</form>';
$message .= '</body></html>';

mail($to, $subject, $message, $headers);

?>

It worked.

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:


2007 information on support for HTML forms in HTML emails

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


Amazon sends emails asking for reviews. They don't use in-email forms, but could!


2010 Netflix Email which doesn't use forms, but each ☆ is a different anchor link which goes to a URL which saves that value as your user rating.

Comments

  1. Permalink to comment#

    For some reason, Microsoft feels using Word as the rendering engine is more secure…

  2. I have never asked for more. Awesome :) Thanks for sharing.

  3. Permalink to comment#

    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.

  4. Great article. Totally agree, standards on email would be most welcomed.

  5. James
    Permalink to comment#

    I hear office Office 2011 on Mac will render emails with Webkit. Not sure if that’s true though.

  6. 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.

  7. Permalink to comment#

    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.

  8. Dan Douglas
    Permalink to comment#

    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.

  9. Permalink to comment#

    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?

  10. Jordan
    Permalink to comment#

    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]–>)

  11. 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….

    • Permalink to comment#

      Alt + 2605 = ★
      Alt + 2606 = ☆

      That’s Alt, then the plus key on the numeric keypad, then the numbers, again on the numeric keypad.

    • cnwtx
      Permalink to comment#

      Also, & #9733; = ★ and & #9734; = ☆Without the spaces after the ampersand, of course

  12. cool chris.. :)

  13. Permalink to comment#

    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

  14. Soltysh
    Permalink to comment#

    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….

  15. 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.

  16. 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.

  17. 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.

  18. Permalink to comment#

    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. :)

  19. Ulrich
    Permalink to comment#

    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.”

  20. 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).

  21. I received an HTML form from Amazon just this morning!

    Amazon Form in an Email

  22. Great post… i love this html tip….

  23. dioneo
    Permalink to comment#

    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.

  24. I haven’t tested this but i think this is such a great and informative tips which you posted here.keep sharing

  25. Permalink to comment#

    this is a cool feature. it’s a shame that it’s not supported in some of the popular email clients.

  26. Permalink to comment#

    wow. that is really cool for sending some good looking newsletters to our ustomers! thanks a lot for the information and the code!

  27. 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

  28. Any updated on form compatibility in the different email clients? I’d be super interested to hear.

  29. Permalink to comment#

    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.

  30. Justin
    Permalink to comment#

    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.

  31. Qamar
    Permalink to comment#

    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?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".