Formly

1. Origine

Formly est un projet indie développé par ViDesigns, un studio de développement Webflow. À la base, un constat simple et frustrant : créer un formulaire multi-étapes dans Webflow obligeait à détourner des composants (sliders, tabs, interactions IX2) pour simuler ce que n'importe quel outil de form builder propose nativement. Formly a été conçu pour combler ce gap, en restant dans l'écosystème Webflow, avec une approche basée sur des attributs HTML plutôt que sur un builder externe. Aujourd'hui, l'outil est utilisé par plus de 30 000 experts Webflow dans le monde.

‍

2. Utilité

Dans Webflow, le formulaire natif fonctionne sur une seule page : on remplit toutes les questions d'un coup, puis on envoie. C'est suffisant pour un formulaire simple. Mais dès qu'on veut qualifier un lead, guider un prospect à travers un briefing, ou adapter les questions selon les réponses précédentes, ça ne suffit plus.

Formly résout ça en transformant n'importe quel formulaire Webflow en formulaire multi-étapes, sans toucher à la structure native. Chaque étape est un div avec un attribut | data-form="step". Navigation, validation, barre de progression : tout est géré par la librairie. Et avec FormlyLogic, on ajoute de la logique conditionnelle : une branche se déroule ou se masque selon les réponses, comme dans un vrai outil de form building professionnel. Et rien ne change côté workflow : le formulaire continue de s'intégrer à ton écosystème.

‍

3. Fonctionnalités

Ce qui fait de Formly un outil à part dans l'écosystème Webflow, c'est la combinaison multi-step natif + logique conditionnelle + liberté de design totale, sans builder externe, sans rompre avec les intégrations Webflow.

• Multi-step natif : transformer n'importe quel formulaire Webflow en formulaire multi-étapes avec 3 attributs
• Navigation clavier : passer à l'étape suivante avec Entrée, soumettre avec ⌘+Entrée
• Barre de progression automatique ou personnalisée par attributs
• Validation des champs par étape (champs requis, format email)
• Cards sans inputs : pages d'intro ou d'explication entre les étapes
• FormlyLogic : logique conditionnelle no-code, afficher ou masquer des étapes selon les réponses, avec 2 attributs
• Plusieurs messages de succès : afficher un message différent selon le parcours emprunté
• Redirections multiples : rediriger vers des URLs différentes selon la branche sélectionnée
• Accès aux données de saisie : afficher les réponses de l'utilisateur en temps réel sur la même page
• CMS Select Input : alimenter un champ select dynamiquement depuis une collection CMS Webflow
• Carte récapitulative : afficher un résumé de toutes les saisies avant soumission
• Pré-remplissage par query string : auto-remplir des champs via l'URL
• Réinitialisation du formulaire après soumission
• Compatible avec Make, Zapier, Airtable et tout outil qui fonctionne avec les formulaires Webflow natifs

‍

4. Cas concrets

→ Pour les projets clients où la qualification des leads est critique, on remplace le formulaire de contact standard par un Formly multi-étapes. Le visiteur répond à 4 ou 5 questions ciblées (type de projet, budget, délais, objectif…). La logique conditionnelle adapte les questions selon les premières réponses : un e-commerce ne voit pas les mêmes questions qu'un site vitrine. Le studio reçoit un lead déjà qualifié, avec toutes les infos utiles pour préparer le premier appel.

→ Sur une campagne, Formly permet de qualifier les leads entrants directement sur la page, sans renvoyer vers un formulaire de contact générique. On crée un parcours en 3 étapes : le visiteur renseigne son besoin, son budget, et son délai. FormlyLogic déclenche un message de succès différent selon les réponses. Une confirmation immédiate avec un lien Cal.com pour les projets au-dessus d'un certain budget, un message de renvoi vers une ressource pour les autres. La redirection est automatique, le tri est fait avant même le premier contact.

‍

5. Prix

Formly propose un plan gratuit (FormlyBasic) avec les fonctionnalités multi-step essentielles, sans inscription requise. FormlyPro débloque FormlyLogic, les redirections multiples, les messages de succès différenciés, le CMS Select Input, la carte récapitulative et plus de 25 fonctionnalités avancées. Un plan mensuel est également disponible pour tester avant de s'engager.

→ tryformly.com

‍

6. Questions fréquentes

• Formly remplace-t-il le formulaire natif Webflow ?
  Non, il l'étend. Formly est une librairie qui s'ajoute par-dessus le formulaire Webflow existant. Les données sont toujours gérées par Webflow, et toutes les intégrations natives continuent de fonctionner.
• Peut-on avoir plusieurs formulaires Formly sur une même page ?
  Non, une seule instance de Formly par page. Plusieurs formulaires Formly sur un même site sont possibles, mais sur des pages différentes.
• Comment intégrer Formly dans Webflow ?
  On ajoute un script dans le <head> de la page (ou dans un fork de Dev Starter chez SR), puis on applique des attributs data-form aux éléments du formulaire dans le Designer Webflow. Pas de code à écrire, uniquement des attributs dans l'interface Webflow.