Transformer un long formulaire en étapes sans changer le point de terminaison

Un long formulaire, c'est une page de questions, et c'est sur cette page unique que les gens partent. Les étapes la découpent en écrans. Ce qu'elles ne font pas, c'est changer le point de terminaison : le formulaire s'envoie toujours une fois, avec tous les champs, vers l'URL que votre balisage nomme déjà.

Une étape est une décision de présentation

Une étape est un groupe nommé des champs d'un formulaire, présenté à la personne qui le remplit un écran à la fois. Rien de l'ingestion, du quota, de la notation du spam ou de la conservation ne change quand un formulaire est découpé en plusieurs : le juge reçoit le même corps qu'avant, et un Envoi reste un Envoi compté.

C'est tout le contrat, et c'est pourquoi ajouter une étape est un changement de présentation et non d'intégration. L'URL de votre HTML, les noms de champs de votre balisage et le nombre d'Envois de votre forfait restent où ils étaient. Les étapes sont disponibles sur les forfaits payants.

La coupure appartient au champ qui la suit

Dans le constructeur, une coupure d'étape est un marqueur sur le champ qui ouvre l'étape suivante — la même chose qu'un trait dessiné au-dessus de ce champ. Elle voyage avec le champ : déplacer le champ déplace la coupure avec lui. Une coupure d'étape n'est pas un séparateur que l'on dépose entre deux questions ; c'est une propriété d'un champ, et lire la liste des champs de haut en bas, c'est lire l'ordre des étapes.

Deux conséquences en découlent. Réordonner les champs réordonne les étapes : une étape que vous aimiez peut être absorbée par celle du dessus. Et une étape vide se referme : FormFlow ne garde aucun écran sans rien dessus.

Un seul POST porte tous les champs

Le formulaire dessine une étape à la fois, mais le navigateur envoie toujours une seule requête. Tout ce que la personne a répondu arrive ensemble, avec les clés des noms de champs du schéma du formulaire. La référence du point de terminaison se trouve dans /docs/api : un POST, un corps, une réponse.

curl -X POST https://formflow.digital/api/v1/f/ff_live_example \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Lena Ortiz",
    "email": "lena@example.com",
    "company": "Ortiz Studio",
    "budget": "5000",
    "brief": "A one-page site, live in June."
  }'

Cinq champs, trois étapes, une requête. Aucun Envoi partiel à réconcilier entre les écrans, aucune seconde requête à réessayer, aucun reçu par étape. Si la requête échoue, la tentative a échoué ; si elle réussit, FormFlow détient un Envoi et le juge une fois.

Quand le formulaire s'affiche à plat

Un formulaire s'affiche avec tous ses champs sur une page sous un seul bouton d'envoi dans trois cas : il ne déclare aucune étape, le forfait de l'équipe ne les permet plus, ou le navigateur de la personne n'exécute pas JavaScript. L'affichage à plat n'est pas un repli ajouté après coup ; c'est ce autour de quoi les étapes font office d'habillage.

Une personne dont les scripts sont désactivés reçoit les mêmes champs, les mêmes noms et le même bouton d'envoi — à plat. Le formulaire n'est pas cassé, il tient simplement sur une page. Perdre les étapes à cause d'un changement de forfait n'est pas une migration non plus : le formulaire conserve ses étapes dans son schéma, s'affiche à plat tant que l'autorisation manque, et les redessine si elle revient.

Là où les étapes sont abruptes

Les étapes ne cachent pas non plus le schéma. Tout ce que vous déclarez fait partie du contrat, qu'un écran l'affiche ou non, et l'avis du navigateur sur les champs visibles ne décide jamais de ce qui est accepté. Si un champ doit être absent et pas seulement invisible, ne le déclarez pas.

L'entrée du journal des modifications pour v1.0.0 consigne la phrase sur laquelle tout cela repose : dirigez n'importe quel formulaire HTML vers FormFlow, ou utilisez une page hébergée ou un embed, et il reçoit, filtre, stocke et transmet chaque envoi. Les étapes réordonnent le milieu de cette phrase. Elles ne l'allongent pas.