Vous souhaitez ajouter un formulaire en plusieurs étapes sur votre site web ? Dans notre tutoriel du jour, nous allons vous montrer comment faire cela dans Webflow grâce à un bout de code et des attributs personnalisés.

Cette solution est totalement gratuite et n'utilise pas l'élément slider de Webflow !

Étape 1 : Ajouter un script dans le code de votre page

La première étape de ce tutoriel va consister à ajouter le script ci-dessous, dans "Before <!-- fs-richtext-ignore --></body> tag" dans les paramètres de la page qui va contenir votre multi step form.

<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"> </script>

Ce tutoriel présente les étapes de la solution développée par Formly.

Étape 2 : Insérez un formulaire sur votre page

Une étape qui peut paraître évidente, mais il est bien entendu obligatoire d'ajouter un élément formulaire natif de Webflow.

Lorsque vous ajoutez un formulaire Webflow, vous pouvez supprimer tout le contenu à l'intérieur du div "Form"(pas "Form Block").

Nous vous conseillons également de donner des classes à vos éléments "Form Block", "Form", "Success Message" et "Error Message".

Étape 3 : Ajoutez un attribut personnalisé au Form

Après avoir renommé le Div Block "Form", vous pouvez vous rendre dans les paramètres de cet élément. Maintenant, dans la partie "Custom Attributes", vous allez ajouter :

Name : data-form

Value : multistep

Étape 4 : Ajoutez un Div Block pour chaque étape

A l'intérieur du div "Form", vous allez devoir insérer autant de Div Block que vous souhaitez d'étapes.

Par exemple, si je souhaite un multi step form avec 3 étapes, je vais ajouter 3 Div Block.

Vous pouvez donner la même classe à chaque Div Block (par exemple : contact_step-wrapper).

Pour chacun de ces div block, vous allez ajouter l'attribut personnalisé suivant :

Name : data-form

Value : step

Étape 5 : Personnalisez vos étapes

Maintenant, dans chaque div block (représentant les étapes), vous allez pouvoir insérer les champs que vous souhaitez et personnaliser le design à votre convenance.

Pensez bien à ajouter un "Submit Button" dans la dernière étape de votre formulaire.

Étape 6 : Ajoutez un attribut personnalisé au "Submit Button"

Dans cette étape, vous devrez sélectionner l'élément "Submit Button" et ajouter l'attribut personnalisé suivant :

Name : data-form

Value : submit-btn

Étape 7 : Personnalisez des buttons pour passer d'une étape à l'autre

Vous pouvez maintenant, dans votre form block, ajouter des boutons qui serviront à passer à l'étape suivante ou revenir à l'étape précédente.

Vous pouvez ajouter autant de boutons pour passer d'une étape à l'autre que vous souhaitez (par exemple un par étapes). Vous pouvez également les ajouter n'importe où dans votre page.

Bouton pour passer à l'étape suivante

Pour ce bouton, vous devrez ajouter l'attribut personnalisé suivant :

Name : data-form

Value : next-btn

Bouton pour revenir à l'étape précédente

Pour ce bouton, vous devrez ajouter l'attribut personnalisé suivant :

Name : data-form

Value : back-btn

Étape 8 : Définissez vos champs obligatoires

Grâce à ce formulaire, un utilisateur ne pourra pas passer d'une étape à l'autre s'il n'a pas rempli les champs obligatoires de l'étape dans laquelle il se trouve.

Pour que cela fonctionne, vous devez cocher l'option "required" dans les paramètres de vos inputs.

Attention : A l'heure actuelle, cela ne fonctionne pas avec les types "Email" et "Phone", il faut donc ajouter laisser des types "Plain" pour ces champs.

Si vous souhaitez qu'un utilisateur coche un nombre précis de checkbox avant de passer à une autre étape, dans son div parent d'étape (dans notre exemple : contact_step-wrapper), il faudra ajouter l'attribut personnalisé suivant :

Name : data-checkbox

Value : n (nombre minimum de checkbox à cocher)

Étape 9 : Publiez votre projet

Vous ne pourrez pas voir directement dans le Designer le multi step form actif. Il faudra publier votre projet pour pouvoir le tester. Il n'est pas obligatoire de cacher les différentes étapes depuis le Designer, le code le fera automatiquement sur le site en ligne.

Bonus : Personnaliser son formulaire

Designer les états Succès et Erreur

Vous pouvez bien entendu personnaliser le "Success Message" et "Error Message" comme vous le souhaitez, cela n'affectera pas le formulaire en plusieurs étapes. Il n'y a pas d'attributs spécifiques pour ces états.

Cliquer sur la touche "Enter" pour passer à l'étape suivante

Si vous souhaitez ajouter cette fonctionnalité à votre projet, vous devrez ajouter l'attribut personnalisé suivant à votre élément form :

Name : data-enter

Value : true

Cliquer sur "Cmd + Enter" pour passer à l'étape suivante

Pour permettre cela, ajouter cet attribut personnalisé à l'élément form :

Name : data-submit

Value : true

Ajouter des étapes sans champs (décoratives)

Si vous souhaitez ajouter des étapes qui ne contiennent aucun champ à remplir, vous pouvez ajouter des éléments dans un div d'étape (contact_step-wrapper) qui aura en plus de l'attribut (data-form : step), l'attribut suivant :

Name : data-card

Value : true

Afficher l'étape actuelle et le nombre d'étapes total

Vous pouvez également ajouter une information de texte concernant l'étape sur laquelle on se trouve et le nombre total d'étape. Pour ce faire, il suffit d'ajouter un attribut personnalisé sur un texte pour l'étape actuelle :

Name : data-text

Value : current-step

Et un autre attribut personnalisé sur un texte pour le nombre total d'étape :

Name : data-text

Value : total-steps

Beaucoup d'autres fonctionnalités pour le Multi Step Form

Il existe encore beaucoup d'attributs pour ajouter des fonctionnalités à votre formulaire personnalisé grâce au système d'attributs. Vous pouvez par exemple ajouter une barre de progression automatique ou personnalisée.

Vous pouvez retrouver toute la documentation de Formly - Multi-Step Forms !

Si vous vous intéressez aux formulaires dans Webflow, vous pouvez retrouver nos tutoriels pour changer le nom d'un formulaire Webflow ou encore notre méthode pour bloquer les emails non professionnels des formulaires Webflow.