Formulaire dans un email

Che(è)r(e)s lecteurs/lectrices… BONJOUR BONSOIR!!! Mon cher Patron (pour de vrai, je ne parle pas du merveilleux email Builder développé par l’agence email Badsender), Môssieur Jonathan Loriaux donc, m’a dit tout récemment : « Il faudrait faire un peu de R&D sur l’insertion d’un formulaire dans un email pour un prospect ». Alors pourquoi ne pas en profiter pour vous partager, fidèles lecteurs et lectrices, le contenu de cette note d’intention ? Hm ? Je vous le demande ? C’est une question rhétorique.

J’avais été fasciné par la démonstration d’un formulaire pour une grande marque d’ameublement suédois (que je ne citerai pas) par Cyril Gross lors du Litmus Live de 2018. V’là comment ça claquait. Et puis une newsletter de Litmus avec un formulaire interactif au printemps 2020 m’avait aussi ébahi. Il est donc temps d’en faire un article à part entière, car finalement, il existe très peu de contenus francophones sur le sujet.

Note : Ici, nous allons nous concentrer sur un formulaire dans un email en HTML et CSS exclusivement, sans passer par l’AMP4email. Les formulaires avec AMP4email sont sans doute plus simples à mettre en place, mais il ne s’agit pas de code HTML pur, et l’évolution de l’AMP laisse encore à désirer dans le monde de l’emailing.

Un formulaire, comment ça marche ?

Un formulaire dans un site Internet demande plusieurs types de langage (HTML, CSS, PHP, Javascript…). L’un d’entre eux, le javascript, pose des soucis de délivrabilité dans un email et dirige vos emails directement dans le dossier « Indésirables ». Ch’bim. On a donc souvent dit, à juste titre, qu’il était impossible de mettre en place des formulaires dans un email…

Avantages d’un formulaire directement dans un email

Les formulaires peuvent être un outil puissant pour rendre des emails plus attrayants et augmenter le taux de conversion. Et oui ! Ils permettent de gagner une étape en proposant aux destinataires de répondre à des questions sans passer par une landing page. Qui dit « moins d’étape » dit « raccourcir le chemin vers la conversion ». Qui dit « raccourcir la chemin vers la conversion » dit « augmentation de la conversion ». Qui dit « Pas d’palais » dit… « Pas d’palais »… Avec un formulaire, vous pouvez par exemple :

Recueillir des avis sur des produits, ou récolter des commentaires.
Effectuer des sondages.
Permettre à vos destinataires de mettre à jour leur profil d’abonné directement dans l’email (on gagnerait ainsi l’étape du Preference Center).
Intégrer des formulaires de génération de leads.
Moi perso j’ai rencontré ma femme grâce à un formulaire…
Et bien plus…

Support.

Parce que c’est ça qui nous intéresse surtout, finalement ! Le support de cette technique sur les multiples clients mail, webmails, logiciels de messagerie et applications présents sur le marché ! La crainte de l’utilisation d’un formulaire dans un email réside dans le support de cette technique sur les clients de messagerie, ne nous voilons pas la face. Pourtant, 4 des 5 principaux clients de messagerie prennent en charge les formulaires dans les emails : Gmail, iOS Mail, Apple Mail et Yahoo! Mail. Selon le site emailclientmarketshare.com, ils représentent à eux seuls plus de 80% d’ouverture. Mais cela dépend de votre cible, et de leurs habitudes.

Par exemple, le logiciel Bureau sur Windows d’Outlook utilise le logiciel de traitement de texte Word comme moteur de rendu : il va sans dire que les formulaires ne pourront fonctionner ni s’afficher correctement dans Word. Mais bon, j’ai envie de dire, on s’y attendait.

