> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.flowella.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

## La version courte

<CardGroup cols={2}>
  <Card title="Gardez les libellés courts" icon="type">
    Visez 20 caractères ou moins pour les champs déroulants et texte. Cela représente environ trois mots courts.
  </Card>

  <Card title="Utilisez des boutons radio pour les listes courtes" icon="circle-dot">
    Moins de huit options se lit mieux en boutons radio qu'en liste déroulante, et vous donne un libellé plus long.
  </Card>

  <Card title="Placez les questions longues au-dessus du champ" icon="layers">
    Utilisez un élément de texte enrichi pour la question et gardez le libellé du champ lui-même court.
  </Card>

  <Card title="Testez sur iPhone" icon="smartphone">
    Android est plus tolérant. Si cela se lit correctement sur iPhone, cela se lit correctement partout.
  </Card>
</CardGroup>

## Ce qui arrive à vos libellés de champ

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.

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

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

## Choisir le bon type de question

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.

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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é.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## Écrire des libellés qui rentrent

Un WhatsApp Flow est une conversation, pas un formulaire papier. Les libellés courts se lisent mieux ici, même là où il y a de la place pour plus.

| Au lieu de                                               | Essayez            |
| -------------------------------------------------------- | ------------------ |
| Quelle est votre méthode de contact préférée ?           | Méthode de contact |
| Lesquels de nos services vous intéressent ?              | Service            |
| Quel est votre budget annuel approximatif ?              | Budget annuel      |
| Veuillez sélectionner votre date de rendez-vous préférée | Date préférée      |

Quelques règles qui gardent les libellés courts sans perdre de sens :

* Laissez tomber la politesse. « Veuillez sélectionner votre » et « Quel est votre » n'apportent rien sur un téléphone.
* Utilisez un nom, pas une question, dès que la réponse est évidente à partir des options.
* Déplacez le détail dans le texte d'aide du champ ou dans une description d'option plutôt que dans le libellé.
* Placez le contexte partagé dans le titre de l'écran plutôt que de le répéter dans chaque libellé.

## Quand la question a vraiment besoin d'être longue

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 :

<Steps>
  <Step title="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.
  </Step>

  <Step title="Ajoutez le champ en dessous">
    Placez la liste déroulante, le groupe radio ou le champ de texte directement en dessous.
  </Step>

  <Step title="Donnez au champ un libellé minimal">
    Un simple point fonctionne. La question est déjà au-dessus, donc le libellé ne travaille pas.
  </Step>

  <Step title="Répétez pour chaque question longue">
    Alternez texte enrichi et champ vers le bas du formulaire pour que le motif reste cohérent.
  </Step>
</Steps>

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.

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

<Note>
  Si vous avez déjà des formulaires HubSpot qui utilisent ce motif, **re-synchronisez-les** depuis la [page de détail Flows](/fr/app/flows#form-detail) 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.
</Note>

## Combien de questions poser

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.

Voir [Capture et qualification de leads](/fr/hubspot/workflows/lead-capture-qualify) pour un exemple travaillé du motif à deux formulaires.

## Avant de synchroniser

<Steps>
  <Step title="Lisez chaque libellé tel qu'il apparaîtra">
    Comptez les caractères sur vos libellés de listes déroulantes et de champs texte. Tout ce qui dépasse 20 est à risque.
  </Step>

  <Step title="Vérifiez vos types de champs">
    Toute liste déroulante avec moins de huit options est candidate aux boutons radio.
  </Step>

  <Step title="Synchronisez le formulaire et ouvrez-le dans Meta">
    Depuis la page de détail [Flows](/fr/app/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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/fr/app/whatsapp-web-desktop).
  </Step>
</Steps>

## Voir aussi

<CardGroup cols={2}>
  <Card title="Flows" icon="file-text" href="/fr/app/flows">
    Synchronisez vos formulaires HubSpot en WhatsApp Flows et vérifiez leur statut.
  </Card>

  <Card title="WhatsApp Web et Desktop" icon="monitor" href="/fr/app/whatsapp-web-desktop">
    Comment les Flows s'affichent lorsque les clients répondent depuis un ordinateur portable.
  </Card>

  <Card title="Guides de workflow" icon="book-open" href="/fr/hubspot/workflow-guides">
    Recettes de bout en bout qui mettent ces motifs en pratique.
  </Card>

  <Card title="Échecs de synchronisation HubSpot" icon="bug" href="/fr/troubleshooting/hubspot-sync-failures">
    Diagnostiquez les formulaires qui ne se synchronisent pas ou les soumissions qui n'arrivent jamais.
  </Card>
</CardGroup>

Meta publie les contraintes sous-jacentes dans sa propre documentation. Pour la référence complète des composants, voir [Composants WhatsApp Flows](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/components), et pour les recommandations de conception de Meta, voir [Bonnes pratiques Flows](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/bestpractices).