Concevoir des formulaires HubSpot pour les WhatsApp Flows

Chaque champ de votre formulaire HubSpot devient un composant d’un WhatsApp Flow, et Meta limite la quantité de texte de libellé que chaque composant peut afficher. Les libellés qui dépassent cette limite sont coupés sur le téléphone du client, surtout sur iPhone. Le Flow est quand même publié et les réponses arrivent correctement dans HubSpot. La seule conséquence est visuelle, c’est pourquoi le problème passe facilement inaperçu jusqu’à ce qu’un vrai client ouvre le formulaire. Cette page explique comment créer des formulaires HubSpot lisibles sur tous les appareils. Pour savoir comment un formulaire devient un Flow, voir Flows.

​

L’essentiel

​

Ce qu’il advient de vos libellés de champs

Chaque type de champ HubSpot correspond à un composant de WhatsApp Flow, et chaque composant a sa propre limite de libellé. Les champs les plus utilisés sont les plus contraints. Les libellés d’options d’une liste déroulante, d’un groupe de boutons radio ou d’un groupe de cases à cocher disposent chacun de 30 caractères. Le texte d’aide, le texte d’espace réservé et les descriptions d’options de HubSpot ne sont pas repris dans WhatsApp : chaque mot dont le client a besoin doit donc figurer dans le libellé, les options ou un élément de texte enrichi. Un texte enrichi ne devient un titre que si l’élément entier est un seul titre H1, H2 ou H3 de 80 caractères ou moins. Tout le reste devient du texte de corps, qui conserve le gras, l’italique, les liens et les listes.

​

Pourquoi l’affichage est correct sur un téléphone et pas sur un autre

Les nombres de caractères ci-dessus sont indicatifs, pas un seuil précis. Ce qui détermine réellement si un libellé est coupé, c’est l’espace disponible pour le texte une fois que l’appareil a réservé sa part pour les marges, le chevron d’une liste déroulante et le réglage de taille de police du client. Cela varie beaucoup. La même question de 33 caractères peut s’afficher en entier sur un téléphone Android, perdre son dernier mot sur un autre et être coupée au milieu d’un mot sur deux lignes sur un iPhone. Les conséquences pratiques :

• L’iPhone est la surface la plus stricte. Concevez pour lui et le reste suivra.
• Tester sur un seul appareil ne suffit pas. Un formulaire qui s’affiche correctement sur votre propre téléphone peut quand même être coupé pour une grande partie de votre audience.
• Les écritures non latines et les caractères larges manquent de place plus vite. Si vous collectez des réponses en arabe, hindi, thaï ou turc, considérez les nombres de caractères ci-dessus comme généreux et visez plus court.

​

Choisir le bon type de question

La plupart des problèmes de troncature viennent de l’utilisation d’une liste déroulante là où ce n’était pas le bon contrôle.

​

Rédiger des libellés qui tiennent

Un WhatsApp Flow est une conversation, pas un formulaire papier. Les libellés courts se lisent mieux ici, même lorsqu’il y a de la place pour plus. Quelques règles pour garder des libellés concis sans perdre de sens :

• Supprimez les formules de politesse. « Veuillez sélectionner votre » et « Quel est votre » n’apportent rien sur un téléphone.
• Utilisez un nom plutôt qu’une question lorsque la réponse est évidente d’après les options.
• Placez les détails supplémentaires dans un élément de texte enrichi au-dessus du champ. Le texte d’aide et les descriptions d’options n’apparaissent pas dans WhatsApp.
• Placez le contexte commun dans un titre en texte enrichi en haut du formulaire au lieu de le répéter dans chaque libellé.

​

Nommer le formulaire pour vos clients

Le nom du formulaire HubSpot devient le titre en haut de l’écran WhatsApp : les clients le voient donc. Utilisez un nom court, centré sur la tâche, comme « Être rappelé », plutôt qu’un nom interne comme « Formulaire de contact site web v3 ». Les bonnes pratiques des Flows de Meta recommandent une majuscule uniquement en début de phrase pour les titres d’écran. Choisissez le nom avant de synchroniser. Flowella utilise le nom du formulaire pour retrouver le Flow dans Meta : renommer le formulaire plus tard crée donc un nouveau Flow, et les modèles déjà créés continuent d’ouvrir l’ancien. Voir Flows.

​

Utiliser une copie du formulaire réservée à WhatsApp

Le Flow et votre site web utilisent le même formulaire HubSpot. Des libellés plus courts, un nom de formulaire destiné aux clients et des questions en texte enrichi modifient aussi le formulaire sur votre site web. Pour concevoir pour WhatsApp sans affecter votre site web, faites une copie du formulaire dans HubSpot et synchronisez la copie. La copie a les mêmes champs : les réponses arrivent donc dans les mêmes propriétés de contact. Les workflows qui attendent Form Completed doivent filtrer sur le nom de formulaire de la copie.

​

Quand la question doit vraiment être longue

Certaines questions ne peuvent pas être raccourcies sans changer ce que vous demandez. Une question de qualification, une question de consentement ou tout texte soumis à une exigence de formulation juridique nécessite son texte complet. Dans ces cas, placez la question au-dessus du champ et gardez un libellé de champ minimal : Le résultat se lit comme une question suivie d’un contrôle de réponse, ce que les clients attendent. Le texte enrichi dispose de beaucoup plus de place qu’un libellé : jusqu’à 4 096 caractères en texte de corps. Après avoir modifié un formulaire dans HubSpot, sélectionnez Sync WA Flow sur la page Flows pour publier la modification.

​

Combien de questions poser

Le taux de complétion chute fortement à mesure que les formulaires s’allongent, et WhatsApp est une surface plus impatiente qu’une page web.

• Trois ou quatre questions par formulaire est un bon objectif pour un premier contact. Posez les autres plus tard dans la conversation.
• Une tâche par formulaire. Flowella construit chaque formulaire comme un seul écran, suivi d’un écran de remerciement. Si vous collectez une adresse et une préférence de livraison, utilisez deux formulaires.
• Dix options par écran au maximum. Meta recommande de ne pas dépasser 10 options par écran. Au-delà, les clients arrêtent de lire et commencent à deviner.
• Cinq opt-ins et un sélecteur de photo par écran. Ce sont des limites de Meta. Les cases à cocher uniques et les cases de consentement comptent toutes deux comme des opt-ins, et chaque champ de téléversement de fichier devient un sélecteur de photo. Un formulaire qui dépasse l’une de ces limites ne se synchronise pas.
• Les champs conditionnels s’affichent toujours. WhatsApp montre les champs dépendants de HubSpot à tout le monde, juste après leur champ parent. Si un champ dépendant est obligatoire, chaque client doit y répondre : rendez donc les champs dépendants facultatifs ou retirez-les.
• Divisez les formulaires longs en deux. Un court formulaire de qualification suivi d’un second formulaire fonctionne généralement mieux qu’un seul long formulaire, et vous permet de créer des branches selon la première réponse.

Voir Capture et qualification de leads pour un exemple concret du schéma à deux formulaires.

​

Avant de synchroniser

​

Pages associées

Meta publie les contraintes sous-jacentes dans sa propre documentation. Pour la référence complète des composants, voir Composants des WhatsApp Flows, et pour les recommandations de conception de Meta, voir Bonnes pratiques des Flows.