# Sections et formulaires à étapes

Un long formulaire paraît plus court quand les questions arrivent quelques-unes à la
fois. Regroupez-les en sections, et votre formulaire en ligne fait avancer les gens une
étape à la fois.

## Dans l’application : sections et étapes

Ajoutez des sections dans le **Constructeur**, puis renommez-les ou réordonnez-les sous
**Parcours**. Un formulaire de deux sections ou plus les affiche une à la fois sur sa page
hébergée et dans une intégration par script, avec les boutons Suivant et Précédent et un
indicateur comme « Étape 2 sur 4 ». Un formulaire d’une seule section reste sur une seule page.
L’aperçu dans l’application montre toutes les sections ensemble, pour que vous puissiez
tout réviser d’un coup d’œil.

- **Une vérification à chaque étape.** Suivant vérifie l’étape en cours sur le serveur et
  indique les erreurs sur les champs. Pour sauter cette vérification à une étape, désactivez
  **Valider avant Suivant** sous **Parcours**. L’envoi vérifie toujours le formulaire au
  complet, et une réponse refusée ramène la personne à son étape.
- **Entrée pour avancer.** Avant la dernière étape, la touche Entrée dans un champ a le même
  effet que Suivant.
- **Un résumé par section.** Ajoutez-le sous **Parcours** : il s’affiche sous le titre de la
  section.
- **Des sections selon les réponses.** Réglez la **Visibilité** d’une section sous
  **Parcours**. Une section sans rien à afficher est sautée, et l’indicateur s’ajuste.
- **La langue de votre formulaire.** Les boutons et l’indicateur s’affichent en français ou en
  anglais, selon le formulaire.

## Avec le SDK ou l’API : vos propres étapes

Suivant et Précédent ainsi que les résumés de section font partie de la page hébergée.
L’intégration par script et la fonction `mountFormerieEmbed()` du SDK, qui chargent cette
page dans un iframe, les offrent donc aussi. `mountFormerieRuntimeForm()` et
`mountFormerieForm()` les reçoivent avec la prochaine version du SDK, et
`mountFormerieEmbed()` y gagne le redimensionnement automatique, que l’intégration par
script offre déjà.

Si vous bâtissez votre propre interface, vous pouvez déjà afficher une section à la fois. Le
schéma public présente chaque section comme une étape, et Formerie vérifie une étape sur
le serveur.

npm:

```sh
npm install @formerie/client
```

pnpm:

```sh
pnpm add @formerie/client
```

Yarn:

```sh
yarn add @formerie/client
```

Bun:

```sh
bun add @formerie/client
```

```ts
import { FormerieRuntimeClient } from "@formerie/client";

const forms = new FormerieRuntimeClient();

const check = await forms.validate("example.com", "intake", {
  step: "your-project",
  fields: answers,
});
```

Votre code s’occupe des changements de page, de la progression et de la conservation des
réponses entre les étapes. La vérification d’une étape ne stocke rien et n’envoie aucun
courriel. Le `submit()` final valide de nouveau tout le formulaire, et c’est ce résultat
qui compte. Consultez [Validation](/fr/guides/validation/) pour la structure de la réponse.