# Formulaires multi-étapes Les longs formulaires sont plus faciles à remplir lorsqu'ils sont découpés en morceaux gérables. La propriété `layout` choisit comment les champs d'un formulaire sont présentés : tous à la fois, répartis en étapes avec navigation précédent/suivant, ou un champ par écran à la manière de Typeform. Les étapes prennent en charge le saut et le branchement conditionnels afin que le parcours à travers le formulaire puisse s'adapter aux réponses du contributeur. ```yaml forms: - id: 1 name: onboarding title: Set up your workspace layout: multi-step submitTo: { table: workspaces } fields: - { kind: standalone, name: workspace_name, inputType: short-text, required: true } - { kind: standalone, name: team_size, inputType: number } - { kind: standalone, name: use_case, inputType: long-text } steps: - { id: basics, title: The basics, fields: [workspace_name] } - { id: team, title: Your team, fields: [team_size] } - { id: goals, title: Your goals, fields: [use_case] } ``` ## Modes de mise en page | Mode | Description | | -------------- | ---------------------------------------------------------------------------------- | | `single-page` | Tous les champs sur une seule page (par défaut). Les étapes sont ignorées. | | `multi-step` | Champs regroupés en `steps[]` avec navigation précédent/suivant. | | `one-question` | Un champ par écran, avançant automatiquement. Piloté par le même modèle `steps[]`. | ## Définitions d'étapes Lorsque `layout` vaut `multi-step` ou `one-question`, le tableau `steps` partitionne les champs du formulaire en écrans ordonnés. Chaque étape référence des noms de champs définis dans le tableau parent `fields`. | Propriété | Description | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | Id d'étape unique au sein du formulaire (kebab-case recommandé, ≤64 caractères). Obligatoire. | | `title` | Titre de l'étape affiché au-dessus des champs. | | `description` | Paragraphe d'introduction de l'étape. | | `fields` | Noms de champs appartenant à cette étape. Chacun doit correspondre au `name` d'un champ (standalone/calculation/signature) ou à la `column` (table-field). Au moins un. | | `visibleWhen` | Règle de visibilité pour toute l'étape. Lorsque faux, l'étape entière est sautée. Utilise la forme [conditionnelle](/fr/docs/form-conditional-logic). | | `goToWhen` | Règles de branchement. La première règle correspondante saute vers son étape `goTo` plutôt que vers l'étape suivante linéaire. | ## Navigation et branchement Par défaut, un formulaire multi-étapes avance linéairement : étape 1 → étape 2 → étape 3. Deux mécanismes surchargent ce flux. **Sauter une étape** avec un `visibleWhen` au niveau de l'étape — lorsque la condition est fausse, l'étape est entièrement retirée de la séquence. **Brancher vers une étape différente** avec `goToWhen`. Chaque règle a une condition `when` et un id d'étape cible `goTo` ; la première règle correspondante l'emporte, sinon le flux linéaire continue. ```yaml steps: - id: plan title: Choose a plan fields: [plan] goToWhen: # Enterprise plans skip self-serve billing and route to a sales step - when: { field: plan, operator: eq, value: enterprise } goTo: sales - id: billing title: Payment fields: [card_number] - id: sales title: Talk to sales fields: [company, seats] # only relevant for enterprise; hidden otherwise visibleWhen: { field: plan, operator: eq, value: enterprise } ``` :::callout **Les cibles `goTo` doivent exister.** Chaque `goToWhen[].goTo` doit correspondre à un `steps[].id` dans le même formulaire. Une étape suivante linéaire est prise dès qu'aucune règle `goToWhen` ne correspond. ::: ## Une question à la fois La mise en page `one-question` présente un seul champ par écran pour une expérience ciblée et conversationnelle. Elle réutilise le même modèle `steps[]` — typiquement un champ par étape — et le même branchement `visibleWhen` / `goToWhen` s'applique. ```yaml forms: - id: 2 name: survey title: Quick survey layout: one-question submitTo: { storeSubmission: true } display: progressBar: true fields: - { kind: standalone, name: nps, inputType: rating, label: How likely are you to recommend us?, } - { kind: standalone, name: reason, inputType: long-text, label: What's the main reason for your score?, } steps: - { id: q1, fields: [nps] } - { id: q2, fields: [reason] } ``` ## Surcharges d'affichage L'objet `display` ajuste l'apparence du formulaire sans affecter la sémantique de soumission. | Propriété | Description | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `columns` | Nombre de colonnes dans lesquelles les champs sont disposés (1 à 4). S'applique aux mises en page sur une seule page et par étape. | | `progressBar` | Affiche une barre de progression dans les mises en page `multi-step` / `one-question`. Aucun effet sur `single-page`. | | `submitLabel` | Libellé du bouton de soumission (`Submit` par défaut). Prend en charge les clés `$t:`. | | `theme` | Surcharges par formulaire : `primaryColor`, `backgroundColor`, `borderRadius`. | ```yaml forms: - id: 3 name: registration title: Event registration layout: multi-step display: columns: 2 progressBar: true submitLabel: Complete registration theme: primaryColor: '#4f46e5' borderRadius: 0.5rem submitTo: { table: registrations } fields: - { kind: table-field, column: first_name, required: true } - { kind: table-field, column: last_name, required: true } - { kind: table-field, column: email, required: true } - { kind: table-field, column: dietary_notes } steps: - { id: name, title: Your name, fields: [first_name, last_name] } - { id: contact, title: Contact & preferences, fields: [email, dietary_notes] } ``` ## Pages associées - [Champs de formulaire](/fr/docs/form-fields) — les champs répartis sur les étapes. - [Logique conditionnelle](/fr/docs/form-conditional-logic) — la forme de condition utilisée par `visibleWhen` et `goToWhen`. - [Présentation des formulaires](/fr/docs/forms-overview) — `layout`, `steps` et `display` dans le schéma de formulaire complet. - [Soumissions](/fr/docs/form-submissions) — ce qui se passe après la dernière étape.