Créer des formulaires avec plusieurs étapes sur la même page dans Webflow était jusqu’à aujourd’hui impossible sans une ligne de code. Mais avec l’arrivée de Formly, il est maintenant possible de créer un multi-step form dans Webflow, simplement en ajoutant un script et en utilisant des attributs personnalisés.

‍

Comment créer votre formulaire à étapes avec l’aide de Formly

‍

(tutoriel vidéo en cours de préparation)

‍

Copiez ce script sur votre page "Avant la balise </body>"

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

‍

‍

Créer la structure de votre formulaire

Il existe de nombreux modèles proposés par Videsigns (l’agence qui a développé Formly), que vous pouvez copier et réutiliser pour votre propre projet. Mais si vous souhaitez développer la structure de votre formulaire par vous-même, suivez les étapes suivantes.

‍

1. Ajoutez un formulaire, et supprimez tout le contenu du div "Form"(pas "Form Block").

‍

2. Dans votre formulaire, ajoutez un div block pour chaque étape, dans le div "Form" (dans notre exemple "quiz_grid").

‍

‍

3. Ajoutez 1 bouton suivant et un bouton retour, utilisez un bouton Webflow natif.

‍

4. Dans vos steps block, ajoutez vos champs en fonction de vos besoins (imput, radio bouton, case à cocher)

‍

5. Dans la dernière étape de votre formulaire, ajoutez un “submit button”. C’est ce dernier qui terminera votre formulaire à étapes en envoyant la donnée.

‍

‍

Ajouter les attributs de Formly

Pour faire fonctionner votre multi-step form, vous avez besoin d’ajouter des attributs sur des éléments bien spécifiques.

‍

Suivez bien les étapes suivantes pour créer votre multi-step form :

‍

1. Ajoutez l’attribut : “data-form = multistep” dans les paramètres du div "Form"(pas "Form Block"). Dans notre exemple ci-dessous celui-ci se prénomme “Quiz_grid”.

‍

‍

2. Ajoutez l’attribut : “data-form = step” à chaque étape de votre formulaire. Autrement dit tous les “Div Block” qui contiennent le contenu de chaque étape.

‍

‍

3. Ajoutez l’attribut : “data-form = back-btn” à votre bouton retour.

‍

‍

4. Ajoutez l’attribut : “data-form = next-btn “ à votre bouton suivant. C'est-à-dire le bouton qui permettra à vos visiteurs d’avancer à l’étape suivante.

‍

5. Et enfin, ajoutez l’attribut : “data-form = submit-btn” à votre bouton d’envoi de formulaire (submit-button).

‍

‍

Publier votre multi-step form avec Webflow

Votre formulaire Formly fonctionne comme un formulaire Webflow classique. Personnalisez le message de confirmation et d'erreur, et vérifiez que vos champs sont correctement renommés pour interpréter la donnée plus tard.

‍

‍

Améliorer votre formulaire à étapes

Formly propose de nombreuses fonctionnalités pour améliorer l'expérience utilisateur de votre formulaire. Par exemple, vous pouvez ajouter une barre de progression qui se déroule au fur et à mesure que vous passez les étapes. Vous pouvez également naviguer dans le formulaire en appuyant sur la touche Entrée. Nous vous recommandons vivement de consulter la documentation pour créer une véritable machine à générer des leads pour votre site web.

Formly a récemment sorti un nouveau produit “Conditional Logic” permettant de créer de la logique conditionnelle dans vos formulaires à étapes. Sans une ligne de code, simplement avec l’ajout d’attributs personnalisés dans Webflow.

‍

Trouver de l’aide sur Slack

Si votre formulaire multi-step ne fonctionne pas une fois publié, vous pouvez rejoindre le canal Slack pour demander assistance. On a testé chez Viby, et on doit dire que la communauté est ultra-réactive, vous avez généralement la solution à votre problème dans l’heure.

‍

‍

‍