Le guide ultime des formulaires interactifs dans les e-mails

Comment créer un formulaire interactif dans un e-mail

Mais comment implémenter exactement un formulaire dans vos campagnes email HTML ? Décomposons la méthode de Mark étape par étape :

1. Mettre en place les bases

Commençons par un framework très simple :

Au niveau le plus basique, il y a deux attributs qui font qu'un formulaire fonctionne :

• action
  Cela définit la page de destination ou la destination vers laquelle les données du formulaire sont envoyées.
• Méthode
  Il existe deux façons d'envoyer vos données à cette destination : via une requête GET ou POST. GET a une meilleure prise en charge par e-mail, mais il y a une chose à garder à l'esprit : si vous soumettez des données via la méthode GET, vous attachez essentiellement ces données à une URL, de sorte que les données de formulaire soumises seront visibles dans le champ d'adresse de la page .

Par exemple, soumettre votre prénom via le formulaire signifie que vous créez une URL qui ressemble à ceci :

 http://example.com?Fname=Mark

2. Configurez vos champs de formulaire

Ensuite, vous devrez réfléchir aux informations que vous souhaitez collecter auprès de vos abonnés et à la manière de les traduire en champs de formulaire individuels.

Chaque champ de formulaire nécessite une étiquette, c'est l'information qui indique au lecteur de courrier électronique à quoi sert ce champ de formulaire. Pour un champ de formulaire qui demande au lecteur son prénom qui ressemble à ceci :

Vous cherchez à collecter une entrée de texte pour un élément avec l'id = "fname" - et l'étiquette pour = "fname" relie ces deux. Certains clients de messagerie Web modifient cependant votre code et ne prennent pas en charge l'approche for & id. Ils aiment ajouter des préfixes à vos noms de classe et d'identifiant, de sorte que votre identifiant peut être modifié et pas votre attribut for. Résultat : votre étiquette ne correspond plus à votre identifiant, et cela casse votre formulaire. Voici une solution simple pour éviter cela : enroulez votre étiquette autour de votre entrée comme ceci :

Vous aurez le choix entre plusieurs types de saisie de texte, notamment :

 <type d'entrée="texte">
<type d'entrée="e-mail">
<type d'entrée="tel">
<type d'entrée="nombre">
<type d'entrée="url">
<textarea></textarea>

La sélection du bon type de saisie pour chaque champ de formulaire vous aide à faire deux choses : lorsqu'il est affiché sur un mobile, il peut modifier la disposition du clavier pour correspondre à la saisie requise. De plus, là où il est pris en charge, il existe une validation de base.

Pour chaque information que nous soumettons via un formulaire, nous devons soumettre deux choses : un nom et une valeur.

• Nom:
  C'est le nom défini par le développeur d'un champ de formulaire, il est transmis via la chaîne URL.
• Valeur:
  Valeur définie par le développeur ou l'utilisateur associée au nom dans le champ de formulaire.

Vous vous souvenez de notre exemple de prénom ci-dessus ? http://example.com?Fname=Mark est l'URL qui soumet le prénom "Mark" (=valeur) pour le champ de formulaire Prénom (=nom).

Ajoutons une zone de commentaire (nom=”commentaire”) à notre formulaire :

L'URL résultante lors de l'envoi du formulaire ressemblera à ceci :

 http://example.com?Fname=Mark&comment=hello

Cases à cocher et boutons radio

Nous savons comment configurer des entrées de texte, mais que se passe-t-il si vous souhaitez ajouter une case à cocher ou un bouton radio à votre formulaire ?

Les valeurs sont facultatives pour les cases à cocher. Si vous ne définissez pas de valeur pour une case à cocher, elle sera soumise comme « on » ou « off ». Cela fonctionne, mais vous souhaiterez peut-être mettre à jour la valeur avec différentes formulations, selon la façon dont vous prévoyez de gérer les données à la réception.

Par exemple, voici une case à cocher qui soumet la valeur « d'accord » si votre abonné coche la case pour accepter vos conditions générales :

 http://example.com?tc=agree

Pour les boutons radio, cependant, des valeurs sont requises et votre élément name est ce qui regroupe les boutons radio. Dans cet exemple ici, vous avez deux groupes de boutons radio—un pour la radio et un pour la télévision—et vous pourrez choisir une station dans chaque groupe.

Avez-vous repéré le coché sur ce premier bouton radio ? C'est ainsi que vous marquez le bouton radio que vous souhaitez afficher en tant qu'option présélectionnée.

Regrouper les options

Lorsque vous cherchez à regrouper des boutons radio ou des cases à cocher, c'est à ce moment-là qu'interviennent les ensembles de champs et les légendes.

• Les ensembles de champs regrouperont les éléments associés
• Les légendes sont essentiellement des étiquettes pour ces objets

Dans cet exemple ici, nous aurons à choisir entre les options rouge et bleu dans un ensemble de boutons radio qui consistent à choisir votre couleur préférée.

Les ensembles de champs sont utiles si vous cherchez à regrouper différentes informations comme une adresse : rue, code postal, état et pays.

