Comment créer des formulaires Webflow à plusieurs étapes (+ modèles et designs clonables)

Résumé rapide

Ce guide vous montre comment créer des formulaires multi-étapes Webflow à fort taux de conversion en utilisant Growform. Étant donné que Webflow ne prend pas en charge les formulaires multi-étapes de manière native, Growform offre une alternative transparente avec des modèles et des fonctionnalités avancées. C’est essentiel pour améliorer l’expérience utilisateur et les conversions. Suivez notre processus étape par étape et découvrez d’autres conseils, exemples et meilleures pratiques sur le blog de Growform.

Démarrer avec les formulaires à plusieurs étapes dans Webflow

Créer des formulaires multi-étapes élégants et à fort taux de conversion dans Webflow peut être un défi, en particulier si vous comptez sur ses capacités de formulaire natives. Bien que Webflow soit excellent pour les pages d’atterrissage visuellement étonnantes, il manque d’outils intégrés pour les formulaires multi-étapes avancés sans plonger dans un code personnalisé complexe.

Que vous soyez un débutant en Webflow ou un concepteur chevronné, ce guide vous aidera à offrir de meilleures expériences aux utilisateurs et à recueillir des prospects de meilleure qualité.

Pourquoi nous écouter ?

Chez Growform, nous sommes spécialisés dans la création de formulaires multi-étapes performants, faciles à construire, magnifiquement conçus et optimisés pour les conversions. Nous avons aidé des entreprises, des startups aux grandes agences, à améliorer leur génération de leads grâce à des formulaires intelligents et conviviaux.

Notre plateforme a été conçue spécifiquement pour résoudre les défis liés à la création de formulaires à plusieurs étapes dans des outils tels que Webflow, sans avoir besoin de code complexe ou de ressources de développement. Avec des années d’expérience pratique et des milliers de formulaires construits avec Growform, nous savons ce qui fonctionne et nous sommes là pour vous aider à réussir du premier coup.

Qu’est-ce qu’un formulaire multi-étapes Webflow ?

Un formulaire Webflow multi-étapes est un formulaire web construit au sein de la plateforme Webflow qui décompose les questions ou les champs de saisie en plusieurs « étapes » ou pages, plutôt que de tout afficher en une seule fois. Cette conception permet de guider les utilisateurs à travers le formulaire en plusieurs étapes, ce qui améliore l’expérience de l’utilisateur et augmente souvent les taux de conversion.

Voici quelques raisons d’utiliser un formulaire Webflow à plusieurs étapes :

• Réduction de la charge cognitive : Les utilisateurs ne sont pas submergés par un trop grand nombre de champs à la fois.
• Il est plus interactif : Il imite le flux d’une conversation, ce qui maintient l’intérêt des utilisateurs.
• Augmente le taux d’achèvement : En affichant des indicateurs de progression et en se concentrant sur une tâche à la fois, les utilisateurs sont plus enclins à terminer le formulaire.

Limites de Webflow

Bien que Webflow soit une excellente plateforme pour concevoir des sites web modernes et réactifs, son générateur de formulaires ne supporte pas les formulaires multi-étapes de manière native. Si vous souhaitez créer une véritable expérience multi-étapes, vous devrez vous appuyer sur un développement personnalisé et des solutions de contournement, notamment :

• Code personnalisé: JavaScript et CSS sont nécessaires pour créer des transitions entre les étapes et contrôler le flux.
• Contournement de la validation des formulaires: La validation des champs entre les étapes ajoute une complexité technique que Webflow ne gère pas d’emblée.
• Logique manuelle d’affichage et de masquage: Vous devez concevoir et écrire manuellement les champs ou les sections à afficher à chaque étape, ce qui peut être source d’erreurs.

En raison de ces difficultés, de nombreux concepteurs et spécialistes du marketing recherchent des solutions plus simples, sans code, qui leur permettent de créer des formulaires en plusieurs étapes sans toucher à une ligne de code.

Growform : Une meilleure alternative

Pour les utilisateurs de Webflow qui souhaitent créer des formulaires multi-étapes élégants et performants sans plonger dans un code complexe, Growform est une solution intelligente, sans code, qui s’intègre en douceur dans n’importe quel projet Webflow.

Voici pourquoi il se distingue :

• Construction visuelle de formulaires: Concevez votre formulaire à l’aide d’une interface propre de type « glisser-déposer », sans JavaScript ni CSS.
• Intégration simple: Copiez simplement le code d’intégration de votre formulaire et insérez-le dans Webflow à l’aide du composant natif <embed>.
• Entièrement réactif: votre formulaire s’affichera parfaitement sur les téléphones portables, les tablettes et les ordinateurs de bureau.
• Options de style flexibles: Utilisez les paramètres du thème de Growform pour aligner les polices, les couleurs et les styles de boutons sur votre site Webflow.
• Fonctionnalités intelligentes intégrées: Créez des flux logiques conditionnels, des mises en page multi-pages et des écrans de remerciement dynamiques sans aucun plugin.
• Intégrations transparentes: Envoyez facilement des leads vers des outils tels que HubSpot, Mailchimp, Google Sheets ou tout autre CRM via des intégrations natives ou Zapier.

