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 conçu spécifiquement pour les formulaires multi-étapes et conversationnels. Chaque question apparaît l’une après l’autre, ce qui engendre de très hauts taux de complétion.
Configuration :
- Créez un compte Typeform gratuit sur typeform.com
- Construisez votre formulaire — Typeform est multi-étapes par défaut, chaque question est un “slide” (diapositive) distinct
- Dans Typeform, allez dans Share (Partager) → Embed in a web page (Intégrer dans une page web) → copiez le code de l’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 de l’iframe
Ou intégrez-le avec l’application Shopify Typeform — c’est plus simple que d’intégrer manuellement une iframe.
Avantages : Une UX de formulaire sublime et qui convertit bien, aucun travail de design requis, optimisé pour le mobile.
Inconvénients : Les données du formulaire sont stockées sur Typeform, et non sur Shopify. Le design est celui de l’univers Typeform — pas exactement de votre image de marque.
Option 2 — JotForm
JotForm prend en charge les formulaires multi-étapes avec une barre de progression et fonctionne via une intégration iframe, comme Typeform.
Configuration :
- Créez un formulaire dans JotForm → allez dans Form Settings (Paramètres) → Form layout (Mise en page) → Multi-page
- Divisez vos champs en pages avec l’élément “Page Break” (Saut de page)
- Intégrez avec un iframe sur votre page Shopify
Le forfait gratuit de JotForm permet 100 soumissions par mois. Les forfaits payants démarrent à environ 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
Passez au multi-étapes si :
- Votre formulaire compte plus de 6 champs
- Différents profils d’utilisateurs nécessitent des informations différentes (utilisez des logiques conditionnelles via les étapes)
- Vous demandez des informations sensibles (contextualisez votre demande — établissez le lien en étape 1 avant de réclamer des données de paiement en étape 3)
- Vous souhaitez qualifier des leads (l’étape 1 permet de garder des infos basiques, la 2 qualifie le besoin/budget)
Restez sur de la page unique si :
- Le formulaire compte au plus 3 ou 4 champs (Nom, E-mail, Message)
- Il s’agit d’une inscription à la newsletter ou de la simple capture de leads
- La vitesse pour compléter la tâche prime sur le taux de remplissage profond
Suivi des formulaires multi-étapes
Configurez le suivi du tunnel de conversion pour comprendre où les utilisateurs abandonnent. Pour chaque étape du formulaire, déclenchez un événement personnalisé dans GA4 :
// Déclenché 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 en entonnoir) affichant les taux de complétion à chaque étape — une aide précieuse pour identifier l’étape qui perd le plus d’utilisateurs.
FAQ
2 à 4 étapes est la fourchette idéale. Deux étapes divisent un long formulaire sans le fragmenter. Quatre étapes représentent à peu près la limite supérieure avant que la complétion ne baisse. 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.
Non, s'il est implémenté sous forme de formulaire natif avec une divulgation progressive (CSS/JavaScript masquant les étapes suivantes). Les champs sont tous présents dans le HTML au premier chargement, juste masqués visuellement — Google voit le formulaire complet. Les formulaires intégrés par iframe (Typeform) n'aident pas le SEO puisque le contenu se trouve dans un document distinct, mais ils ne lui nuisent pas non plus.
Mieux que les longs formulaires en une seule étape. Les écrans de mobiles rendent les formulaires de 12 champs insupportables ; les diviser en étapes permet à chaque étape de tenir sur l'écran avec des zones tactiles confortables. Affichez la progression ("Étape 2 sur 3") et utilisez de grands boutons principaux. Vérifiez que le clavier ne cache pas le bouton suivant sur iOS.
C'est utile pour les formulaires longs (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 "Continuer là où vous vous étiez arrêté". Par souci de confidentialité, effacez-le lors de la soumission et de la déconnexion. N'enregistrez pas de données sensibles (paiement, pièces d'identité) dans le localStorage.
Oui — c'est le modèle le plus courant. Décrivez la ramification à Fudge ("si l'étape 1 est 'grossiste', afficher les champs de l'entreprise à la suite ; sinon passer à la confirmation") et l'outil génère le JavaScript conditionnel nativement dans votre thème — aucune application de formulaire n'est requise. Alternatives : une application de formulaire comme Hulk ou l'intégration de Typeform. La logique conditionnelle (branching) est ce qui rend les formulaires en plusieurs étapes véritablement précieux pour la qualification.
Pour mesurer les résultats, consultez 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 en plusieurs étapes sont la pierre angulaire des parcours de recommandation basés sur des quiz.
Article lié : Ajouter un champ de téléchargement de fichier dans Shopify.