Bonnes pratiques de conception de formulaire pour les WhatsApp Flows
Concevez des formulaires HubSpot qui s’affichent proprement en WhatsApp Flow : limites de libellés, choix du bon type de question et lutte contre les libellés coupés sur iPhone.
Chaque champ de votre formulaire HubSpot devient un composant dans un WhatsApp Flow, et Meta plafonne la quantité de texte de libellé que chaque composant peut afficher. Les libellés plus longs que le plafond sont coupés sur le téléphone du client, en particulier sur iPhone.Le Flow publie tout de même, et les réponses parviennent correctement à HubSpot. La seule conséquence est visuelle, ce qui explique qu’il soit facile de passer à côté jusqu’à ce qu’un vrai client ouvre le formulaire.Cette page explique comment construire des formulaires HubSpot qui se lisent bien sur chaque appareil.
Chaque type de champ HubSpot correspond à un composant WhatsApp Flow, et chaque composant a sa propre allocation de libellé. Les champs les plus utilisés sont les plus serrés.
Champ HubSpot
Rendu en
Allocation de libellé
Liste déroulante
Liste déroulante
20 caractères
Texte sur une ligne
Champ de texte
20 caractères
Texte multi-ligne
Zone de texte
20 caractères
Sélection radio
Boutons radio
30 caractères
Cases à cocher multiples
Groupe de cases à cocher
30 caractères
Sélecteur de date
Sélecteur de date
40 caractères
Case à cocher unique
Opt-in
120 caractères
Texte enrichi
Texte enrichi
Aucune limite pratique
Les libellés d’options dans une liste déroulante, un groupe radio ou un groupe de cases à cocher disposent chacun de 30 caractères, avec 300 caractères disponibles pour une description optionnelle en dessous.
Il s’agit de recommandations plutôt que de limites strictes. Le constructeur de Flow de Meta affiche un avertissement, pas une erreur, et un Flow avec des libellés longs se valide et se publie normalement. Rien n’est cassé et aucune donnée n’est perdue. Le libellé est simplement raccourci à l’écran.
Pourquoi cela s’affiche bien sur un téléphone et mal sur un autre
Les nombres de caractères ci-dessus sont un guide, pas un seuil précis. Ce qui décide en réalité si un libellé est coupé, c’est la place que le texte a une fois que l’appareil a pris sa part pour la marge, le chevron d’une liste déroulante et la taille de police choisie par le client.Cela varie beaucoup. La même question de 33 caractères peut s’afficher en entier sur un appareil 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 suit.
Tester sur un seul appareil ne suffit pas. Un formulaire qui semble correct sur votre propre téléphone peut être coupé pour une grande part de votre audience.
Les écritures non latines et les caractères larges manquent d’espace plus tôt. Si vous collectez en arabe, hindi, thaï ou turc, considérez les nombres de caractères ci-dessus comme généreux et visez plus court.
La plupart des problèmes de coupure viennent de l’utilisation d’une liste déroulante là où une liste déroulante n’était jamais le bon contrôle.
Deux à sept options : utilisez des boutons radio
Réglez le champ sur Sélection radio dans HubSpot. Vous obtenez un libellé de 30 caractères au lieu de 20, le libellé se place au-dessus des options comme un bloc de texte qui s’enroule plutôt que d’être compressé dans le contrôle, et le client répond en un tap au lieu d’ouvrir, faire défiler, sélectionner, fermer.C’est la recommandation propre à Meta et cela résout à elle seule la majorité des libellés coupés.
Huit options ou plus : utilisez une liste déroulante
Les longues listes appartiennent à une liste déroulante. Une liste de pays ou un catalogue produits en vingt boutons radio, c’est un mur de texte.Une liste déroulante contient jusqu’à 200 options. Les groupes radio et de cases à cocher sont plafonnés à 20, donc tout ce qui est plus long doit être une liste déroulante quelle que soit la lecture du libellé.
Plusieurs réponses : utilisez les cases à cocher
Cases à cocher multiples dans HubSpot devient un groupe de cases à cocher, avec la même allocation de libellé de 30 caractères que les boutons radio et le même plafond de 20 options.
Oui ou non : utilisez des boutons radio, pas une liste déroulante
Une liste déroulante à deux options est le pire cas : l’allocation de libellé la plus serrée sur la liste la plus courte possible, et deux taps pour répondre à une question qui en mérite un seul.
Certaines questions ne peuvent pas être raccourcies sans changer ce que vous demandez. Une question de qualification, une question de consentement ou toute chose avec une exigence de formulation juridique a besoin de son texte complet.Pour celles-ci, placez la question au-dessus du champ et gardez le libellé du champ minimal :
1
Ajoutez un élément de texte enrichi
Dans l’éditeur de formulaire HubSpot, faites glisser un élément de texte enrichi en position et saisissez la question complète.
2
Ajoutez le champ en dessous
Placez la liste déroulante, le groupe radio ou le champ de texte directement en dessous.
3
Donnez au champ un libellé minimal
Un simple point fonctionne. La question est déjà au-dessus, donc le libellé ne travaille pas.
4
Répétez pour chaque question longue
Alternez texte enrichi et champ vers le bas du formulaire pour que le motif reste cohérent.
Le résultat se lit comme une question avec un contrôle de réponse en dessous, ce à quoi les clients s’attendent, et cela s’affiche identiquement sur chaque appareil parce que le texte enrichi n’a pas de contrainte de longueur.
Utilisez ce motif uniquement là où vous en avez besoin. Chaque élément de texte enrichi est un composant supplémentaire, et un écran contient un maximum de 50. Sur les très grands formulaires, Flowella garde chaque entrée et supprime les blocs de texte enrichi de la fin de l’écran pour rester sous le plafond de Meta, donc certains textes de question peuvent ne pas apparaître à l’écran. Mélanger le motif dans un formulaire où la plupart des libellés sont déjà courts rend également la mise en page inégale.
Si vous avez déjà des formulaires HubSpot qui utilisent ce motif, re-synchronisez-les depuis la page de détail Flows pour publier le texte enrichi vers Meta. Les exécutions de synchronisation antérieures à ce changement ne prenaient que les libellés de champ, donc le texte de la question était absent du Flow.
L’achèvement 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 le reste plus tard dans la conversation.
Une tâche par écran. Si vous collectez une adresse et une préférence de livraison, utilisez deux écrans.
Dix options par écran au maximum. Au-delà, les clients arrêtent de lire et commencent à deviner.
Divisez les formulaires longs en deux. Un court formulaire de qualification suivi d’un second formulaire conditionnel bat généralement un long formulaire, et cela vous permet de faire une branche sur la première réponse.
Comptez les caractères sur vos libellés de listes déroulantes et de champs texte. Tout ce qui dépasse 20 est à risque.
2
Vérifiez vos types de champs
Toute liste déroulante avec moins de huit options est candidate aux boutons radio.
3
Synchronisez le formulaire et ouvrez-le dans Meta
Depuis la page de détail Flows, synchronisez le Flow et ouvrez-le dans Meta Business Suite. La prévisualisation du constructeur de Flow signale les libellés susceptibles d’être raccourcis.
4
Envoyez-le à un vrai iPhone
La prévisualisation du constructeur est un guide. Un téléphone est le seul vrai test, et l’iPhone est le plus strict.
5
Vérifiez WhatsApp Web si votre audience l'utilise
Les contrôles s’affichent différemment sur un ordinateur portable. Voir WhatsApp Web et Desktop.
Synchronisez vos formulaires HubSpot en WhatsApp Flows et vérifiez leur statut.
WhatsApp Web et Desktop
Comment les Flows s’affichent lorsque les clients répondent depuis un ordinateur portable.
Guides de workflow
Recettes de bout en bout qui mettent ces motifs en pratique.
Échecs de synchronisation HubSpot
Diagnostiquez les formulaires qui ne se synchronisent pas ou les soumissions qui n’arrivent jamais.
Meta publie les contraintes sous-jacentes dans sa propre documentation. Pour la référence complète des composants, voir Composants WhatsApp Flows, et pour les recommandations de conception de Meta, voir Bonnes pratiques Flows.
Dernière modification le 19 septembre 2026
Cette page vous a-t-elle été utile ?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.