Un client m’a dit un jour ;

« Lorsque nous sommes passés à une solution plus avancée de formulaires à plusieurs étapes, nous avons constaté une augmentation immédiate de nos taux de conversion, qui ont doublé, voire triplé dans certains cas. Notre coût par lead s’est considérablement amélioré, et le système est resté solide comme un roc depuis le premier jour. »
– Eugen Bachir, responsable des performances chez BeMarketable

Que vous construisiez pour des campagnes SaaS, B2B, immobilières ou de génération de leads, Growform vous offre la flexibilité et le raffinement dont vos formulaires Webflow ont besoin, sans sacrifier la facilité d’utilisation.

Guide étape par étape pour ajouter les formulaires multi-étapes de Growform à Webflow

1 – Créer un formulaire sur Growform

Tout d’abord, créez un nouveau formulaire dans Growform. Vous pouvez obtenir un essai gratuit de 14 jours sans carte de crédit – commencez ici.

La première étape se présente comme suit :

Suivez notre guide de démarrage si vous avez besoin d’un coup de main pour votre premier formulaire.

2 – Obtenez votre code d’action Growform

Une fois votre formulaire créé, obtenez votre code de partage en cliquant sur l’élément de menu “partager le formulaire” dans la navigation supérieure de Growform.

Choisissez l’option standard – cliquez sur « Obtenir code d’intégration », puis cliquez sur « Copier code d’intégration » :

3 – Ajouter un composant “Embed” à votre page Webflow

Maintenant, ouvrez votre page d’atterrissage dans Webflow et supprimez tous les formulaires que vous avez déjà créés – nous allons les remplacer par notre nouveau formulaire multi-étapes.

Ensuite, trouvez le composant “Code embed” sur le côté gauche. Cela ressemble à une paire de crochets de code avec une barre oblique inverse ( </> ).

Vous devrez faire défiler la page pour le trouver – au moment de la rédaction, il se trouve tout à la fin de la liste sous “Components”.

Une fois que vous avez trouvé le composant “Embed”, faites-le glisser à l’endroit où vous voulez qu’il soit sur votre page.

Collez le code de partage Growform dans cette boîte.

C’est vraiment simple – voici un gif de l’ensemble de la procédure :

Cliquez sur “Publier” pour terminer cette étape.

4 – Apporter quelques ajustements esthétiques à votre forme

Une fois que vous avez ajouté votre formulaire et publié votre page, vous verrez probablement quelque chose comme ceci sur votre domaine Webflow (en fonction du modèle de formulaire que vous avez choisi) :

Voici quelques ajustements que vous pourriez souhaiter faire pour que votre formulaire Webflow à étapes multiples soit parfait :

• Dans les paramètres du “Thème” de Growform, choisissez Minimal dans la configuration du canevas – cette option supprime l’en-tête et le rembourrage environnant.
• Une fois que vous avez choisi la configuration de la toile, réglez la couleur d’arrière-plan de la toile pour qu’elle corresponde à la couleur d’arrière-plan dans Unbounce, ou choisissez “Aucun” pour qu’elle soit transparente.
• Supprimez tous les en-têtes, instructions ou logos en haut de votre formulaire Growform – vous pouvez toujours les avoir dans Unbounce.
• Réglez l’option “Afficher les ombres” sur “Aucune” – les ombres ne fonctionnent mieux que sur les arrière-plans blancs.
• Ajustez la couleur principale de votre formulaire (qui affecte les barres de progression et les accents), ainsi que la gamme des autres paramètres de couleur.

Avec seulement 2 ou 3 minutes pour ajuster les paramètres du thème, nous pouvons faire en sorte qu’il ressemble à un très beau formulaire Webflow à plusieurs étapes, tout à fait en accord avec le design du reste de la page :

5 – Envoyez vos prospects quelque part !

Maintenant que nous avons mis en place notre formulaire Webflow à étapes multiples, où vont les prospects ?

Les pistes apparaîtront dans votre compte Growform et vous seront envoyées par courriel par défaut. Vous pouvez également utiliser Zapier pour envoyer vos leads vers l’une des centaines de destinations.

Il n’est donc pas nécessaire de configurer quoi que ce soit d’autre dans votre compte Webflow – tout ce qui concerne vos leads sera désormais géré par Growform.

Meilleures pratiques pour l’ajout d’un formulaire Growform à plusieurs étapes à Webflow

1. Donner la priorité à une expérience utilisateur fluide

