Skip to main content
View as Markdown

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.

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

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.

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 }

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.

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