Apprendre à développer un formulaire en plusieurs étapes (Multi Step Form) dans Webflow grâce aux attributs personnaliser et sans utiliser de Slider !
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.
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.
.jpg)
