Form in an email

Dear readers... HELLO BONSOIR!!! My dear Boss (for real, I'm not talking about the wonderful email Builder developed by theBadsender email agency)Mr. Jonathan Loriaux recently told me: "We should do some R&D on inserting a form in an email for a prospect". So why not take the opportunity to share with you, faithful readers, the content of this note of intent? Hm? I ask you? It's a rhetorical question.

I had been fascinated by the demonstration of a form for a large Swedish furniture brand (which I will not quote) by Cyril Gross at the 2018 Litmus Live. Now that was a slam dunk. And then a Litmus newsletter with an interactive form in the spring of 2020 also blew me away. It's time to make it a separate article, because there is very little French content on the subject.

Note: Here we will focus on a form in an email in HTML and CSS exclusively, without using AMP4email. Forms with AMP4email may be easier to set up, but it's not pure HTML code, and the evolution of AMP still leaves something to be desired in the emailing world.

How does a form work?

A form in a website requires several types of language (HTML, CSS, PHP, Javascript...). One of them, the javascript, causes deliverability problems in an email and directs your emails directly to the "Undesirable" folder. Ch'bim. It has often been said, rightly, that it was impossible to put forms in an email...

Advantages of a form directly in an email

Forms can be a powerful tool to make emails more engaging and increase conversion rates. And yes! They allow you to save a step by offering recipients to answer questions without going through a landing page. Fewer steps means a shorter path to conversion. Shortening the path to conversion" means "increasing conversion". Who says "No palace" says... "No palace"... With a form, you can for example :

Collect product reviews or comments.
Conduct surveys.
Allow your recipients to update their subscriber profile directly in the email (this would save the Preference Center step).
Integrate lead generation forms.
Personally, I met my wife through a form...
And much more...

Support.

Because that's what we're really interested in! The support of this technique on the multiple email clients, webmails, email software and applications on the market! The fear of using a form in an email lies in the support of this technique on email clients, let's face it. However, 4 of the 5 main email clients support forms in emails: Gmail, iOS Mail, Apple Mail and Yahoo! According to the site emailclientmarketshare.comThese alone account for more than 80% of openings. But it depends on your target, and their habits.

For example, Outlook's Windows desktop software uses Word as its rendering engine: it goes without saying that forms won't work or display properly in Word. But then again, I guess that's to be expected.

Mail client	Support for the form	Notes
Apple Mail	Yes	The method `GET` works as intended. The method `POST` opens a landing page with a form instead of submitting it from the email.
iPhone Mail App	Mitigated	The method `GET` works as intended. The method `POST` does not submit.
Gmail Desktop Webmail	Yes	Submits the form with a contextual alert.
Gmail (iOS)	Mitigated	Does not submit in iOS GANGA. The entry `POST` is also disabled.
Gmail Android	Mitigated	Only the method `GET` works, but opens a landing page with a form instead of submitting it from the email. With `POST`The form appears visually, but does not allow for user input.
Gmail Mobile Webmail	Yes
Outlook on Windows	No	On some versions of Outlook, the fields are transformed into text.
Windows 10 Mail	No
Outlook Mac OS	No	The form appears visually and allows the user to enter Microsoft email addresses, but does not allow submission.
Outlook.com	No	Only submits when an email is opened in its own window, rather than submitting from the inbox. When submitting, the input attributes are prefixed with `x_`which can lead to data collection problems.
Outlook iOS	Yes
Outlook Android	Mitigated	The form displays visually, but the keyboard does not appear to allow users to enter information. Users must therefore copy and paste text to be entered.
Yahoo! Desktop Webmail	Yes	Submits with a pop-up alert.
Yahoo! iOS	No	The form appears visually and allows user input, but does not allow submission.
Yahoo! Android	Mitigated	The form displays visually, but the keyboard does not seem to allow users to enter data.
AOL Desktop Webmail	Yes
AOL iOS	Mitigated	The form appears visually and allows user input, but submission is not allowed.
AOL Android	Yes
Samsung Mail App	Mitigated	The form displays visually, but the keyboard does not seem to allow users to enter information.
Thunderbird	Yes	The form is displayed correctly but a warning message is displayed.
Orange (webmail)	No
Free (webmail)	Mitigated	The form is displayed, but is not functional.
SFR (webmail)	Yes

Table of support for interactive forms in email, from the Litmus blog coupled with test results from the Campaign Monitor blog and other French articles.

As mentioned above, the technique can also induce warning messages within the email, questioning the reliability of the message or the sender. It's hot! Let's get to it in a few quick paragraphs.

Hazards

Some email clients consider forms in an email as a security risk. Some simply warn you of a potential danger, others disable them completely. Many clients (especially webmails) display a javascript warning message when submitting the form. Users always have the option to cancel the form submission. This is not a bad thing from a UX point of view, right?

Gmail Web alert: "You are submitting information to an external page. Are you sure?

"The page at [url] says: Warning! You are about to send information to someone other than [Yahoo!] If you do not want anyone outside of [Yahoo!] to have this information, click "Cancel" now. Remember: [Yahoo!] will NEVER ask you for your password in an unsolicited phone call or an unsolicited email. Please change your preferences if you do not want to see this message again.

Alert when submitting the form in an email on Yahoo!

Warning posted by Thunderbird, which acknowledges that the form may be malicious but does not remove its functionality: "Thunderbird thinks this message might be an email scam."

Windows Live Hotmail displays the form, but when it is "submitted", the page is refreshed but no data is sent...
It is also possible that your email solution does not accept forms in the HTML code, and simply deletes it. Mailchimp, at the last news, proceeds to this type of method for example (and I'm not trying to discredit any particular brand by mentioning this, I totally understand their state of mind too). Find out more before you start a project!

Technique

Ok. Now that we know all that, the support, the dangers, the points of attention, the heart of the matter: How to set up a form in an email?

1. Set up the basics

Let's keep it simple. So we'll create a with two HTML attributes: action and method.

In the attribute actionWe define the destination page to which the form data is sent.
For a form, two methods are possible to "send" information: GET and POST. As seen above in the chapter on support, the GET seems to be the best supported. Be careful, however, the method GET implies to attach the data sent in the url defined in the action. In other words, the data will be visible directly in the url. For example, the following form will lead to a url of the type " https://www.monurlperso.fr/?nom=votrenom " or " https://www.monurlperso.fr/?nom=votrenom&prenom=votreprenom ". (in the first case, only one data is sent, the name data, introduced at the end of the url by a " ? ", and in the second case, one more data is sent, the first name data, separated from the name data by a " & ")).

<form action="https://www.monurlperso.fr/" method="GET">
<!-- contenu du formulaire -->
</form>

2. Configure the form fields

Text fields

Now you need to think about what information you want to collect, and how you are going to translate it into form fields. Each field needs a label, a . This information tells the recipient what the field is for. For a field asking for the first name, for example, we will fill in the form as follows:

<form action="[exemple_url]" method="GET">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom">
</form>

Some email clients will not take into account this "linkage" between the label and theinput. Even worse, some add prefixes to the identifier. In this case, the label does not match the field anymore... Annoying isn't it ? To counter this problem, insert theinput in the labellike this:

<form action="[exemple_url]" method="GET">
<label for="prenom">Prénom : <input type="text" id="prenom"></label>
</form>

Concerning the text input fields, you will have different types of attributes type possible, depending on what information you want to obtain: <input type="text">, <input type="email">, <input type="tel">, <input type="number">, <input type="url">... I don't think it's necessary to specify the usefulness of each attribute type, their value speaks for itself, right? You can also use larger text fields, for example to leave a comment, with a <textarea>.

Choosing the right type of field allows you to validate the format of the text entered when possible, but also to allow you to modify the layout of the keyboard on your mobile phone to match the required input (e.g. numbers for the telephone number). Where the field type is supported, a basic validation is performed (usually possible via javascript. But javascript in an email is to be avoided since it implies deliverability and security problems).

On the other hand, if the validation of the format entered in each field is not possible, this can be problematic (an email field filled in with a wrong email address for example). Okay, that's for text fields. But let's say you want checkboxes or "radio buttons", how do you do that?

Check boxes and radio buttons

Values are optional for checkboxes. If you do not set any values, the checkbox will be submitted as "on" or "off". However, you can set a very specific value if the recipient clicks on the checkbox.

<form action="https://www.monurlperso.fr/" method="GET">
<label for="accord">Vous acceptez les conditions ? <input type="checkbox" id="accord" name="accord" value="ok"></label>
</form>

The destination url will then look like this if the box is checked: https://www.monurlperso.fr/?accord=ok. For radio buttons on the other hand, values are required. The attribute nameThe radio buttons specific to your question are grouped together. Think of it as a multiple choice questionnaire. In the example below, your recipient will only be able to choose one of the two choices.

<form action="[exemple_url]" method="GET">
<fieldset>
<legend>Quel est le meilleur blog d'email marketing au monde selon vous ?</legend>
<label for="blogemailmarketing01"><input type="radio" name="blogemailmarketing01" value="badsender"> Badsender</label>
<label for="blogemailmarketing02"><input type="radio" name="blogemailmarketing02" value="erreur404"> erreur404</label>
</fieldset>
</form>

And you also want to improve the rendering of radio buttons or checkboxes, and customize their appearance? Indeed, they often appear quite small, and are inaccessible to the readers. In this case, we can add a div as a result of theinput which will allow to replace the style of the radio by the style of our choice.

<form action="[exemple_url]" method="GET">
<fieldset>
<legend>Quel est le meilleur blog d'email marketing au monde selon vous ?</legend>
<label for="blogemailmarketing01">Badsender <input type="radio" name="blogemailmarketing01" value="badsender"> <div class="bouton rouge"></div></label>
<label for="blogemailmarketing02">Erreur404 <input type="radio" name="blogemailmarketing02" value="erreur404"> <div class="bouton rouge"></div></label>
</fieldset>
</form>

Replace the default style of the radio button

To change the style of the radio buttons in a form in an email, there are a few steps to follow. First, we will need to hide the default radio button using these styles:

.bouton_radio_cache{ 
display:inline-block; 
opacity:0; 
width:0; 
height:0; 
margin:0 -9999px 0 0; 
float:right; 
position:absolute;
}

You have applied the class to your radio input? Perfect. Now let's replace the focus with our own styles, adding highlights or an outline to the element the recipient is focusing on:

input:focus + .button{ 
outline: Highlight auto 2px; 
outline: -webkit-focus-ring-color auto 5px;
}

Finally, we will style our buttons, and change their style according to their state:

.button{ 
/* style */ 
} 
.button:hover, 
input:focus + .button{ 
/* style */ 
} 
input:checked + .button{ 
/* style */ 
}

Stylize the radio buttons of a form in an email — Change the style of the radio buttons in a form.

Make fields mandatory

The attribute required to make a field mandatory is completely ignored in almost all email clients, with two exceptions: Thunderbird highlights empty required fields but the form can still be submitted. Opera Mail, on the other hand, behaves like a browser and displays an error message, preventing the form from being submitted. Finally, you can also find support for different types of fields on the caniemail.com.

3. Conveying hidden information

We were saying that we wanted to send some extra data that the recipient wouldn't have to fill out, okay? For example, a name, or a user ID. You can send hidden information by using the type="hidden". For example, the following piece of code will transmit a user ID without the recipient having to fill it in (he won't even see it on the screen).