Client Mail	Prise en charge du formulaire	Notes
Apple Mail	Oui	La méthode `GET` fonctionne comme prévu. La méthode `POST` ouvre une landing page avec un formulaire au lieu de le soumettre à partir de l’email.
iPhone Mail App	Mitigé	La méthode `GET` fonctionne comme prévu. La méthode `POST` ne se soumet pas.
Gmail Desktop Webmail	Oui	Soumet le formulaire avec une alerte contextuelle.
Gmail (iOS)	Mitigé	Ne se soumet pas dans iOS GANGA. L’entrée `POST` est également désactivée.
Gmail Android	Mitigé	Seul la méthode `GET` fonctionne, mais ouvre une landing page avec un formulaire au lieu de le soumettre à partir de l’email. Avec `POST`, le formulaire apparaît visuellement, mais ne permet pas de saisie par l’utilisateur.
Gmail Mobile Webmail	Oui
Outlook sur Windows	Non	Sur certaines versions d’Outlook, les champs sont transformés en texte.
Windows 10 Mail	Non
Outlook Mac OS	Non	Le formulaire apparaît visuellement et permet à l’utilisateur de saisir les adresses email Microsoft, mais ne permet pas la soumission.
Outlook.com	Non	Soumet uniquement lorsqu’un email est ouvert dans sa propre fenêtre, plutôt que de le soumettre depuis la boîte de réception. Lors de la soumission, les attributs d’entrée sont préfixés par `x_`, ce qui peut entraîner des problèmes de collecte de données.
Outlook iOS	Oui
Outlook Android	Mitigé	Le formulaire s’affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir des informations. Les utilisateurs doivent donc copier et coller du texte à saisir.
Yahoo! Desktop Webmail	Oui	Soumet avec une alerte contextuelle.
Yahoo! iOS	Non	Le formulaire apparaît visuellement et permet la saisie par l’utilisateur, mais ne permet pas la soumission.
Yahoo! Android	Mitigé	Le formulaire s’affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir de données.
AOL Desktop Webmail	Oui
AOL iOS	Mitigé	Le formulaire apparaît visuellement et permet la saisie par l’utilisateur, mais la soumission n’est pas permise.
AOL Android	Oui
Samsung Mail App	Mitigé	Le formulaire s’affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir des informations.
Thunderbird	Oui	Le formulaire s’affiche correctement mais un message d’alerte est affiché.
Orange (webmail)	Non
Free (webmail)	Mitigé	Le formulaire s’affiche, mais n’est pas fonctionnel.
SFR (webmail)	Oui

Tableau de support des formulaires interactifs dans un email, provenant du blog de Litmus couplé à des résultats de test obtenus sur le blog de Campaign Monitor et d’autres articles francophones.

Comme évoqué ci-dessus, la technique peut aussi induire des messages d’alerte au sein de l’email, mettant en doute la fiabilité du message ou de l’expéditeur. C’est chaud ! Allez zou, on aborde tout ça en quelques paragraphes rapidement.

Dangers

Des clients de messagerie considèrent les formulaires dans un email comme un risque pour la sécurité. Certains vous avertissent tout simplement d’un danger potentiel, d’autres les désactivent complètement. De nombreux clients (en particulier les webmails) affichent un message d’alerte en javascript lors de la soumission du formulaire. Les utilisateurs ont toujours la possibilité d’annuler l’envoi du formulaire. Ce n’est pas une mauvaise chose d’ailleurs sur le plan de l’UX, non ?

Alerte affichée par Gmail Web : « 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. »

Alerte lors de la soumission du formulaire dans un email sur Yahoo! Mail

Alerte affichée par Thunderbird, qui reconnaît que le formulaire peut être malveillant mais ne supprime pas ses fonctionnalités : « Thunderbird thinks this message might be an email scam. »

Avertissement de message frauduleux par email sur Thunderbird

Windows Live Hotmail affiche le formulaire, mais lorsque celui-ci est « soumis », la page est rafaichie mais aucune donnée n’est envoyée…
Il est possible aussi que votre solution d’envoi d’email n’accepte pas les formulaires dans le code HTML, et le supprime tout simplement. Mailchimp, aux dernières nouvelles, procède à ce type de méthode par exemple (et je ne cherche pas à discréditer une marque en particulier en mentionnant cela, je comprends tout à fait aussi leur état d’esprit). Renseignez-vous avant d’attaquer un projet !

Technique

Ok. Maintenant qu’on sait tout ça, le support, les dangers, les points d’attention, le vif du sujet : Comment mettre en place un formulaire dans un email ?

1. Mettre en place les bases

On va partir sur du simple. Nous allons donc créer une balise <form> avec deux attributs HTML : action et method.

Dans l’attribut action, nous définissons la page de destination vers laquelle les données du formulaire sont envoyées.
Pour un formulaire, deux méthodes sont possibles pour « envoyer » des informations : GET et POST. Comme vu plus haut sur le chapitre du support, la méthode GET semble la mieux supportée. Attention toutefois, la méthode GET implique d’attacher les données envoyées dans l’url définie dans l’attribut action. Autrement dit, les données seront donc visibles directement dans l’url. Ainsi, le formulaire suivant par exemple dirigera vers une url du type « https://www.monurlperso.fr/?nom=votrenom » ou « https://www.monurlperso.fr/?nom=votrenom&prenom=votreprenom » (dans le premier cas de figure, seule une seule donnée est envoyée, la donnée nom, introduite à la fin de l’url par un « ? », et dans le second cas de figure, une donnée est envoyée en plus, la donné prénom, séparée de la donnée nom par un « & »).

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

