Points clés
- Le formulaire de contact natif de Shopify ne comporte qu’une seule étape. Les formulaires en plusieurs étapes nécessitent une solution tierce.
- Les formulaires en plusieurs étapes améliorent les taux de complétion des longs formulaires en les divisant en morceaux gérables.
- Typeform et JotForm sont les intégrations les plus simples — ils comportent plusieurs étapes par défaut.
- Fudge peut créer un formulaire natif en plusieurs étapes qui correspond exactement au design de votre thème.
Un formulaire avec 10 champs sur une seule page est intimidant. Ces mêmes 10 champs répartis sur 3 étapes semblent gérables. C’est pourquoi les formulaires en plusieurs étapes surperforment systématiquement les formulaires sur une seule page en matière de taux de complétion — et c’est aussi pourquoi tous les outils de création de formulaires, de Typeform à HubSpot, utilisent par défaut une mise en page par étapes.
Dans Shopify, y parvenir demande un peu de travail.
Comment créer un formulaire à remplir sur Shopify
Le système de formulaire intégré de Shopify est volontairement simple. Le modèle de page de contact vous offre un formulaire basique en une seule étape. Pour tout ce qui est plus complexe — plusieurs étapes, logique conditionnelle ou indicateur de progression — vous aurez besoin d’une approche tierce.
Sur le même sujet : Ajouter un formulaire de contact personnalisé sur Shopify.
Option 1 — Typeform (le plus facile, meilleure UX)
Typeform est spécialement conçu pour les formulaires multi-étapes conversationnels. Chaque question apparaît une par une, ce qui génère d’excellents taux de complétion.
Configuration :
- Créez un compte Typeform gratuit sur typeform.com
- Créez votre formulaire — Typeform est multi-étapes par défaut, chaque question est une « slide » distincte
- Dans Typeform, allez dans Share (Partager) → Embed in a web page (Intégrer) → copiez le code iframe
- Dans Shopify, allez dans Boutique en ligne → Pages → sélectionnez votre page
- Passez l’éditeur de contenu en vue HTML et collez le code iframe
Ou intégrez-le avec l’application Shopify Typeform — plus simple que l’intégration manuelle d’un iframe.
Avantages : Superbe UX de formulaire, fort taux de conversion, aucun travail de design requis, optimisé pour mobile.
Inconvénients : Les données du formulaire sont stockées dans Typeform, pas dans Shopify. Le design est celui de Typeform — il ne collera pas au style exact de votre marque.
Option 2 — JotForm
JotForm prend en charge les formulaires multi-étapes avec une barre de progression et fonctionne via l’intégration d’un iframe, tout comme Typeform.
Configuration :
- Créez un formulaire dans JotForm → allez dans Form Settings (Paramètres) → Form layout (Mise en page) → Multi-page
- Séparez vos champs en différentes pages à l’aide de l’élément « Page Break » (Saut de page)
- Intégrez l’iframe sur votre page Shopify
Le forfait gratuit de JotForm autorise 100 soumissions par mois. Les forfaits payants démarrent autour de 34 $/mois.
Option 3 — Les applications de formulaire Shopify
Plusieurs éditeurs de l’App Store de Shopify prennent en charge les formulaires multi-étapes :
Hulk Form Builder — propose une option multi-étapes. Ajoutez un champ “Page Break” entre vos groupes de champs pour diviser le formulaire en étapes. Inclut une barre de progression.
Multi Step Form par MakeProSimp — spécialement conçu pour les formulaires multi-étapes sur Shopify. Comprend des logiques conditionnelles et des indicateurs de progression.
Ces applications conservent les données des formulaires dans leur tableau de bord Shopify et peuvent s’intégrer à vos outils d’email marketing.
Option 4 — Formulaire multi-étapes natif avec Fudge
Les applications et les intégrations tierces présentent souvent un décalage visuel par rapport au design de votre boutique — des polices, des couleurs et des styles de boutons différents. Pour un formulaire qui semble vraiment natif à votre thème, Fudge s’en occupe parfaitement.
Décrivez ce dont vous avez besoin à Fudge:
“Crée un formulaire de contact multi-étapes avec 3 étapes et une barre de progression. Étape 1 : Nom, E-mail, Type d’entreprise (liste déroulante). Étape 2 : Que recherchez-vous ? (zone de texte, téléchargement de fichier en option). Étape 3 : Méthode de contact préférée et meilleur moment pour vous joindre. Fais correspondre le style du formulaire à mon thème.”
Fudge gérère un formulaire 100% natif en HTML/CSS/JavaScript qui hérite de l’apparence de votre thème. Sans dépendances externes.
Pourquoi les formulaires multi-étapes convertissent-ils mieux ?
Réduction de la charge cognitive. Voir 12 champs d’un seul coup est écrasant. En voir 3 lors de la première étape semble tout à fait surmontable.
Engagement et cohérence. Une fois qu’une personne valide la première étape, elle est beaucoup plus susceptible d’aller jusqu’au bout. C’est un schéma psychologique bien documenté.
Indicateurs de progression. Savoir qu’on en est à “l’Étape 2 sur 4” indique clairement aux utilisateurs où ils se situent. Cela réduit grandement les abandons de formulaire parce que les gens voient la fin du tunnel.
Meilleure validation. Vous avez la possibilité de valider chaque étape avant de passer à la suivante, ce qui permet de repérer des erreurs très tôt, quand elles sont plus faciles à corriger.
Quand privilégier un formulaire multi-étapes
Utilisez le multi-étapes quand :
- Le formulaire comporte plus de 6 champs
- Vous devez collecter différentes infos en fonction du segment d’utilisateurs (utilisez la logique conditionnelle avec les étapes)
- Vous demandez des informations sensibles (contextualisez : créez un lien de confiance à l’étape 1 avant de demander les infos de paiement à l’étape 3)
- Vous souhaitez qualifier des leads (l’étape 1 capture les infos de base, l’étape 2 qualifie leur budget ou besoin)
Privilégiez une seule étape quand :
- Le formulaire comporte 3 champs ou moins (Nom, E-mail, Message)
- C’est une inscription à une newsletter ou une simple capture de leads
- La rapidité à remplir le formulaire prime sur l’exhaustivité des infos
Suivi des formulaires multi-étapes
Configurez le tracking de votre entonnoir de conversion (funnel) pour comprendre à quel moment les utilisateurs abandonnent. Pour chaque étape du formulaire, déclenchez un événement personnalisé vers GA4 :
// Se déclenche quand l'utilisateur passe de l'étape 1 à l'étape 2
gtag('event', 'form_step', {
form_name: 'wholesale_inquiry',
step: 2,
})Cela vous permet de créer un entonnoir dans GA4 (Explorer → Exploration de l’entonnoir de conversion) montrant les taux de complétion à chaque étape — une donnée inestimable pour identifier l’étape qui vous fait perdre le plus d’utilisateurs.
FAQ
2 à 4 étapes est la fourchette idéale. Deux étapes permettent de scinder un formulaire long sans donner l'impression qu'il est fragmenté. Quatre est à peu près la limite supérieure avant que le taux de complétion ne chute. Au-delà de 4, il vaut mieux raccourcir le formulaire plutôt que d'ajouter des étapes. Chaque étape devrait comporter 2 à 4 champs, pas plus.
Non, s'il est implémenté sous forme de formulaire natif avec affichage progressif (CSS/JavaScript masquant les étapes suivantes). Les champs sont tous dans le code HTML au premier chargement, ils sont juste visuellement masqués — Google voit le formulaire complet. Les formulaires intégrés via iframe (comme Typeform) n'aident pas le SEO puisque le contenu se trouve dans un document séparé, mais ils ne lui nuisent pas non plus.
Mieux que les longs formulaires à une seule étape. Les écrans de téléphones rendent les formulaires de 12 champs insupportables ; les diviser en étapes permet à chacune de s'adapter à l'écran avec des zones de clic (tap targets) confortables. Affichez la progression ("Étape 2 sur 3") et utilisez de grands boutons d'action. Vérifiez que le clavier virtuel ne recouvre pas le bouton 'Suivant' sur iOS.
C'est très utile pour les formulaires longs (4+ étapes avec des champs obligatoires). Sauvegardez l'état dans le localStorage après chaque étape ; à son retour, pré-remplissez les champs et proposez de "Reprendre là où vous vous étiez arrêté". Par souci de confidentialité, videz le cache lors de la soumission du formulaire et de la déconnexion. Ne sauvegardez aucune donnée sensible (paiement, pièces d'identité) dans le localStorage.
Oui — c'est le cas d'usage le plus courant. Décrivez votre arborescence à Fudge ("si l'étape 1 est 'wholesale', afficher les champs d'entreprise ensuite ; sinon passer directement à la confirmation") et il génère le JavaScript conditionnel nativement dans votre thème — aucune app de formulaire requise. Alternatives : une app de formulaire comme Hulk ou intégrer Typeform. Les branchements conditionnels sont ce qui rend les formulaires multi-étapes vraiment pertinents pour la qualification des leads.
Pour mesurer vos résultats, consultez notre article suivre les conversions sur Shopify.
Article lié : Ajouter une logique conditionnelle aux formulaires Shopify.
Article lié : Quiz de recommandation de produits Shopify - exemples et modèles — les formulaires multi-étapes sont la fondation des parcours de recommandation sous forme de quiz.
Article lié : Ajouter un champ d’upload de fichier dans Shopify.