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 plus faciles à gérer.
- Typeform et JotForm sont les intégrations les plus simples — ils sont multi-étapes par défaut.
- Fudge peut créer un formulaire multi-étapes natif qui correspond exactement au design de votre thème.
Pour créer un formulaire à plusieurs étapes dans Shopify, intégrez un outil basé sur des étapes comme Typeform ou JotForm, installez une application de formulaire qui prend en charge les sauts de page ou créez un formulaire natif à plusieurs étapes dans votre thème. Le propre formulaire de contact de Shopify ne comporte qu’une seule étape.
Un formulaire avec 10 champs sur une seule page est intimidant. Les 10 mêmes champs répartis sur 3 étapes semblent gérables. Diviser un long formulaire en plusieurs étapes aide généralement à la complétion, c’est pourquoi des outils comme Typeform affichent une question à la fois.
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 donne un formulaire de base à une seule étape. Pour tout ce qui est plus complexe — plusieurs étapes, une logique conditionnelle ou un indicateur de progression — vous aurez besoin d’une approche tierce.
Pour la version à une seule étape, consultez comment ajouter un formulaire de contact personnalisé dans Shopify.
Option 1 — Typeform
Typeform est conçu spécifiquement pour les formulaires conversationnels à plusieurs étapes. Chaque question apparaît une à la fois, ce qui convient aux formulaires longs.
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 “diapositive” distincte
- Dans Typeform, allez dans Partager (Share) → Intégrer dans une page web (Embed in a web page) → copiez le code de l’iframe
- Dans Shopify, allez dans Boutique en ligne (Online Store) → Pages → sélectionnez votre page
- Basculez l’éditeur de contenu en vue HTML et collez le code de l’iframe
Ou intégrez avec l’application Shopify Typeform — plus simple que l’intégration manuelle de l’iframe.
Avantages : UX de formulaire soignée, aucun travail de design requis, optimisé pour les mobiles.
Inconvénients : Les données du formulaire vivent dans Typeform, pas dans Shopify. Le design est celui de Typeform — pas le style exact de votre marque.
Option 2 — JotForm
JotForm prend en charge les formulaires à plusieurs étapes avec une barre de progression et fonctionne via une intégration iframe, de manière similaire à Typeform.
Configuration :
- Créez un formulaire dans JotForm → allez dans les Paramètres du formulaire (Form Settings) → Mise en page du formulaire (Form layout) → Multi-pages
- Divisez vos champs en pages à l’aide de l’élément “Saut de page” (Page Break)
- Intégrez-le via iframe sur votre page Shopify
Le forfait gratuit de JotForm prend en charge 100 soumissions par mois. Les forfaits payants commencent à environ 34 $/mois (en octobre 2026).
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 intégrations tierces et les applications présentent souvent un décalage visuel avec le design de votre boutique — polices, couleurs et styles de boutons différents. Pour un formulaire qui semble natif à votre thème, Fudge, l’opérateur IA pour les boutiques Shopify, l’intègre dans votre thème avec son outil de pop-ups et formulaires.
Décrivez ce dont vous avez besoin :
“Crée un formulaire de contact en plusieurs étapes avec 3 étapes et une barre de progression. Étape 1 : Nom, E-mail, Type d’entreprise (liste déroulante). Étape 2 : Que cherchez-vous ? (zone de texte). É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énère un formulaire HTML/CSS/JavaScript natif qui hérite du design de votre thème. Pas de dépendances externes. Le formulaire commence comme un brouillon que vous pouvez remplir et tester avant sa mise en ligne. S’il doit alimenter votre liste de diffusion, demandez à Fudge de connecter Klaviyo et les soumissions atterrissent dans la liste de votre choix, tandis que Klaviyo envoie toujours les e-mails.
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 compte plus de 6 champs
- Différents segments d’utilisateurs nécessitent de collecter des informations différentes (utilisez la logique conditionnelle avec les étapes)
- Vous demandez des informations sensibles (demandez d’abord les coordonnées et les détails sensibles en dernier)
- Vous souhaitez qualifier des leads (l’étape 1 capture les informations de base, l’étape 2 qualifie leur budget/besoin)
Restez sur une seule étape quand :
- Le formulaire compte 3 champs ou moins (Nom, E-mail, Message)
- Il s’agit d’une inscription à la newsletter ou d’une simple capture de lead
- La rapidité de complétion est plus importante que l’exhaustivité
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
Combien d'étapes devrait comporter un formulaire à plusieurs étapes sur Shopify ?
2 à 4 étapes est la fourchette pratique. Deux étapes divisent un long formulaire sans donner l'impression d'être fragmenté. Quatre est à peu près la limite supérieure avant que la complétion ne chute. Au-delà de 4, il vaut mieux raccourcir le formulaire que d'ajouter des étapes supplémentaires. Chaque étape devrait comporter 2 à 4 champs, pas plus.
Un formulaire en plusieurs étapes nuira-t-il à mon SEO Shopify ?
Non, s'il est implémenté sous forme de formulaire natif avec divulgation progressive (CSS/JavaScript masquant les étapes suivantes). Les champs sont tous dans le HTML au premier chargement, juste masqués visuellement — Google voit le formulaire complet. Les formulaires intégrés via iframe (Typeform) n'aident pas le SEO puisque le contenu est dans un document séparé, mais ils ne nuisent pas non plus.
Les formulaires en plusieurs étapes fonctionnent-ils bien sur mobile ?
Mieux que les longs formulaires à une seule étape. Les écrans de mobiles rendent les formulaires de 12 champs insupportables ; diviser en étapes permet à chaque étape de tenir sur l'écran avec des cibles de pression confortables. Affichez la progression ("Étape 2 sur 3") et utilisez de grands boutons principaux. Testez que le clavier ne recouvre pas le bouton Suivant sur iOS.
Dois-je enregistrer les données partielles du formulaire si l'utilisateur quitte en cours de route ?
Utile pour les longs formulaires (plus de 4 étapes avec des champs obligatoires). Enregistrez l'état dans le localStorage après chaque étape ; au retour, pré-remplissez les champs et proposez de "Reprendre là où vous vous étiez arrêté". Pour des raisons de confidentialité, effacez-le lors de la soumission et de la déconnexion. N'enregistrez pas de champs sensibles (paiement, pièces d'identité) dans le localStorage.
Puis-je ajouter une logique conditionnelle entre les étapes du formulaire ?
Oui — le modèle le plus courant. Décrivez la ramification à Fudge ("si l'étape 1 est 'vente en gros', affiche les champs de l'entreprise ensuite ; sinon passe à la confirmation") et il génère le JavaScript conditionnel nativement dans votre thème — pas d'application de formulaire requise. Alternatives : une application de formulaire comme Hulk ou intégrer Typeform. La ramification est ce qui rend les formulaires à plusieurs étapes vraiment précieux pour la qualification. Pour plus de modèles, voir comment ajouter une logique conditionnelle aux formulaires Shopify.