2. Configurer les champs de formulaire

Les champs textuels

Vous devez maintenant réfléchir aux informations que vous souhaitez collecter, et à la façon dont vous allez les traduire dans des champs de formulaire. Chaque champ nécessite une étiquette, un <label>. Cette information indique au destinataire à quoi sert ce champ. Pour un champ demandant le prénom par exemple, on va renseigner le formulaire de cette façon :

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

Certains clients de messagerie ne prendront pas en compte ce « rattachement » entre le label et l’input. Pire, certains ajoutent des préfixes à l’identifiant. Dans ce cas, le label ne correspond plus au champ… Embêtant n’est-ce pas ? Pour contrer ce problème, insérez l’input dans le label, comme ceci :

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

Concernant les champs de saisie de texte, vous aurez différents types d’attribut type possibles, selon ce que vous souhaitez obtenir comme informations : <input type="text">, <input type="email">, <input type="tel">, <input type="number">, <input type="url">… Je ne pense pas qu’il soit nécessaire de préciser l’utilité de chaque attribut type, leur valeur parle d’elle-même non ? Vous pourrez aussi faire appel à des champs texte plus « large », pour laisser un commentaire par exemple, avec un <textarea>.

Choisir le bon type de champ permet tout d’abord de faire appel à une validation du format du texte renseigné quand cela est possible, mais aussi de permettre sur mobile de modifier la disposition du clavier pour correspondre à la saisie requise (des chiffres par exemple pour le numéro de téléphone). Là où le type de champ est pris en charge, une validation de base s’effectue (possible d’habitude via du javascript. Mais le javascript dans un email est à proscrire puisqu’il implique des problèmes de délivrabilité et de sécurité).

En revanche, si la validation du format renseigné dans chaque champ n’est pas possible, cela peut s’avérer problématique (un champ email renseigné par exemple avec une adresse mail erronée). Ok ça c’est pour les champs de texte. Mais admettons, vous voulez des cases à cocher ou des « boutons radio », comment fait-on?

Les cases à cocher et boutons radio

Les valeurs sont facultatives pour les cases à cocher. SI vous ne définissez aucune valeur, la case à cocher sera soumise comme « on » ou « off ». Cependant, vous pouvez définir une valeur bien particulière si le destinataire clique sur la case à cocher.

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

L’url de destination ressemblera alors à ceci si la case est cochée : https://www.monurlperso.fr/?accord=ok. Pour les boutons radio en revanche, des valeurs sont requises. L’attribut name, quant à lui, regroupe les boutons radio propres à votre question. Voyez cela comme un questionnaire à choix multiples. Dans l’exemple ci-dessous, votre destinataire ne pourra choisir qu’un seul choix parmi les deux.

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

Et vous souhaitez aussi améliorer le rendu des boutons radio ou des cases à cocher, et personnaliser leur apparence ? En effet, ils apparaissent souvent assez petits, et sont inaccessibles pour les lecteurs. Nous pouvons, dans ce cas, ajouter une div à la suite de l’input qui va permettre de remplacer le style du bouton radio par le style de notre choix.

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

Remplacer le style par défaut du bouton radio

Pour changer le style des boutons radio dans un formulaire dans un email, il y a quelques étapes à suivre. Tout d’abord, il nous faudra masquer le bouton radio par défaut en utilisant ces styles :

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

Vous avez appliqué la class à votre input radio ? Parfait. Maintenant, remplaçons le focus par nos propres styles, en ajoutant des surbrillances ou un contour à l’élément sur lequel le destinataire se concentre :

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

Enfin, nous allons styliser nos boutons, et changer leur style selon leur état :

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

Styliser les boutons radio d'un formulaire dans un email — Changer le style des boutons radio dans un formulaire.

Rendre des champs obligatoires

L’attribut required pour rendre un champ obligatoire est complètement ignoré dans presque tous les clients de messagerie, à deux exceptions près : Thunderbird met en évidence les champs obligatoires vides mais le formulaire peut tout de même être soumis. Opera Mail, en revanche, se comporte comme un navigateur et affiche un message d’erreur, empêchant l’envoi du formulaire. Finalement, vous pourrez aussi trouver le support des différents types de champs sur le site de caniemail.com.

3. Transmettre des informations cachées