• Soyez bref et ciblé: Décomposez les longs formulaires en étapes de taille réduite, avec seulement 1 ou 2 champs par page, afin de maintenir l’intérêt des utilisateurs.

• Utilisez des indicateurs de progression clairs: Une barre de progression rassure les utilisateurs sur leur état d’avancement, ce qui réduit les taux d’abandon.
• Optimisez les étiquettes et les instructions des champs: Veillez à ce que les libellés des champs soient concis et utilisez du texte de remplacement pour guider les utilisateurs sans encombrer le formulaire.
• Réduisez les champs obligatoires: Ne demandez que les informations essentielles afin de réduire les frictions et d’encourager les utilisateurs à remplir le formulaire.

2. Conception pour une intégration transparente du flux Web

• Faites correspondre votre marque à celle de Webflow: Utilisez les paramètres du thème de Growform pour aligner les couleurs, les polices et les styles de boutons avec votre site Webflow.
• Supprimez les en-têtes inutiles: Si Webflow a déjà un titre ou une description au-dessus du formulaire, supprimez les en-têtes en double dans Growform pour un aspect plus propre.
• Optimisez le style des boutons: Veillez à ce que la taille et la couleur des boutons soient cohérentes avec les autres CTA de votre site Webflow.

3. Assurer l’optimisation mobile

• Testez sur plusieurs appareils: Vérifiez comment le formulaire s’affiche sur différentes tailles d’écran pour vous assurer qu’il est adapté.
  
• Ajustez le remplissage et l’espacement: Utilisez les paramètres de mise en page de Growform pour affiner l’espacement des éléments de formulaire adaptés aux mobiles.
  
• Veillez à ce que le texte soit lisible: Veillez à ce que le texte du formulaire et les boutons soient suffisamment grands pour pouvoir être lus facilement sur les écrans mobiles.

4. Améliorer les taux de conversion avec des éléments de formulaire intelligents

• Utilisez la logique conditionnelle: Affichez/masquez les champs en fonction des entrées de l’utilisateur pour que les formulaires restent pertinents et personnalisés.

• Activez l’enregistrement automatique ou les soumissions partielles: Permettez aux utilisateurs de revenir plus tard afin de réduire les abandons.
• Expérimentez des mises en page en plusieurs étapes: Essayez des variantes telles qu’une page de bienvenue ou une première étape incitative (par exemple, “Obtenez un devis gratuit”) pour augmenter l’engagement.

5. Optimisez la gestion et le suivi des prospects

• Intégrez des outils de CRM et de messagerie électronique: Utilisez Zapier pour envoyer automatiquement des prospects à HubSpot, Mailchimp ou Google Sheets.

• Activer les notifications par courriel: Veillez à ce que votre équipe reçoive des alertes en temps réel lorsqu’un nouveau prospect soumet un formulaire.
• Utilisez le suivi UTM: Ajoutez des paramètres UTM à Growform pour suivre les sources de trafic qui génèrent le plus de conversions.

6. Tester et réitérer pour un impact maximal

• Testez des variantes de formulaires A/B : Essayez différentes longueurs de formulaire, différentes formulations de CTA ou différentes séquences d’étapes pour voir ce qui fonctionne le mieux.
• Surveillez les taux d’abandon: Utilisez les analyses de Growform pour identifier les endroits où les utilisateurs abandonnent le formulaire et ajustez-les en conséquence.
• Affinez le formulaire en fonction des commentaires: Demandez aux visiteurs ou aux clients leur avis sur la facilité d’utilisation du formulaire et apportez les améliorations nécessaires.

De meilleurs formulaires, sans code requis

Construire des formulaires multi-étapes dans Webflow ne doit pas signifier se battre avec du code personnalisé ou se fier à des solutions de contournement peu pratiques. Alors que les outils natifs de Webflow sont puissants pour la conception, ils sont insuffisants lorsqu’il s’agit de créer des formulaires avancés, à fort taux de conversion, qui guident les utilisateurs étape par étape.

C’est là que Growform entre en jeu. Avec une interface intuitive, une intégration transparente de Webflow et des fonctionnalités telles que la logique conditionnelle, la réactivité mobile et les intégrations CRM, Growform prend en charge la complexité, afin que vous puissiez vous concentrer sur la conversion et l’expérience de l’utilisateur.

Growform facilite le lancement de formulaires qui ont une belle apparence et fonctionnent parfaitement dans Webflow.

Prêt à construire un meilleur formulaire en plusieurs étapes ? Commencez votre essai gratuit de 14 jours de Growform et voyez la différence par vous-même.

Besoin de plus ? Nous travaillons activement sur notre offre Webflow.

N’hésitez pas à contacter notre équipe d’assistance expérimentée si vous avez besoin d’aide, y compris pour configurer votre compte.