Form in an email.

published on 17/06/2021
updated on
31/10/2023

Dear readers... HELLO BONSOIR!!! My dear Boss (for real, I don't mean the wonderful email Builder developed by Badsender)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's how it sounded. And then a Litmus newsletter with an interactive form in the spring of 2020 also blew me away. It is therefore time to make it a separate article, because finally, 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 are probably 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 "Junk" 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 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 gather feedback.
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 present 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 will not work or display correctly 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 expected. 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 expected. 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_`This can lead to problems with data collection.
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 any 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 go, we'll cover all this in a few paragraphs quickly.

Dangers.

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!

Alert 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 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!

Technical.

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.

We will start on the simple. We will create a tag 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 attribute 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 data is sent in addition, the first name data, separated from the name data by a " & ")).

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 in this way:

Firstname:

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 style tag in the head labellike this:

First name:

Concerning the text entry fields, you will have different types of attributes type possible, depending on what information you want to obtain: , , <I'm not sure what to do about it., <I'm not sure how to do that., ... I don't think it's necessary to specify the usefulness of each type attribute, their value speaks for itself, right? You can also use larger text fields, for example to leave a comment, with a </code>.</p> <p>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 cell phone to match the required input <em>(numbers for example for the phone number)</em>. Where the field type is supported, a basic validation is performed <em>(usually possible via javascript. But javascript in an email is to be avoided since it involves deliverability and security problems)</em>.</p> <p>On the other hand, if the validation of the format entered in each field is not possible, this can be problematic <em>(an email field filled in with a wrong email address, for example)</em>. Okay, that's for text fields. But let's say you want checkboxes or "radio buttons", how do you do that?</p> <h4 class="wp-block-heading" id="h-les-cases-a-cocher-et-boutons-radio">Check boxes and radio buttons.</h4> <p>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.</p> <div data-elementor-type="section" data-elementor-id="549982" class="elementor elementor-549982 elementor-location-single" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-7b800f9 e-con-full banniere_de_contact e-flex e-con e-parent" data-id="7b800f9" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="elementor-element elementor-element-af87e42 e-con-full e-flex e-con e-child" data-id="af87e42" data-element_type="container"> <div class="elementor-element elementor-element-a8af8b7 elementor-widget elementor-widget-heading" data-id="a8af8b7" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">Need help?</p> </div> </div> <div class="elementor-element elementor-element-9349a23 elementor-widget elementor-widget-text-editor" data-id="9349a23" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Reading content isn't everything. The best way is to talk to us.</p> </div> </div> </div> <div class="elementor-element elementor-element-db0b1e9 elementor-widget__width-inherit elementor-widget elementor-widget-wp-widget-forminator_widget" data-id="db0b1e9" data-element_type="widget" data-widget_type="wp-widget-forminator_widget.default"> <div class="elementor-widget-container"> <div class="forminator-ui forminator-custom-form forminator-custom-form-564970 forminator_ajax" data-forminator-render="0" data-form="forminator-module-564970" data-uid="673c61510fd79"><br/></div><form id="forminator-module-564970" class="forminator-ui forminator-custom-form forminator-custom-form-564970 forminator_ajax" method="post" data-forminator-render="0" data-form-id="564970" data-design="none" data-grid="open" style="display: none;" data-uid="673c61510fd79" action="" ><div role="alert" aria-live="polite" class="forminator-response-message forminator-error" aria-hidden="true"></div><div class="forminator-row"><div id="email-1" class="forminator-field-email forminator-col forminator-col-12"><div class="forminator-field"><input type="email" name="email-1" value="" placeholder="E-mail" id="forminator-field-email-1_673c61510fd79" class="forminator-input forminator-email--field" data-required="1" aria-required="true" /></div></div></div><div class="forminator-row forminator-hidden"><input type="hidden" id="hidden-1_673c61510fd79" name="hidden-1" value="Formulaire dans un email." /></div><input type="hidden" name="referer_url" value="" /><div class="forminator-row forminator-row-last"><div class="forminator-col"><div class="forminator-field"><button class="forminator-button forminator-button-submit">Get in touch</button></div></div></div><input type="hidden" id="forminator_nonce" name="forminator_nonce" value="ae80b60640" /><input type="hidden" name="_wp_http_referer" value="/en/2021/06/17/form-in-an-email/" /><input type="hidden" name="form_id" value="564970"><input type="hidden" name="page_id" value="77350"><input type="hidden" name="form_type" value="default"><input type="hidden" name="current_url" value="https://www.badsender.com/en/2021/06/17/form-in-an-email/"><input type="hidden" name="render_id" value="0"><input type="hidden" name="action" value="forminator_submit_form_custom-forms"><input type="hidden" name="trp-form-language" value="en"/></form> </div> </div> </div> </div> </p> <pre class="wp-block-code prettyprint"><code><label for="agreement">Do you agree to the terms? </label></code></pre> <p>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 <code>name</code>The 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.</p> <pre class="wp-block-code prettyprint"><code><fieldset> <legend>What do you think is the best email marketing blog in the world?</legend> <label for="blogemailmarketing01"> Badsender</label> <label for="blogemailmarketing02"> error404</label> </fieldset></code></pre> <p><strong>And you'd also like to <a href="https://www.badsender.com/en/2023/10/13/optimization-posting-emailing/">improve rendering</a> radio buttons or checkboxes, and customize their appearance?</strong> Indeed, they often appear quite small, and are inaccessible to the readers. In this case, we can add a <code>div</code> following the<code>input</code> which will allow to replace the style of the button <code>radio</code> by the style of our choice.</p> <pre class="wp-block-code prettyprint"><code><form action="/en/exemple_url/" method="GET" data-trp-original-action="exemple_url"> <fieldset> <legend>What is the best email marketing blog in the world in your opinion?</legend> <label for="blogemailmarketing01">Badsender <input type="radio" name="blogemailmarketing01" value="badsender"> <div class="bouton rouge"></div></label> <label for="blogemailmarketing02">Error404 <input type="radio" name="blogemailmarketing02" value="erreur404"> <div class="bouton rouge"></div></label> </fieldset> <input type="hidden" name="trp-form-language" value="en"/></form></code></pre> <h4 class="wp-block-heading" id="h-remplacer-le-style-par-defaut-du-bouton-radio">Replace the default style of the radio button.</h4> <p>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:</p> <pre class="wp-block-code prettyprint"><code>.radio_cache_button{ display:inline-block; opacity:0; width:0; height:0; margin:0 -9999px 0 0; float:right; position:absolute; }</code></pre> <p>You have applied the <code>class</code> 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:</p> <pre class="wp-block-code prettyprint"><code>input:focus + .button{ outline: Highlight auto 2px; outline: -webkit-focus-ring-color auto 5px; }</code></pre> <p>Finally, we will style our buttons, and change their style according to their state:</p> <pre class="wp-block-code prettyprint"><code>.button{ /* style */ } .button:hover, input:focus + .button{ /* style */ } input:checked + .button{ /* style */ }</code></pre> <div class="wp-block-image is-style-default"> <figure class="aligncenter size-large"><img fetchpriority="high" decoding="async" width="540" height="439" src="https://www.badsender.com/wp-content/uploads/2021/06/Frame-14.jpg" alt="Stylize the radio buttons of a form in an email" class="wp-image-84880" srcset="https://www.badsender.com/wp-content/uploads/2021/06/Frame-14.jpg 540w, https://www.badsender.com/wp-content/uploads/2021/06/Frame-14-300x244.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /><figcaption class="wp-element-caption">Change the style of the radio buttons in a form.</figcaption></figure></div> <h4 class="wp-block-heading" id="h-rendre-des-champs-obligatoires">Make fields mandatory.</h4> <p>The attribute <code>required</code> 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 <a href="https://www.caniemail.com/search/?s=form" target="_blank" rel="noreferrer noopener">caniemail.com</a>.</p> <h3 class="wp-block-heading" id="h-3-transmettre-des-informations-cachees">3. Convey hidden information.</h3> <p>We were saying that we wanted to send some extra data that the recipient wouldn't need to fill out, okay? For example, a name, or a user ID. You can send hidden information by using the <code>type="hidden"</code>. For example, the following piece of code will transmit a user ID without the recipient having to fill it in <em>(he will not even see it on the screen)</em>.</p> <pre class="wp-block-code prettyprint"><code></code></pre> <h3 class="wp-block-heading" id="h-4-soumettre-le-formulaire">4. Submit the form.</h3> <p>Ok, now we come to the end. And so we will propose to our recipient to submit the form directly in the email. To do this, you can use a <code>input</code> type <code>submit</code>or to a <code>button</code> type <code>submit</code>. <strong>Both work very similarly, but the difference is where you put your text.</strong> For the input, you will have to fill in its text in the attribute <code>value</code>. For the button on the other hand, the button text will go between the opening and closing of the tag.</p> <pre class="wp-block-code prettyprint"><code>  <button type="submit">Submit form</button></code></pre> <h2 class="wp-block-heading" id="h-solution-de-secours">Backup solution.</h2> <p><strong>What to do if your form does not work in some mail clients? Anticipate!</strong> For every interactive email, it is essential to have backups. They ensure that where the forms do not work, they will be hidden and a fallback solution will be 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 solution 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:</p> <pre class="wp-block-code prettyprint"><code>.interactive_form { display: block !important; max-height: inherit !important; overflow: visible !important; } .solution_of_rescue { 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_of_rescue { 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; } }</code></pre> <p>And here is the HTML code:</p> <pre class="wp-block-code prettyprint"><code>   <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>    <div class="solution_de_secours montresuroutlook"> [Insert fallback for form section here] </div> </code></pre> <h2 class="wp-block-heading" id="h-les-autres-solutions">The other solutions.</h2> <p>If you are not sure about the support of the form in an email <em>(and this is understandable, as you have no way of checking the reliability of the information sent, nor its format)</em>There are many other methods to "simulate" the presence of a form:</p> <ul class="wp-block-list"> <li><strong>Insert an image from a form</strong> <em>(or ideally develop a fake form in HTML)</em> with links to direct, on click, to a landing page where a real form will be available. You can even be vicious and design a <code>text</code> in gif format, with a blinking cursor... If you don't want to go that far, you can also simply set up a Call to action that will direct to an online form.</li> <li>Use multiple choice forms and insert different tracking links depending on the answers clicked. You will be able to retrieve data on the number of recipients who clicked on a particular answer. </li> </ul> <div class="wp-block-image"> <figure class="aligncenter size-large"><img decoding="async" width="640" height="264" src="https://www.badsender.com/wp-content/uploads/2021/06/SATISFACTION-CLIENT-EMOJI.jpg" alt="Multiple choice questionnaire and form in an emailing" class="wp-image-84878" srcset="https://www.badsender.com/wp-content/uploads/2021/06/SATISFACTION-CLIENT-EMOJI.jpg 640w, https://www.badsender.com/wp-content/uploads/2021/06/SATISFACTION-CLIENT-EMOJI-300x124.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption class="wp-element-caption">Example of a satisfaction questionnaire with different tracking links depending on the emoji clicked.</figcaption></figure></div> <h2 class="wp-block-heading" id="h-un-exemple-de-formulaire-dans-un-email">An example of a form in an email?</h2> <p>No worries, that's what we're here for folks! In the email below, from <a href="https://www.badsender.com/en/2020/08/28/certification-litmus-and-interaction-email/" target="_blank" rel="noreferrer noopener">my article on Litmus certification for Email designer/developer</a>In the Deezer email, I have 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!</p> <p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="Badsender" data-slug-hash="XWdRMJQ" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Litmus Certification - Email 2 - fr"> <span>See the Pen <a href="https://codepen.io/Badsender/pen/XWdRMJQ"> Litmus Certification - Email 2 - en</a> by DEFOSSEZ (<a href="https://codepen.io/Badsender">@Badsender</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <h2 class="wp-block-heading" id="h-conclusion">Conclusion.</h2> <p>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.</p> <p>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... <strong>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...</strong></p> <h2 class="wp-block-heading" id="h-vous-avez-envie-d-essayer-des-formulaires-interactifs-dans-vos-emails">Want to try interactive forms in your emails?</h2> <p><strong>Badsender is here for that, baby!</strong> We have a <a href="https://www.badsender.com/en/agency/design/design-email/" target="_blank" rel="noreferrer noopener">design studio</a>we have a <a href="https://www.badsender.com/en/agency/design/integration-html-email/" target="_blank" rel="noreferrer noopener">HTML/CSS integration studio</a>We do R&D, we do innovation... Just give us a call! You won't be disappointed!</p> <h2 class="wp-block-heading" id="h-sources">Sources</h2> <ul class="wp-block-list"> <li><a href="https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email/" target="_blank" rel="noreferrer noopener">https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email/</a></li> <li><a href="https://www.campaignmonitor.com/blog/email-marketing/how-forms-perform-in-html-emai/" target="_blank" rel="noreferrer noopener">https://www.campaignmonitor.com/blog/email-marketing/how-forms-perform-in-html-emai/</a></li> <li><a href="https://www.sitepoint.com/forms-in-email/" target="_blank" rel="noreferrer noopener">https://www.sitepoint.com/forms-in-email/</a></li> <li><a href="https://css-tricks.com/html-forms-in-html-emails/" target="_blank" rel="noreferrer noopener">https://css-tricks.com/html-forms-in-html-emails/</a></li> <li><a href="https://www.caniemail.com/search/?s=form" target="_blank" rel="noreferrer noopener">https://www.caniemail.com/search/?s=form</a></li> <li><a href="https://www.litmus.com/email-client-market-share/" target="_blank" rel="noreferrer noopener">http://emailclientmarketshare.com/</a></li> <li><a href="https://www.emailing.biz/gerer-ses-destinataires/integrer-formulaire-emailing" target="_blank" rel="noreferrer noopener">https://www.emailing.biz/gerer-ses-destinataires/integrer-formulaire-emailing</a></li> <li><a href="https://happy-academy.plezi.co/fr/articles/2008147-pourquoi-inserer-un-formulaire-dans-un-email-est-une-tres-mauvaise-idee" target="_blank" rel="noreferrer noopener">https://happy-academy.plezi.co/fr/articles/2008147-pourquoi-inserer-un-formulaire-dans-un-email-est-une-tres-mauvaise-idee</a></li> <li><a href="https://agencepenrose.com/peut-on-inserer-un-formulaire-dans-un-email-marketing/" target="_blank" rel="noreferrer noopener">https://agencepenrose.com/peut-on-inserer-un-formulaire-dans-un-email-marketing/</a></li> </ul> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer=""></script> </div> </div> <div class="elementor-element elementor-element-8815615 elementor-widget elementor-widget-shortcode" data-id="8815615" data-element_type="widget" data-widget_type="shortcode.default"> <div class="elementor-widget-container"> <style id="elementor-post-571170">.elementor-571170 .elementor-element.elementor-element-0b6e63c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:12px 48px;--background-transition:0.3s;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-571170 .elementor-element.elementor-element-0b6e63c:not(.elementor-motion-effects-element-type-background), .elementor-571170 .elementor-element.elementor-element-0b6e63c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-571170 .elementor-element.elementor-element-0b6e63c, .elementor-571170 .elementor-element.elementor-element-0b6e63c::before{--border-transition:0.3s;}.elementor-571170 .elementor-element.elementor-element-978b618 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:30px;font-weight:700;}.elementor-571170 .elementor-element.elementor-element-549bf31{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:3px 0px;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-571170 .elementor-element.elementor-element-549bf31.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-571170 .elementor-element.elementor-element-bbc4336{line-height:1.2em;}.elementor-571170 .elementor-element.elementor-element-9a93bb6 > .elementor-widget-container{margin:12px 0px 0px 0px;}.elementor-571170 .elementor-element.elementor-element-9a93bb6 .elementor-button:hover, .elementor-571170 .elementor-element.elementor-element-9a93bb6 .elementor-button:focus{color:var( --e-global-color-ab53a73 );}.elementor-571170 .elementor-element.elementor-element-9a93bb6 .elementor-button:hover svg, .elementor-571170 .elementor-element.elementor-element-9a93bb6 .elementor-button:focus svg{fill:var( --e-global-color-ab53a73 );}.elementor-571170 .elementor-element.elementor-element-9a93bb6 .elementor-button{padding:12px 24px 12px 24px;}@media(min-width:769px){.elementor-571170 .elementor-element.elementor-element-549bf31{--width:50%;}}</style> <div class="elementor-shortcode"> <div data-elementor-type="section" data-elementor-id="571170" class="elementor elementor-571170 elementor-location-single" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-0b6e63c e-flex e-con-boxed e-con e-parent" data-id="0b6e63c" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-978b618 elementor-widget elementor-widget-heading" data-id="978b618" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">Support the "Email Expiration Date" initiative</p> </div> </div> <div class="elementor-element elementor-element-549bf31 e-con-full e-flex e-con e-child" data-id="549bf31" data-element_type="container"> <div class="elementor-element elementor-element-bbc4336 elementor-widget elementor-widget-text-editor" data-id="bbc4336" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><a href="https://www.brevo.com/fr/">Brevo</a> and <a href="https://www.cofidis.fr/fr/index.html">Cofidis</a> financially support the project.</strong> Join the movement and together, let's make the email industry take responsibility for the climate emergency.</p> </div> </div> <div class="elementor-element elementor-element-9a93bb6 elementor-widget elementor-widget-button" data-id="9a93bb6" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://www.badsender.com/en/support-expiration-date-email/"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">I want to know more</span> </span> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-c9b879c e-con-full e-flex e-con e-child" data-id="c9b879c" data-element_type="container" data-settings="{"sticky":"top","sticky_on":["desktop"],"sticky_offset":120,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}"> <div class="elementor-element elementor-element-ce28c8b elementor-widget elementor-widget-text-editor" data-id="ce28c8b" data-element_type="widget" data-settings="{"enabled_visibility":"yes","dce_visibility_selected":"hide"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> Share </div> </div> <div class="elementor-element elementor-element-fa763d9 elementor-share-buttons--view-icon elementor-share-buttons--skin-minimal elementor-share-buttons--color-custom elementor-share-buttons--shape-circle elementor-grid-1 elementor-widget__width-auto elementor-grid-tablet-4 elementor-widget elementor-widget-share-buttons" data-id="fa763d9" data-element_type="widget" data-settings="{"enabled_visibility":"yes","dce_visibility_selected":"hide"}" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Partager sur facebook" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-facebook" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Partager sur twitter" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-twitter" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin" role="button" tabindex="0" aria-label="Partager sur linkedin" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-linkedin" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Partager sur email" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fas-envelope" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg> </span> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-a3ee55d e-flex e-con-boxed e-con e-parent" data-id="a3ee55d" data-element_type="container" data-settings="{"background_background":"classic","enabled_visibility":"yes","dce_visibility_selected":"hide"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-4e5af1c elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="4e5af1c" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> The author </div> </div> <div class="elementor-element elementor-element-b4908b7 elementor-author-box--link-yes elementor-widget__width-initial elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-widget elementor-widget-author-box" data-id="b4908b7" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <a href="https://www.badsender.com/en/author/tde/" class="elementor-author-box__avatar"> <img src="https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=96&d=mm&r=g" alt="Picture of Thomas Defossez" loading="lazy" data-no-translation-alt=""> </a> <div class="elementor-author-box__text"> <a href="https://www.badsender.com/en/author/tde/"> <span class="elementor-author-box__name"> Thomas Defossez </span> </a> <div class="elementor-author-box__bio"> Thomas started his career as an emailing integrator at Experian before creating his own web agency. Today, Thomas decided to focus on email in order to be a specialist in HTML integration of this medium. Since the end of 2014, Thomas has been collaborating on various projects for the Badsender.com Agency. </div> <a class="elementor-author-box__button elementor-button elementor-size-xs" href="https://www.badsender.com/en/author/tde/"> All publications </a> </div> </div> </div> </div> <div class="elementor-element elementor-element-b29a0eb elementor-widget elementor-widget-post-navigation" data-id="b29a0eb" data-element_type="widget" data-widget_type="post-navigation.default"> <div class="elementor-widget-container"> <div class="elementor-post-navigation"> <div class="elementor-post-navigation__prev elementor-post-navigation__link"> <a href="https://www.badsender.com/en/2021/06/17/bug-outlook-padding-left/" rel="prev"><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Previous</span><span class="post-navigation__prev--title">Still bugs in Outlook</span></span></a> </div> <div class="elementor-post-navigation__next elementor-post-navigation__link"> <a href="https://www.badsender.com/en/2021/06/29/live-newsletter-le-retour/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next</span><span class="post-navigation__next--title">Video : Newsletter, the return! Which content? Which model?</span></span></a> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-1c87997 e-flex e-con-boxed e-con e-parent" data-id="1c87997" data-element_type="container" data-settings="{"enabled_visibility":"yes","dce_visibility_selected":"hide"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-5142e98 elementor-widget elementor-widget-post-comments" data-id="5142e98" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <div class="elementor-widget-container"> <section id="comments" class="comments-area"> <h3 class="title-comments"> 4 réponses </h3> <ol class="comment-list"> <li id="comment-574529" class="comment even thread-even depth-1"> <article id="div-comment-574529" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/65562d861bae5ccd0ee6b4f9c7e2cec6?s=42&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/65562d861bae5ccd0ee6b4f9c7e2cec6?s=84&d=mm&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' decoding='async'/> <b class="fn">Eric</b> <span class="says">dit :</span> </div> <div class="comment-metadata"> <a href="https://www.badsender.com/en/2021/06/17/form-in-an-email/#comment-574529"><time datetime="2022-10-24T00:45:37+02:00" data-no-translation="" data-trp-gettext="">24/10/2022 à 0h45</time></a> </div> </footer> <div class="comment-content"> <p>Hello,</p> <p>I just tested your tips and scripts in outlook.<br /> Despite the "workaround" not everything is functional. The checkboxes in particular.</p> <p>In any case, thank you for this article which is already a great lead.</p> <p>Sincerely,</p> <p>Eric</p> </div> </article> </li> <li id="comment-574664" class="comment byuser comment-author-tde bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-574664" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=42&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=84&d=mm&r=g 2x' class='avatar avatar-42 photo' height='42' width='42' decoding='async'/> <b class="fn">Thomas Defossez</b> <span class="says">dit :</span> </div> <div class="comment-metadata"> <a href="https://www.badsender.com/en/2021/06/17/form-in-an-email/#comment-574664"><time datetime="2022-11-10T16:49:16+01:00" data-no-translation="" data-trp-gettext="">10/11/2022 à 16h49</time></a> </div> </footer> <div class="comment-content"> <p>Hello Eric! Concerning the forms in an email on Outlook (Office software for Windows), clearly, there is little chance that the form will be displayed correctly and work. Hence the importance of having a backup solution. But this backup solution must logically contain something other than a form (or a multiple choice questionnaire for example). The checkboxes will not be displayed correctly in Outlook because they are an element specific to forms.</p> </div> </article> </li> </ol> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title" data-no-translation="" data-trp-gettext="">Laisser un commentaire</h2><form action="https://www.badsender.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://www.badsender.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes" data-no-translation="" data-trp-gettext="">Your email address will not be published.</span> <span class="required-field-message" data-no-translation="" data-trp-gettext="">Les champs obligatoires sont indiqués avec <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Commentaire <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *


Email * 
Website 
 Save my name, email, and website in this browser for the next time I comment.
 

Δ