On disait qu’on voulait envoyer des données en plus que le destinataire n’aurait pas besoin de remplir, ok ? Par exemple, un nom, ou un identifiant d’utilisateur. Vous pouvez transmettre des informations cachées en utilisant l’attribut type="hidden". Par exemple, le morceau de code suivant va transmettre un ID d’utilisateur sans que le destinataire n’ai besoin de le renseigner (il ne le verra d’ailleurs même pas à l’écran).

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

4. Soumettre le formulaire

Ok, maintenant on arrive à la fin. Et on va donc proposer à notre destinataire de soumettre le formulaire directement dans l’email. Pour ce faire, vous pouvez faire appel à un input de type submit, ou à un button de type submit. Les deux fonctionnent de manière très similaire, mais la différence réside dans l’endroit où vous mettez votre texte. Pour l’input, vous devrez renseigner son texte dans l’attribut value. Pour le button en revanche, le texte du bouton ira entre l’ouverture et la fermeture de la balise.

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

Solution de secours

Que faire si votre formulaire ne fonctionne pas dans certains clients mail ? Anticiper ! Pour chaque email interactif, il est indispensable d’avoir des solutions de secours. Elles garantissent que là où les formulaires ne fonctionneront pas, ils seront masqués et qu’une solution de secours sera affichée à la place. Par exemple, il est possible d’afficher le formulaire interactif dans Apple Mail, Gmail (desktop web), Yahoo (desktop web) et d’afficher la solution de secours sur Outlook et Windows Mail, et tous les appareils mobiles. Voici alors ce à quoi ressemblera le code permettant d’afficher ou non le formulaire interactif ou la solution de secours dans ce cas de figure :

.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;
  }
}

Et voici le code HTML :

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

Les autres solutions

Si vous n’êtes pas sûr du support du formulaire dans un email (et cela peut se comprendre, car vous n’avez aucun moyen de vérifier la fiabilité des informations envoyées, ni leur format), et que vous ne souhaitez pas prendre de risque : il existe bien d’autres méthodes pour « simuler » la présence d’un formulaire :

Insérer une image d’un formulaire (ou développer un faux formulaire en HTML dans l’idéal) avec des liens permettant de diriger, au clic, vers une landing page où un vrai formulaire sera disponible. Vous pouvez même être vicieux et concevoir un champ de type text au format gif, avec un curseur clignotant… Si vous ne souhaitez pas aller si loin, vous pouvez aussi tout simplement mettre en place un Call to action qui dirigera vers un formulaire en ligne.
Partir sur des formulaires à choix multiples et insérer des liens de tracking différents selon les réponses cliquées. Vous pourrez ainsi récupérer les données du nombre de destinataire ayant cliqué sur telle ou telle réponse.

Questionnaire à choix multiple et formulaire dans un emailing — Exemple de questionnaire de satisfaction avec des liens de tracking différent selon l’emoji cliqué.

Un exemple de formulaire dans un email ?

Aucun souci, nous sommes là pour ça les amis ! Dans l’email ci-dessous, tiré de mon article sur la certification Litmus pour Email designer/developer, j’ai inséré un formulaire tout simple avec une barre de recherche pour un email Deezer. Ainsi, depuis l’email, le destinataire peut taper l’artiste qu’il souhaite écouter, et sera automatiquement dirigé vers la page de recherche avec les résultats correspondants. Vas-y, teste !

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

Conclusion

Pour tout formulaire dans un email, il est IM-PE-RA-TIF de mettre en place une solution de secours dans le cas où le formulaire ne fonctionnerait pas correctement. On est d’accord, mettre en place un formulaire peut tout de même s’avérer assez complexe et le ratio temps passé/support n’est pas forcément convaincant… Mais si un client vous demande d’en mettre un en place, au moins vous saurez maintenant comment faire et vous connaitrez en détail le support de cette technique.

Les sites référencés ci-dessous proposent plusieurs résultats de tests effectués sur les principaux clients mail présents sur le marché. Si, dans la plupart des cas, le formulaire est correctement affiché, il n’est pas forcément fonctionnel pour autant… Enfin, mis à part le support, il est aussi nécessaire de s’assurer que la plateforme de routage utilisée ne supprime pas toutes les balises propres à un formulaire avant envoi…

Vous avez envie d’essayer des formulaires interactifs dans vos emails ?

Badsender est là pour ça bébé ! On a une agence de design email, on fait aussi l’intégration HTML/CSS de vos emails, on fait de la R&D, de l’innovation… Appelez-nous bon sang ! Vous ne serez pas déçus !

Sources

Thomas Defossez

Toutes les publications