<form action="[exemple_url]" method="GET">
<input type="hidden" name="identifiant" value="XICU77S">
</form>

4. Submit the form

Ok, now we come to the end. And so we're going to offer our recipient to submit the form directly in the email. To do this, you can use a input of the type submitor to a button of the type submit. Both work very similarly, but the difference is where you put your text. For the input, you will have to fill in its text in the value. For the button on the other hand, the button text will go between the opening and closing of the tag.

<!-- bouton de soumission de type input -->
<input type="submit" value="Soumettre le formulaire" >
<!-- bouton de soumission de type button --> 
<button type="submit">Soumettre le formulaire</button>

Backup solution

What to do if your form does not work in some mail clients? Anticipate! For every interactive email, it is essential to have backups. These ensure that where the forms do not work, they are hidden and a fallback solution is displayed instead. For example, it is possible to display the interactive form in Apple Mail, Gmail (desktop web), Yahoo (desktop web) and display the fallback on Outlook and Windows Mail, and all mobile devices. Here is what the code will look like to display or not the interactive form or the backup solution in this case:

.formulaire_interactif {
    display: block !important;
    max-height: inherit !important;
    overflow: visible !important;
}
.solution_de_secours {
    display: none;
}
 
body[data-outlook-cycle] .montresuroutlook{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .cachesuroutlook{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
 
[class~="x_montresuroutlook"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_cachesuroutlook"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
 
@media only screen and (max-width: 640px) {
  .solution_de_secours {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .formulaire_interactif, 
  .formulaire_interactif p, 
  .formulaire_interactif label, 
  .formulaire_interactif input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

And here is the HTML code:

<!--[if mso | ie]>
<style>
.solution_de_secours {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->
 
 
<!-- debut FORMULAIRE_INTERACTIF -->
<!--[if (!mso)&(gte IE 10)]> <! -- -->
<div class="formulaire_interactif cachesuroutlook" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- fin FORMULAIRE_INTERACTIF -->
 
<!-- debut SOLUTION_DE_SECOURS -->
<div class="solution_de_secours montresuroutlook">
    [Insert fallback for form section here]
</div>
<!-- fin SOLUTION_DE_SECOURS -->

An example of a form in an email?

No worries, that's what we're here for folks! In the email below, from my article on Litmus certification for Email designer/developerIn the Deezer email, I've inserted a simple form with a search bar for a Deezer email. So, from the email, the recipient can type the artist he wants to listen to, and will be automatically directed to the search page with the corresponding results. Go ahead, test it!

See the Pen Litmus Certification - Email 2 - en by DEFOSSEZ (@Badsender) on CodePen.

Conclusion

For any form in an email, it is IM-PE-RA-TIVE to set up a backup solution in case the form does not work properly. We agree, setting up a form can be quite complex and the time/support ratio is not necessarily convincing... But if a client asks you to set one up, at least you will now know how to do it and you will know in detail the support of this technique.

The sites listed below offer several test results for the main mail clients on the market. If, in most cases, the form is correctly displayed, it is not necessarily functional... Finally, apart from the support, it is also necessary to ensure that the routing platform used does not remove all the tags specific to a form before sending...

Want to try interactive forms in your emails?

That's what Badsender is for, baby! We have a email design agencywe also do theHTML/CSS integration of your emailswe do R&D, we do innovation... Call us for God's sake! You won't be disappointed!

Sources

Thomas Defossez

All publications