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

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

• 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 */ 
}

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.

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 un studio design, on a un studio d’intégration HTML/CSS, on fait de la R&D, de l’innovation… Appelez-nous bon sang ! Vous ne serez pas déçus !

Sources

• https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email/
• https://www.campaignmonitor.com/blog/email-marketing/how-forms-perform-in-html-emai/
• https://www.sitepoint.com/forms-in-email/
• https://css-tricks.com/html-forms-in-html-emails/
• https://www.caniemail.com/search/?s=form
• http://emailclientmarketshare.com/
• https://www.emailing.biz/gerer-ses-destinataires/integrer-formulaire-emailing
• https://happy-academy.plezi.co/fr/articles/2008147-pourquoi-inserer-un-formulaire-dans-un-email-est-une-tres-mauvaise-idee
• https://agencepenrose.com/peut-on-inserer-un-formulaire-dans-un-email-marketing/