{"id":2183,"date":"2021-06-17T15:13:00","date_gmt":"2021-06-17T13:13:00","guid":{"rendered":"https:\/\/dev-2021.lepatron.email\/?p=2183"},"modified":"2023-03-29T12:20:25","modified_gmt":"2023-03-29T10:20:25","slug":"formulaire-dans-un-email","status":"publish","type":"post","link":"https:\/\/www.lepatron.email\/en\/form-in-an-email\/","title":{"rendered":"Form in an email"},"content":{"rendered":"\n<p>Che(\u00e8)r(e)s lecteurs\/lectrices&#8230; BONJOUR BONSOIR!!! Mon cher Patron <em>(pour de vrai, je ne parle pas du merveilleux <a href=\"https:\/\/lepatron.email\/\" target=\"_blank\" rel=\"noreferrer noopener\">email Builder<\/a> d\u00e9velopp\u00e9 par l&rsquo;<a href=\"https:\/\/www.badsender.com\/agence\/\">agence email Badsender<\/a>)<\/em>, M\u00f4ssieur Jonathan Loriaux donc, m&rsquo;a dit tout r\u00e9cemment : <em>\u00ab\u00a0Il faudrait faire un peu de R&amp;D sur l&rsquo;insertion d&rsquo;un formulaire dans un email pour un prospect\u00a0\u00bb<\/em>. Alors pourquoi ne pas en profiter pour vous partager, fid\u00e8les lecteurs et lectrices, le contenu de cette note d&rsquo;intention ? Hm ? Je vous le demande ? C&rsquo;est une question rh\u00e9torique.<\/p>\n\n\n\n<p>J&rsquo;avais \u00e9t\u00e9 fascin\u00e9 par la d\u00e9monstration d&rsquo;un formulaire pour une grande marque d&rsquo;ameublement su\u00e9dois <em>(que je ne citerai pas)<\/em> par <a href=\"https:\/\/twitter.com\/cygro\" target=\"_blank\" rel=\"noreferrer noopener\">Cyril Gross<\/a> lors du Litmus Live de 2018. V&rsquo;l\u00e0 comment \u00e7a claquait. Et puis une newsletter de Litmus avec un formulaire interactif au printemps 2020 m&rsquo;avait aussi \u00e9bahi. <strong>Il est donc temps d&rsquo;en faire un article \u00e0 part enti\u00e8re, car finalement, il existe tr\u00e8s peu de contenus francophones sur le sujet.<\/strong><\/p>\n\n\n\n<p><em>Note : Ici, nous allons nous concentrer sur un formulaire dans un email en HTML et CSS exclusivement, sans passer par l&rsquo;AMP4email. Les formulaires avec AMP4email sont sans doute plus simples \u00e0 mettre en place, mais il ne s&rsquo;agit pas de code HTML pur, et l&rsquo;\u00e9volution de l&rsquo;AMP laisse encore \u00e0 d\u00e9sirer dans le monde de l&#8217;emailing.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-un-formulaire-comment-ca-marche\">Un formulaire, comment \u00e7a marche ?<\/h2>\n\n\n\n<p>Un formulaire dans un site Internet demande plusieurs types de langage <em>(HTML, CSS, PHP, Javascript&#8230;)<\/em>. L&rsquo;un d&rsquo;entre eux, le javascript, pose des soucis de d\u00e9livrabilit\u00e9 dans un email et dirige vos emails directement dans le dossier \u00ab\u00a0Ind\u00e9sirables\u00a0\u00bb. Ch&rsquo;bim. On a donc souvent dit, \u00e0 juste titre, qu&rsquo;il \u00e9tait impossible de mettre en place des formulaires dans un email&#8230; <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-avantages-d-un-formulaire-directement-dans-un-email\">Avantages d&rsquo;un formulaire directement dans un email<\/h2>\n\n\n\n<p>Les formulaires peuvent \u00eatre un outil puissant pour rendre des emails plus attrayants et augmenter le taux de conversion. Et oui ! <strong>Ils permettent de gagner une \u00e9tape en proposant aux destinataires de r\u00e9pondre \u00e0 des questions sans passer par une landing page<\/strong>. Qui dit \u00ab\u00a0moins d&rsquo;\u00e9tape\u00a0\u00bb dit \u00ab\u00a0raccourcir le chemin vers la conversion\u00a0\u00bb. Qui dit \u00ab\u00a0raccourcir la chemin vers la conversion\u00a0\u00bb dit \u00ab\u00a0augmentation de la conversion\u00a0\u00bb. <span style=\"text-decoration:line-through\">Qui dit \u00ab\u00a0Pas d&rsquo;palais\u00a0\u00bb dit&#8230; \u00ab\u00a0Pas d&rsquo;palais\u00a0\u00bb&#8230;<\/span> Avec un formulaire, vous pouvez par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recueillir des avis sur des produits, ou r\u00e9colter des commentaires.<\/li>\n\n\n\n<li>Effectuer des sondages.<\/li>\n\n\n\n<li>Permettre \u00e0 vos destinataires de mettre \u00e0 jour leur profil d&rsquo;abonn\u00e9 directement dans l&#8217;email (on gagnerait ainsi l&rsquo;\u00e9tape du Preference Center).<\/li>\n\n\n\n<li>Int\u00e9grer des formulaires de g\u00e9n\u00e9ration de leads.<\/li>\n\n\n\n<li><span style=\"text-decoration:line-through\">Moi perso j&rsquo;ai rencontr\u00e9 ma femme gr\u00e2ce \u00e0 un formulaire&#8230;<\/span><\/li>\n\n\n\n<li>Et bien plus&#8230;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-support\">Support.<\/h2>\n\n\n\n<p>Parce que c&rsquo;est \u00e7a qui nous int\u00e9resse surtout, finalement ! Le support de cette technique sur les multiples clients mail, webmails, logiciels de messagerie et applications pr\u00e9sents sur le march\u00e9 ! La crainte de l&rsquo;utilisation d&rsquo;un formulaire dans un email r\u00e9side 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 <a href=\"http:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">emailclientmarketshare.com<\/a>, ils repr\u00e9sentent \u00e0 eux seuls plus de 80% d&rsquo;ouverture. <strong>Mais cela d\u00e9pend de votre cible, et de leurs habitudes.<\/strong><\/p>\n\n\n\n<p>Par exemple, le logiciel Bureau sur Windows d&rsquo;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&rsquo;afficher correctement dans Word. Mais bon, j&rsquo;ai envie de dire, on s&rsquo;y attendait.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Client Mail<\/strong><\/td><td><strong>Prise en charge du formulaire<\/strong><\/td><td><strong>Notes<\/strong><\/td><\/tr><tr><td>Apple Mail<\/td><td><strong>Oui<\/strong><\/td><td>La m\u00e9thode <code>GET<\/code> fonctionne comme pr\u00e9vu. La m\u00e9thode <code>POST<\/code> ouvre une landing page avec un formulaire au lieu de le soumettre \u00e0 partir de l&#8217;email.<\/td><\/tr><tr><td>iPhone Mail App<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>La m\u00e9thode <code>GET<\/code> fonctionne comme pr\u00e9vu. La m\u00e9thode <code>POST<\/code> ne se soumet pas.<\/td><\/tr><tr><td>Gmail Desktop Webmail<\/td><td><strong>Oui<\/strong><\/td><td>Soumet le formulaire avec une alerte contextuelle.<\/td><\/tr><tr><td>Gmail (iOS)<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Ne se soumet pas dans iOS GANGA. L&rsquo;entr\u00e9e <code>POST<\/code> est \u00e9galement d\u00e9sactiv\u00e9e.<\/td><\/tr><tr><td>Gmail Android<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Seul la m\u00e9thode <code>GET<\/code> fonctionne, mais ouvre une landing page avec un formulaire au lieu de le soumettre \u00e0 partir de l&#8217;email. Avec <code>POST<\/code>, le formulaire appara\u00eet visuellement, mais ne permet pas de saisie par l&rsquo;utilisateur.<\/td><\/tr><tr><td>Gmail Mobile Webmail<\/td><td><strong>Oui<\/strong><\/td><td><\/td><\/tr><tr><td>Outlook sur Windows<\/td><td><strong>Non<\/strong><\/td><td>Sur certaines versions d&rsquo;Outlook, les champs sont transform\u00e9s en texte.<\/td><\/tr><tr><td>Windows 10 Mail<\/td><td><strong>Non<\/strong><\/td><td><\/td><\/tr><tr><td>Outlook Mac OS<\/td><td><strong>Non<\/strong><\/td><td>Le formulaire appara\u00eet visuellement et permet \u00e0 l&rsquo;utilisateur de saisir les adresses email Microsoft, mais ne permet pas la soumission.<\/td><\/tr><tr><td>Outlook.com<\/td><td><strong>Non<\/strong><\/td><td>Soumet uniquement lorsqu&rsquo;un email est ouvert dans sa propre fen\u00eatre, plut\u00f4t que de le soumettre depuis la bo\u00eete de r\u00e9ception. Lors de la soumission, les attributs d&rsquo;entr\u00e9e sont pr\u00e9fix\u00e9s par <code>x_<\/code>, ce qui peut entra\u00eener des probl\u00e8mes de collecte de donn\u00e9es.<\/td><\/tr><tr><td>Outlook iOS<\/td><td><strong>Oui<\/strong><\/td><td><\/td><\/tr><tr><td>Outlook Android<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Le formulaire s&rsquo;affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir des informations. Les utilisateurs doivent donc copier et coller du texte \u00e0 saisir.<\/td><\/tr><tr><td>Yahoo! Desktop Webmail<\/td><td><strong>Oui<\/strong><\/td><td>Soumet avec une alerte contextuelle.<\/td><\/tr><tr><td>Yahoo!&nbsp;iOS<\/td><td><strong>Non<\/strong><\/td><td>Le formulaire appara\u00eet visuellement et permet la saisie par l&rsquo;utilisateur, mais ne permet pas la soumission.<\/td><\/tr><tr><td>Yahoo! Android<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Le formulaire s&rsquo;affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir de donn\u00e9es.<\/td><\/tr><tr><td>AOL Desktop Webmail<\/td><td><strong>Oui<\/strong><\/td><td><\/td><\/tr><tr><td>AOL iOS<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Le formulaire appara\u00eet visuellement et permet la saisie par l&rsquo;utilisateur, mais la soumission n&rsquo;est pas permise.<\/td><\/tr><tr><td>AOL Android<\/td><td><strong>Oui<\/strong><\/td><td><\/td><\/tr><tr><td>Samsung Mail App<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Le formulaire s&rsquo;affiche visuellement, mais le clavier ne semble pas permettre aux utilisateurs de saisir des informations.<\/td><\/tr><tr><td>Thunderbird<\/td><td><strong>Oui<\/strong><\/td><td>Le formulaire s&rsquo;affiche correctement mais un message d&rsquo;alerte est affich\u00e9.<\/td><\/tr><tr><td>Orange (webmail)<\/td><td><strong>Non<\/strong><\/td><td><\/td><\/tr><tr><td>Free (webmail)<\/td><td><strong>Mitig\u00e9<\/strong><\/td><td>Le formulaire s&rsquo;affiche, mais n&rsquo;est pas fonctionnel.<\/td><\/tr><tr><td>SFR (webmail)<\/td><td><strong>Oui<\/strong><\/td><td><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tableau de support des formulaires interactifs dans un email, provenant du blog de Litmus coupl\u00e9 \u00e0 des r\u00e9sultats de test obtenus sur le blog de Campaign Monitor et d&rsquo;autres articles francophones.<\/figcaption><\/figure>\n\n\n\n<p>Comme \u00e9voqu\u00e9 ci-dessus, la technique peut aussi induire des messages d&rsquo;alerte au sein de l&#8217;email, mettant en doute la fiabilit\u00e9 du message ou de l&rsquo;exp\u00e9diteur. C&rsquo;est chaud ! Allez zou, on aborde tout \u00e7a en quelques paragraphes rapidement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-dangers\">Dangers<\/h2>\n\n\n\n<p>Des clients de messagerie consid\u00e8rent les formulaires dans un email comme un risque pour la s\u00e9curit\u00e9. <strong>Certains vous avertissent tout simplement d&rsquo;un danger potentiel, d&rsquo;autres les d\u00e9sactivent compl\u00e8tement.<\/strong> De nombreux clients (en particulier les webmails) affichent un message d&rsquo;alerte en javascript lors de la soumission du formulaire. Les utilisateurs ont toujours la possibilit\u00e9 d&rsquo;annuler l&rsquo;envoi du formulaire. Ce n&rsquo;est pas une mauvaise chose d&rsquo;ailleurs sur le plan de l&rsquo;UX, non ?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alerte affich\u00e9e par Gmail Web : \u00ab\u00a0You are submitting information to an external page. Are you sure?\u00a0\u00bb <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.campaignmonitor.com\/wp-content\/uploads\/2007\/11\/Forms_Image1.jpg\" alt=\"Alerte JavaScript dans Safari\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u00ab\u00a0The 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 \u00ab\u00a0Cancel\u00a0\u00bb 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.\u00a0\u00bb <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.campaignmonitor.com\/wp-content\/uploads\/2007\/11\/Forms_Image2.jpg\" alt=\"Alerte lors de la soumission du formulaire dans un email sur Yahoo! Mail\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Alerte affich\u00e9e par Thunderbird, qui reconna\u00eet que le formulaire peut \u00eatre malveillant mais ne supprime pas ses fonctionnalit\u00e9s : \u00ab\u00a0Thunderbird thinks this message might be an email scam.\u00a0\u00bb <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.campaignmonitor.com\/wp-content\/uploads\/2007\/11\/Forms_Image3.jpg\" alt=\"Avertissement de message frauduleux par email sur Thunderbird\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Windows Live Hotmail affiche le formulaire, mais lorsque celui-ci est \u00ab\u00a0soumis\u00a0\u00bb, la page est rafaichie mais aucune donn\u00e9e n&rsquo;est envoy\u00e9e&#8230;<\/li>\n\n\n\n<li><strong>Il est possible aussi que votre solution d&rsquo;envoi d&#8217;email n&rsquo;accepte pas les formulaires dans le code HTML, et le supprime tout simplement.<\/strong> Mailchimp, aux derni\u00e8res nouvelles, proc\u00e8de \u00e0 ce type de m\u00e9thode par exemple <em>(et je ne cherche pas \u00e0 discr\u00e9diter une marque en particulier en mentionnant cela, je comprends tout \u00e0 fait aussi leur \u00e9tat d&rsquo;esprit)<\/em>. Renseignez-vous avant d&rsquo;attaquer un projet !<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-technique\">Technique<\/h2>\n\n\n\n<p>Ok. Maintenant qu&rsquo;on sait tout \u00e7a, le support, les dangers, les points d&rsquo;attention, le vif du sujet : Comment mettre en place un formulaire dans un email ?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-mettre-en-place-les-bases\">1. Mettre en place les bases<\/h3>\n\n\n\n<p>On va partir sur du simple. Nous allons donc cr\u00e9er une balise <code>&lt;form&gt;<\/code> avec deux attributs HTML : <code>action<\/code> et <code>method<\/code>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans l&rsquo;attribut <code>action<\/code>, nous d\u00e9finissons la page de destination vers laquelle les donn\u00e9es du formulaire sont envoy\u00e9es.<\/li>\n\n\n\n<li>Pour un formulaire, deux m\u00e9thodes sont possibles pour \u00ab\u00a0envoyer\u00a0\u00bb des informations : <code>GET<\/code> et <code>POST<\/code>. Comme vu plus haut sur le chapitre du support, la m\u00e9thode <code>GET<\/code> semble la mieux support\u00e9e. <strong>Attention toutefois, la m\u00e9thode <code>GET<\/code> implique d&rsquo;attacher les donn\u00e9es envoy\u00e9es dans l&rsquo;url d\u00e9finie dans l&rsquo;attribut <code>action<\/code>.<\/strong> Autrement dit, les donn\u00e9es seront donc visibles directement dans l&rsquo;url. Ainsi, le formulaire suivant par exemple dirigera vers une url du type \u00ab\u00a0https:\/\/www.monurlperso.fr\/?nom=votrenom\u00a0\u00bb ou \u00ab\u00a0https:\/\/www.monurlperso.fr\/?nom=votrenom&amp;prenom=votreprenom\u00a0\u00bb <em>(dans le premier cas de figure, seule une seule donn\u00e9e est envoy\u00e9e, la donn\u00e9e nom, introduite \u00e0 la fin de l&rsquo;url par un \u00ab\u00a0?\u00a0\u00bb, et dans le second cas de figure, une donn\u00e9e est envoy\u00e9e en plus, la donn\u00e9 pr\u00e9nom, s\u00e9par\u00e9e de la donn\u00e9e nom par un \u00ab\u00a0&amp;\u00a0\u00bb<\/em>).<\/li>\n<\/ul>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code>&lt;form action=\"https:\/\/www.monurlperso.fr\/\" method=\"GET\"&gt;\n&lt;!-- contenu du formulaire --&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-configurer-les-champs-de-formulaire\">2. Configurer les champs de formulaire<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-les-champs-textuels\">Les champs textuels<\/h4>\n\n\n\n<p>Vous devez maintenant r\u00e9fl\u00e9chir aux informations que vous souhaitez collecter, et \u00e0 la fa\u00e7on dont vous allez les traduire dans des champs de formulaire. Chaque champ n\u00e9cessite une \u00e9tiquette, un <code>&lt;label&gt;<\/code>. Cette information indique au destinataire \u00e0 quoi sert ce champ. Pour un champ demandant le pr\u00e9nom par exemple, on va renseigner le formulaire de cette fa\u00e7on :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code>&lt;form action=\"&#91;exemple_url]\" method=\"GET\"&gt;\n&lt;label for=\"prenom\"&gt;Pr\u00e9nom :&lt;\/label&gt;\n&lt;input type=\"text\" id=\"prenom\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Certains clients de messagerie ne prendront pas en compte ce \u00ab\u00a0rattachement\u00a0\u00bb entre le <code data-no-translation=\"\">label<\/code> et l&rsquo;<code>input<\/code>. Pire, certains ajoutent des pr\u00e9fixes \u00e0 l&rsquo;identifiant. Dans ce cas, le <code data-no-translation=\"\">label<\/code> ne correspond plus au champ&#8230; Emb\u00eatant n&rsquo;est-ce pas ? Pour contrer ce probl\u00e8me, ins\u00e9rez l&rsquo;<code data-no-translation=\"\">input<\/code> dans le <code data-no-translation=\"\">label<\/code>, comme ceci :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;form action=\"&#91;exemple_url]\" method=\"GET\"&gt;\n&lt;label for=\"prenom\"&gt;Pr\u00e9nom : &lt;input type=\"text\" id=\"prenom\"&gt;&lt;\/label&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p><strong>Concernant les champs de saisie de texte, vous aurez diff\u00e9rents types d&rsquo;attribut <code data-no-translation=\"\">type<\/code> possibles, selon ce que vous souhaitez obtenir comme informations :<\/strong> <code data-no-translation=\"\">&lt;input type=\"text\"&gt;<\/code>, <code data-no-translation=\"\">&lt;input type=\"email\"&gt;<\/code>, <code data-no-translation=\"\">&lt;input type=\"tel\"&gt;<\/code>, <code data-no-translation=\"\">&lt;input type=\"number\"&gt;<\/code>, <code data-no-translation=\"\">&lt;input type=\"url\"&gt;<\/code>&#8230; Je ne pense pas qu&rsquo;il soit n\u00e9cessaire de pr\u00e9ciser l&rsquo;utilit\u00e9 de chaque attribut type, leur valeur parle d&rsquo;elle-m\u00eame non ? Vous pourrez aussi faire appel \u00e0 des champs texte plus \u00ab\u00a0large\u00a0\u00bb, pour laisser un commentaire par exemple, avec un <code data-no-translation=\"\">&lt;textarea&gt;<\/code>.<\/p>\n\n\n\n<p>Choisir le bon type de champ permet tout d&rsquo;abord de faire appel \u00e0 une validation du format du texte renseign\u00e9 quand cela est possible, mais aussi de permettre sur mobile de modifier la disposition du clavier pour correspondre \u00e0 la saisie requise <em>(des chiffres par exemple pour le num\u00e9ro de t\u00e9l\u00e9phone)<\/em>. L\u00e0 o\u00f9 le type de champ est pris en charge, une validation de base s&rsquo;effectue <em>(possible d&rsquo;habitude via du javascript. Mais le javascript dans un email est \u00e0 proscrire puisqu&rsquo;il implique des probl\u00e8mes de d\u00e9livrabilit\u00e9 et de s\u00e9curit\u00e9)<\/em>.<\/p>\n\n\n\n<p>En revanche, si la validation du format renseign\u00e9 dans chaque champ n&rsquo;est pas possible, cela peut s&rsquo;av\u00e9rer probl\u00e9matique <em>(un champ email renseign\u00e9 par exemple avec une adresse mail erron\u00e9e)<\/em>. Ok \u00e7a c&rsquo;est pour les champs de texte. Mais admettons, vous voulez des cases \u00e0 cocher ou des \u00ab\u00a0boutons radio\u00a0\u00bb, comment fait-on?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-les-cases-a-cocher-et-boutons-radio\">Les cases \u00e0 cocher et boutons radio<\/h4>\n\n\n\n<p>Les valeurs sont facultatives pour les cases \u00e0 cocher. SI vous ne d\u00e9finissez aucune valeur, la case \u00e0 cocher sera soumise comme \u00ab\u00a0on\u00a0\u00bb ou \u00ab\u00a0off\u00a0\u00bb. Cependant, vous pouvez d\u00e9finir une valeur bien particuli\u00e8re si le destinataire clique sur la case \u00e0 cocher.<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;form action=\"https:\/\/www.monurlperso.fr\/\" method=\"GET\"&gt;\n&lt;label for=\"accord\"&gt;Vous acceptez les conditions ? &lt;input type=\"checkbox\" id=\"accord\" name=\"accord\" value=\"ok\"&gt;&lt;\/label&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>L&rsquo;url de destination ressemblera alors \u00e0 ceci si la case est coch\u00e9e : https:\/\/www.monurlperso.fr\/?accord=ok. Pour les boutons radio en revanche, des valeurs sont requises. L&rsquo;attribut <code data-no-translation=\"\">name<\/code>, quant \u00e0 lui, regroupe les boutons radio propres \u00e0 votre question. Voyez cela comme un questionnaire \u00e0 choix multiples. Dans l&rsquo;exemple ci-dessous, votre destinataire ne pourra choisir qu&rsquo;un seul choix parmi les deux.<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;form action=\"&#91;exemple_url]\" method=\"GET\"&gt;\n&lt;fieldset&gt;\n&lt;legend&gt;Quel est le meilleur blog d'email marketing au monde selon vous ?&lt;\/legend&gt;\n&lt;label for=\"blogemailmarketing01\"&gt;&lt;input type=\"radio\" name=\"blogemailmarketing01\" value=\"badsender\"&gt; Badsender&lt;\/label&gt;\n&lt;label for=\"blogemailmarketing02\"&gt;&lt;input type=\"radio\" name=\"blogemailmarketing02\" value=\"erreur404\"&gt; erreur404&lt;\/label&gt;\n&lt;\/fieldset&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p><strong>Et vous souhaitez aussi am\u00e9liorer le rendu des boutons radio ou des cases \u00e0 cocher, et personnaliser leur apparence ?<\/strong> En effet, ils apparaissent souvent assez petits, et sont inaccessibles pour les lecteurs. Nous pouvons, dans ce cas, ajouter une <code data-no-translation=\"\">div<\/code> \u00e0 la suite de l&rsquo;<code data-no-translation=\"\">input<\/code> qui va permettre de remplacer le style du bouton <code data-no-translation=\"\">radio<\/code> par le style de notre choix.<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;form action=\"&#91;exemple_url]\" method=\"GET\"&gt;\n&lt;fieldset&gt;\n&lt;legend&gt;Quel est le meilleur blog d'email marketing au monde selon vous ?&lt;\/legend&gt;\n&lt;label for=\"blogemailmarketing01\"&gt;Badsender &lt;input type=\"radio\" name=\"blogemailmarketing01\" value=\"badsender\"&gt; &lt;div class=\"bouton rouge\"&gt;&lt;\/div&gt;&lt;\/label&gt;\n&lt;label for=\"blogemailmarketing02\"&gt;Erreur404 &lt;input type=\"radio\" name=\"blogemailmarketing02\" value=\"erreur404\"&gt; &lt;div class=\"bouton rouge\"&gt;&lt;\/div&gt;&lt;\/label&gt;\n&lt;\/fieldset&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-remplacer-le-style-par-defaut-du-bouton-radio\">Remplacer le style par d\u00e9faut du bouton radio<\/h4>\n\n\n\n<p>Pour changer le style des boutons radio dans un formulaire dans un email, il y a quelques \u00e9tapes \u00e0 suivre. Tout d&rsquo;abord, il nous faudra masquer le bouton radio par d\u00e9faut en utilisant ces styles :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>.bouton_radio_cache{ \ndisplay:inline-block; \nopacity:0; \nwidth:0; \nheight:0; \nmargin:0 -9999px 0 0; \nfloat:right; \nposition:absolute;\n}<\/code><\/pre>\n\n\n\n<p>Vous avez appliqu\u00e9 la <code data-no-translation=\"\">class<\/code> \u00e0 votre input radio ? Parfait. Maintenant, rempla\u00e7ons le focus par nos propres styles, en ajoutant des surbrillances ou un contour \u00e0 l&rsquo;\u00e9l\u00e9ment sur lequel le destinataire se concentre :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>input:focus + .button{ \noutline: Highlight auto 2px; \noutline: -webkit-focus-ring-color auto 5px;\n}<\/code><\/pre>\n\n\n\n<p>Enfin, nous allons styliser nos boutons, et changer leur style selon leur \u00e9tat :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>.button{ \n\/* style *\/ \n} \n.button:hover, \ninput:focus + .button{ \n\/* style *\/ \n} \ninput:checked + .button{ \n\/* style *\/ \n}<\/code><\/pre>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.badsender.com\/wp-content\/uploads\/2021\/06\/Frame-14.jpg\" alt=\"Styliser les boutons radio d'un formulaire dans un email\" class=\"wp-image-84880\"\/><figcaption class=\"wp-element-caption\">Changer le style des boutons radio dans un formulaire.<\/figcaption><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-rendre-des-champs-obligatoires\">Rendre des champs obligatoires<\/h4>\n\n\n\n<p>L&rsquo;attribut <code data-no-translation=\"\">required<\/code> pour rendre un champ obligatoire est compl\u00e8tement ignor\u00e9 dans presque tous les clients de messagerie, \u00e0 deux exceptions pr\u00e8s : Thunderbird met en \u00e9vidence les champs obligatoires vides mais le formulaire peut tout de m\u00eame \u00eatre soumis. Opera Mail, en revanche, se comporte comme un navigateur et affiche un message d&rsquo;erreur, emp\u00eachant l&rsquo;envoi du formulaire. Finalement, vous pourrez aussi trouver le support des diff\u00e9rents types de champs sur le site de <a href=\"https:\/\/www.caniemail.com\/search\/?s=form\" target=\"_blank\" rel=\"noreferrer noopener\">caniemail.com<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-transmettre-des-informations-cachees\">3. Transmettre des informations cach\u00e9es<\/h3>\n\n\n\n<p>On disait qu&rsquo;on voulait envoyer des donn\u00e9es en plus que le destinataire n&rsquo;aurait pas besoin de remplir, ok ? Par exemple, un nom, ou un identifiant d&rsquo;utilisateur. Vous pouvez transmettre des informations cach\u00e9es en utilisant l&rsquo;attribut <code data-no-translation=\"\">type=\"hidden\"<\/code>. Par exemple, le morceau de code suivant va transmettre un ID d&rsquo;utilisateur sans que le destinataire n&rsquo;ai besoin de le renseigner <em>(il ne le verra d&rsquo;ailleurs m\u00eame pas \u00e0 l&rsquo;\u00e9cran)<\/em>.<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;form action=\"&#91;exemple_url]\" method=\"GET\"&gt;\n&lt;input type=\"hidden\" name=\"identifiant\" value=\"XICU77S\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-soumettre-le-formulaire\">4. Soumettre le formulaire<\/h3>\n\n\n\n<p>Ok, maintenant on arrive \u00e0 la fin. Et on va donc proposer \u00e0 notre destinataire de soumettre le formulaire directement dans l&#8217;email. Pour ce faire, vous pouvez faire appel \u00e0 un <code data-no-translation=\"\">input<\/code> de type <code data-no-translation=\"\">submit<\/code>, ou \u00e0 un <code data-no-translation=\"\">button<\/code> de type <code data-no-translation=\"\">submit<\/code>. <strong>Les deux fonctionnent de mani\u00e8re tr\u00e8s similaire, mais la diff\u00e9rence r\u00e9side dans l&rsquo;endroit o\u00f9 vous mettez votre texte.<\/strong> Pour l&rsquo;input, vous devrez renseigner son texte dans l&rsquo;attribut <code data-no-translation=\"\">value<\/code>. Pour le button en revanche, le texte du bouton ira entre l&rsquo;ouverture et la fermeture de la balise.<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;!-- bouton de soumission de type input --&gt;\n&lt;input type=\"submit\" value=\"Soumettre le formulaire\" &gt;\n&lt;!-- bouton de soumission de type button --&gt; \n&lt;button type=\"submit\"&gt;Soumettre le formulaire&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-solution-de-secours\">Solution de secours<\/h2>\n\n\n\n<p><strong>Que faire si votre formulaire ne fonctionne pas dans certains clients mail ? Anticiper !<\/strong> Pour chaque email interactif, il est indispensable d&rsquo;avoir des solutions de secours. Elles garantissent que l\u00e0 o\u00f9 les formulaires ne fonctionneront pas, ils seront masqu\u00e9s et qu&rsquo;une solution de secours sera affich\u00e9e \u00e0 la place. Par exemple, il est possible d&rsquo;afficher le formulaire interactif dans Apple Mail, Gmail (desktop web), Yahoo (desktop web) et d&rsquo;afficher la solution de secours sur Outlook et Windows Mail, et tous les appareils mobiles. Voici alors ce \u00e0 quoi ressemblera le code permettant d&rsquo;afficher ou non le formulaire interactif ou la solution de secours dans ce cas de figure :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>.formulaire_interactif {\n    display: block !important;\n    max-height: inherit !important;\n    overflow: visible !important;\n}\n.solution_de_secours {\n    display: none;\n}\n \nbody&#91;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;}\nbody&#91;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; }\n \n&#91;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;}\n&#91;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; }\n \n@media only screen and (max-width: 640px) {\n  .solution_de_secours {\n    display:block !important;\n    width: auto !important;\n    overflow: visible !important;\n    float: none !important;\n    max-height:inherit !important;\n    max-width:inherit !important;\n    line-height: auto !important;\n    margin-top: 0px !important;\n    visibility:inherit !important;\n  }\n  .formulaire_interactif, \n  .formulaire_interactif p, \n  .formulaire_interactif label, \n  .formulaire_interactif input  {\n    display:none !important;\n    display:none !important;\n    overflow:hidden !important;\n    max-height: 0px !important;\n    max-width: 0px !important;\n    line-height: 0px !important;\n    visibility:hidden !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Et voici le code HTML :<\/p>\n\n\n\n<pre data-no-translation class=\"wp-block-code prettyprint\"><code data-no-translation>&lt;!--&#91;if mso | ie]&gt;\n&lt;style&gt;\n.solution_de_secours {\n  display: block !important;\n  max-height: inherit !important;\n  overflow: visible !important;\n}\n&lt;\/style&gt;\n&lt;!&#91;endif]--&gt;\n \n \n&lt;!-- debut FORMULAIRE_INTERACTIF --&gt;\n&lt;!--&#91;if (!mso)&amp;(gte IE 10)]&gt; &lt;! -- --&gt;\n&lt;div class=\"formulaire_interactif cachesuroutlook\" style=\"display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;\"&gt;\n    &#91;Insert Interactive Form code here]\n&lt;\/div&gt;\n&lt;!--&lt;!&#91;endif]--&gt;\n&lt;!-- fin FORMULAIRE_INTERACTIF --&gt;\n \n&lt;!-- debut SOLUTION_DE_SECOURS --&gt;\n&lt;div class=\"solution_de_secours montresuroutlook\"&gt;\n    &#91;Insert fallback for form section here]\n&lt;\/div&gt;\n&lt;!-- fin SOLUTION_DE_SECOURS --&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-les-autres-solutions\">Les autres solutions<\/h2>\n\n\n\n<p>Si vous n&rsquo;\u00eates pas s\u00fbr du support du formulaire dans un email <em>(et cela peut se comprendre, car vous n&rsquo;avez aucun moyen de v\u00e9rifier la fiabilit\u00e9 des informations envoy\u00e9es, ni leur format)<\/em>, et que vous ne souhaitez pas prendre de risque : il existe bien d&rsquo;autres m\u00e9thodes pour \u00ab\u00a0simuler\u00a0\u00bb la pr\u00e9sence d&rsquo;un formulaire :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ins\u00e9rer une image d&rsquo;un formulaire<\/strong> <em>(ou d\u00e9velopper un faux formulaire en HTML dans l&rsquo;id\u00e9al)<\/em> avec des liens permettant de diriger, au clic, vers une landing page o\u00f9 un vrai formulaire sera disponible. Vous pouvez m\u00eame \u00eatre vicieux et concevoir un champ de type <code data-no-translation=\"\">text<\/code> au format gif, avec un curseur clignotant&#8230; 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.<\/li>\n\n\n\n<li>Partir sur des formulaires \u00e0 choix multiples et ins\u00e9rer des liens de tracking diff\u00e9rents selon les r\u00e9ponses cliqu\u00e9es. Vous pourrez ainsi r\u00e9cup\u00e9rer les donn\u00e9es du nombre de destinataire ayant cliqu\u00e9 sur telle ou telle r\u00e9ponse.  <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.badsender.com\/wp-content\/uploads\/2021\/06\/SATISFACTION-CLIENT-EMOJI.jpg\" alt=\"Questionnaire \u00e0 choix multiple et formulaire dans un emailing\" class=\"wp-image-84878\"\/><figcaption class=\"wp-element-caption\">Exemple de questionnaire de satisfaction avec des liens de tracking diff\u00e9rent selon l&#8217;emoji cliqu\u00e9.<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-un-exemple-de-formulaire-dans-un-email\">Un exemple de formulaire dans un email ?<\/h2>\n\n\n\n<p>Aucun souci, nous sommes l\u00e0 pour \u00e7a les amis ! Dans l&#8217;email ci-dessous, tir\u00e9 de mon article sur la <a href=\"https:\/\/www.badsender.com\/2020\/08\/28\/certification-litmus-et-interaction-email\/\">certification Litmus pour Email designer\/developer<\/a>, j&rsquo;ai ins\u00e9r\u00e9 un formulaire tout simple avec une barre de recherche pour un email Deezer. Ainsi, depuis l&#8217;email, le destinataire peut taper l&rsquo;artiste qu&rsquo;il souhaite \u00e9couter, et sera automatiquement dirig\u00e9 vers la page de recherche avec les r\u00e9sultats correspondants. Vas-y, teste !<\/p>\n\n\n\n<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\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Badsender\/pen\/XWdRMJQ\">\n  Litmus Certification &#8211; Email 2 &#8211; fr<\/a> by DEFOSSEZ (<a href=\"https:\/\/codepen.io\/Badsender\">@Badsender<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>Pour tout formulaire dans un email, il est IM-PE-RA-TIF de mettre en place une solution de secours dans le cas o\u00f9 le formulaire ne fonctionnerait pas correctement. On est d&rsquo;accord, mettre en place un formulaire peut tout de m\u00eame s&rsquo;av\u00e9rer assez complexe et le ratio temps pass\u00e9\/support n&rsquo;est pas forc\u00e9ment convaincant&#8230; Mais si un client vous demande d&rsquo;en mettre un en place, au moins vous saurez maintenant comment faire et vous connaitrez en d\u00e9tail le support de cette technique.<\/p>\n\n\n\n<p>Les sites r\u00e9f\u00e9renc\u00e9s ci-dessous proposent plusieurs r\u00e9sultats de tests effectu\u00e9s sur les principaux clients mail pr\u00e9sents sur le march\u00e9. Si, dans la plupart des cas, le formulaire est correctement affich\u00e9, il n&rsquo;est pas forc\u00e9ment fonctionnel pour autant&#8230; <strong>Enfin, mis \u00e0 part le support, il est aussi n\u00e9cessaire de s&rsquo;assurer que la plateforme de routage utilis\u00e9e ne supprime pas toutes les balises propres \u00e0 un formulaire avant envoi&#8230;<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vous-avez-envie-d-essayer-des-formulaires-interactifs-dans-vos-emails\">Vous avez envie d&rsquo;essayer des formulaires interactifs dans vos emails ?<\/h2>\n\n\n\n<p><strong>Badsender est l\u00e0 pour \u00e7a b\u00e9b\u00e9 !<\/strong> On a une <a href=\"https:\/\/www.badsender.com\/agence\/conception\/design-email\/\">agence de design email<\/a>, on fait aussi l&rsquo;<a href=\"https:\/\/www.badsender.com\/agence\/conception\/integration-html-email\/\">int\u00e9gration HTML\/CSS de vos emails<\/a>, on fait de la R&amp;D, de l&rsquo;innovation&#8230; Appelez-nous bon sang ! Vous ne serez pas d\u00e9\u00e7us !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-sources\">Sources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<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>\n\n\n\n<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>\n\n\n\n<li><a href=\"https:\/\/www.sitepoint.com\/forms-in-email\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.sitepoint.com\/forms-in-email\/<\/a><\/li>\n\n\n\n<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>\n\n\n\n<li><a href=\"https:\/\/www.caniemail.com\/search\/?s=form\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.caniemail.com\/search\/?s=form<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/emailclientmarketshare.com\/<\/a><\/li>\n\n\n\n<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>\n\n\n\n<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>\n\n\n\n<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>\n<\/ul>\n\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/google\/code-prettify@master\/loader\/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css\" defer=\"\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Che(\u00e8)r(e)s lecteurs\/lectrices&#8230; BONJOUR BONSOIR!!! Mon cher Patron (pour de vrai, je ne parle pas du merveilleux email Builder d\u00e9velopp\u00e9 par l&rsquo;agence email Badsender), M\u00f4ssieur Jonathan Loriaux donc, m&rsquo;a dit tout r\u00e9cemment : \u00ab\u00a0Il faudrait faire un peu de R&amp;D sur l&rsquo;insertion d&rsquo;un formulaire dans un email pour un prospect\u00a0\u00bb. Alors pourquoi ne pas en profiter [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Formulaire dans un email : est-ce possible ? Quels sont les risques ?<\/title>\n<meta name=\"description\" content=\"Un formulaire dans un email, c&#039;est le graal ! Vous limitez les interactions et boostez votre ROI. Mais \u00e0 quelles conditions ?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formulaire dans un email - LePatron.email - L&#039;emailing sur mesure\" \/>\n<meta property=\"og:description\" content=\"Che(\u00e8)r(e)s lecteurs\/lectrices... BONJOUR BONSOIR!!! Mon cher Patron (pour de vrai, je ne parle pas du merveilleux email Builder d\u00e9velopp\u00e9 par l&#039;agence\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/\" \/>\n<meta property=\"og:site_name\" content=\"LePatron.email - L&#039;emailing sur mesure\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T13:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-29T10:20:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1050\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Defossez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EmailLepatron\" \/>\n<meta name=\"twitter:site\" content=\"@EmailLepatron\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Defossez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/en\\\/form-in-an-email\\\/\"},\"author\":{\"name\":\"Thomas Defossez\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#\\\/schema\\\/person\\\/6391bca08872a46e558c02e3325e2a2c\"},\"headline\":\"Formulaire dans un email\",\"datePublished\":\"2021-06-17T13:13:00+00:00\",\"dateModified\":\"2023-03-29T10:20:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/en\\\/form-in-an-email\\\/\"},\"wordCount\":3137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/formulaire-interactif-dans-email.jpg\",\"articleSection\":[\"code\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/en\\\/form-in-an-email\\\/\",\"url\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/\",\"name\":\"Formulaire dans un email : est-ce possible ? Quels sont les risques ?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/formulaire-interactif-dans-email.jpg\",\"datePublished\":\"2021-06-17T13:13:00+00:00\",\"dateModified\":\"2023-03-29T10:20:25+00:00\",\"description\":\"Un formulaire dans un email, c'est le graal ! Vous limitez les interactions et boostez votre ROI. Mais \u00e0 quelles conditions ?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/formulaire-interactif-dans-email.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/formulaire-interactif-dans-email.jpg\",\"width\":1050,\"height\":700,\"caption\":\"formulaire interactif dans email\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.badsender.com\\\/2021\\\/06\\\/17\\\/formulaire-dans-un-email\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.lepatron.email\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Formulaire dans un email\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#website\",\"url\":\"https:\\\/\\\/www.lepatron.email\\\/\",\"name\":\"LePatron.email - L&#039;emailing sur mesure\",\"description\":\"L&#039;email builder pour cr\u00e9er vos emails sur mesure.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lepatron.email\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#organization\",\"name\":\"LePatron\",\"url\":\"https:\\\/\\\/www.lepatron.email\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/dev-2021.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Twitter-Profile.png\",\"contentUrl\":\"https:\\\/\\\/dev-2021.lepatron.email\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Twitter-Profile.png\",\"width\":400,\"height\":400,\"caption\":\"LePatron\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/EmailLepatron\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/lepatron-email\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.lepatron.email\\\/#\\\/schema\\\/person\\\/6391bca08872a46e558c02e3325e2a2c\",\"name\":\"Thomas Defossez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g\",\"caption\":\"Thomas Defossez\"},\"url\":\"https:\\\/\\\/www.lepatron.email\\\/en\\\/author\\\/thomas-defossez\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Form in an email: is it possible? What are the risks?","description":"A form in an email is the grail! You limit interactions and boost your ROI. But under what conditions?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/","og_locale":"en_US","og_type":"article","og_title":"Formulaire dans un email - LePatron.email - L&#039;emailing sur mesure","og_description":"Che(\u00e8)r(e)s lecteurs\/lectrices... BONJOUR BONSOIR!!! Mon cher Patron (pour de vrai, je ne parle pas du merveilleux email Builder d\u00e9velopp\u00e9 par l'agence","og_url":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/","og_site_name":"LePatron.email - L&#039;emailing sur mesure","article_published_time":"2021-06-17T13:13:00+00:00","article_modified_time":"2023-03-29T10:20:25+00:00","og_image":[{"width":1050,"height":700,"url":"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg","type":"image\/jpeg"}],"author":"Thomas Defossez","twitter_card":"summary_large_image","twitter_creator":"@EmailLepatron","twitter_site":"@EmailLepatron","twitter_misc":{"Written by":"Thomas Defossez","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#article","isPartOf":{"@id":"https:\/\/www.lepatron.email\/en\/form-in-an-email\/"},"author":{"name":"Thomas Defossez","@id":"https:\/\/www.lepatron.email\/#\/schema\/person\/6391bca08872a46e558c02e3325e2a2c"},"headline":"Formulaire dans un email","datePublished":"2021-06-17T13:13:00+00:00","dateModified":"2023-03-29T10:20:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lepatron.email\/en\/form-in-an-email\/"},"wordCount":3137,"commentCount":0,"publisher":{"@id":"https:\/\/www.lepatron.email\/#organization"},"image":{"@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg","articleSection":["code"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lepatron.email\/en\/form-in-an-email\/","url":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/","name":"Form in an email: is it possible? What are the risks?","isPartOf":{"@id":"https:\/\/www.lepatron.email\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#primaryimage"},"image":{"@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg","datePublished":"2021-06-17T13:13:00+00:00","dateModified":"2023-03-29T10:20:25+00:00","description":"A form in an email is the grail! You limit interactions and boost your ROI. But under what conditions?","breadcrumb":{"@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#primaryimage","url":"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg","contentUrl":"https:\/\/www.lepatron.email\/wp-content\/uploads\/2021\/07\/formulaire-interactif-dans-email.jpg","width":1050,"height":700,"caption":"formulaire interactif dans email"},{"@type":"BreadcrumbList","@id":"https:\/\/www.badsender.com\/2021\/06\/17\/formulaire-dans-un-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.lepatron.email\/"},{"@type":"ListItem","position":2,"name":"Formulaire dans un email"}]},{"@type":"WebSite","@id":"https:\/\/www.lepatron.email\/#website","url":"https:\/\/www.lepatron.email\/","name":"LePatron.email - Tailor-made emailing","description":"The email builder to create your custom emails.","publisher":{"@id":"https:\/\/www.lepatron.email\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lepatron.email\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.lepatron.email\/#organization","name":"LePatron","url":"https:\/\/www.lepatron.email\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lepatron.email\/#\/schema\/logo\/image\/","url":"https:\/\/dev-2021.lepatron.email\/wp-content\/uploads\/2021\/07\/Twitter-Profile.png","contentUrl":"https:\/\/dev-2021.lepatron.email\/wp-content\/uploads\/2021\/07\/Twitter-Profile.png","width":400,"height":400,"caption":"LePatron"},"image":{"@id":"https:\/\/www.lepatron.email\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/EmailLepatron","https:\/\/www.linkedin.com\/company\/lepatron-email"]},{"@type":"Person","@id":"https:\/\/www.lepatron.email\/#\/schema\/person\/6391bca08872a46e558c02e3325e2a2c","name":"Thomas Defossez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40da7932cfcb25170ac6926b2a41b4c98a1401ccab617ed3fab8666979f1a73a?s=96&d=mm&r=g","caption":"Thomas Defossez"},"url":"https:\/\/www.lepatron.email\/en\/author\/thomas-defossez\/"}]}},"_links":{"self":[{"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/posts\/2183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/comments?post=2183"}],"version-history":[{"count":1,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/posts\/2183\/revisions"}],"predecessor-version":[{"id":3938,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/posts\/2183\/revisions\/3938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/media\/2188"}],"wp:attachment":[{"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/media?parent=2183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/categories?post=2183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lepatron.email\/en\/wp-json\/wp\/v2\/tags?post=2183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}