Le style par défaut des boutons radio et des cases à cocher n'est pas génial. Les deux sont affichés plutôt petits, ce qui les rend inaccessibles pour de nombreux lecteurs. C'est pourquoi nous ajoutons ci-dessus une classe div qui nous permettra de remplacer le style de bouton radio par défaut par les styles de notre choix.

Remplacement du style de bouton radio par défaut

L'écrasement des styles par défaut pour les boutons radio implique quelques étapes. Décomposons-les un par un.

Tout d'abord, vous voudrez masquer le bouton radio par défaut en utilisant ces styles :

Maintenant que nous avons masqué les entrées par défaut, nous devons remplacer l'état d'entrée du focus par nos propres styles, en ajoutant des surbrillances ou un contour à l'élément sur lequel le lecteur se concentre :

Et enfin, nous stylisons nos boutons comme vous les stylisez normalement. Si vous utilisez des effets de survol pour styliser vos boutons et encourager les clics, vous pouvez également le faire ici. De plus, vous voudrez ajouter des styles à l'état « coché » de vos boutons radio afin qu'il soit facile de distinguer un bouton radio coché d'un bouton non coché.

3. Transmettre des informations cachées

Il est probable que vous souhaitiez transmettre certaines informations via le formulaire sans que l'utilisateur n'ait à les saisir manuellement dans le formulaire. Il peut s'agir d'éléments tels que des noms, des identifiants d'utilisateur ou des adresses e-mail, par exemple. Vous pouvez transmettre des informations cachées dans les coulisses en utilisant le type d'entrée « caché » - cette action ne peut pas être vue ou modifiée par l'utilisateur :

Par exemple, ce morceau de code transmettra un ID utilisateur comme celui-ci :

 http://example.com?user-id=U12345

4. Soumettre le formulaire

D'accord, votre formulaire est créé. Maintenant, nous avons besoin d'un moyen pour le lecteur de le soumettre . Il y a deux façons de le faire : le type d'entrée « soumettre » et un bouton de type « soumettre » :

Ils fonctionnent tous les deux de manière très similaire, mais la différence réside dans l'endroit où vous mettez votre texte. Si vous optez pour la voie du type d'entrée, vous souhaiterez définir votre texte comme valeur. Si vous utilisez le bouton, votre copie de soumission ira juste avant votre balise de fermeture de bouton.

Stratégies de secours pour les formulaires interactifs dans les e-mails

Pour chaque e-mail interactif, il est crucial d'avoir des solutions de secours en place. Les solutions de remplacement garantissent que dans tous les clients de messagerie où les formulaires ne fonctionnent pas parfaitement, nous les masquons et affichons à la place une solution de remplacement. Étant donné que la prise en charge mobile des formulaires est encore inégale, nous choisissons de masquer nos formulaires sur mobile pour tous les e-mails Litmus et de cibler l'expérience interactive complète sur nos clients de messagerie les plus populaires qui prennent en charge la fonctionnalité de formulaire interactif. En d'autres termes, nous avons implémenté un code qui…

• Affiche le formulaire interactif dans
  • Courrier Apple
  • Gmail (Web de bureau)
  • Yahoo (Web de bureau)
• Affiche le repli dans :
  • Tout Outlook et Windows Mail
  • Tous les appareils mobiles

Voici à quoi cela ressemble dans le code :

CSS

HTML

Exemples : voir les formulaires interactifs dans les e-mails en action

Curieux de tout voir en action ?

Dans cet e-mail, nous avons ajouté un formulaire pour permettre aux lecteurs d'entrer facilement en contact avec l'un de nos experts Litmus :

Les Indiana Pacers demandent leurs commentaires à leurs fans, directement dans l'e-mail :

Mais que faire si je ne peux pas coder ?

L'interactivité et surtout les éléments avancés comme les formulaires interactifs nécessitent un peu de compétences en codage. Si vous êtes un développeur de messagerie déjà à l'aise avec le code de messagerie, nous espérons que ce guide étape par étape vous aidera à implémenter des formulaires dans votre prochaine campagne.

Pour de nombreux spécialistes du marketing et développeurs de messagerie au début de leur carrière, la mise en œuvre d'éléments interactifs tels que des formulaires peut sembler une tâche impossible. Mais il y a de bonnes nouvelles pour vous, du moins si vous créez votre e-mail dans Salesforce Marketing Cloud. Mark et son équipe chez Salesforce ont récemment ajouté des blocs de formulaires au générateur de contenu de Salesforce, permettant aux spécialistes du marketing d'ajouter des formulaires à leurs e-mails et de les personnaliser en fonction de leurs besoins, aucune compétence en codage n'est requise. Si vous êtes un client Salesforce, nous vous encourageons à le consulter !

Est-ce que davantage de fournisseurs de services de messagerie permettront aux spécialistes du marketing de mettre en œuvre facilement des éléments interactifs dans leurs campagnes ? Le lancement des blocs de formulaires dynamiques de Salesforce pourrait être un premier pas dans cette direction.