À retenir
- Le formulaire de contact natif de Shopify se fait en une seule étape. Les formulaires multi-étapes nécessitent une solution tierce.
- Les formulaires multi-étapes améliorent considérablement les taux d’achèvement des formulaires longs en les divisant en sections gérables.
- 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.
Un formulaire présentant 10 champs sur une seule page est intimidant. Les 10 mêmes champs répartis sur 3 étapes semblent beaucoup plus abordables. C’est la raison pour laquelle les formulaires multi-étapes surpassent toujours les formulaires sur une seule page en matière de taux d’achèvement — et pourquoi tous les outils de formulaire, de Typeform à HubSpot, proposent une mise en page par étapes par défaut.
Sur 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
Combien d’étapes devrait avoir un formulaire multi-étapes Shopify ?
2 à 4 étapes est la fourchette idéale. Deux étapes permettent de diviser un long formulaire sans qu’il paraisse 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.
Un formulaire multi-étapes nuira-t-il à mon SEO Shopify ?
Non, s’il est implémenté comme un formulaire natif avec divulgation progressive (CSS/JavaScript masquant les étapes suivantes). Tous les champs sont présents dans le code HTML au premier chargement, mais visuellement masqués — Google voit l’intégralité du formulaire. Les formulaires intégrés via iframe (comme Typeform) n’aident pas le SEO car le contenu est dans un document séparé, mais ils ne lui nuisent pas non plus.
Les formulaires multi-étapes fonctionnent-ils bien sur mobile ?
Mieux que les longs formulaires en une seule étape. Les petits écrans 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. Testez pour vérifier que le clavier ne recouvre pas le bouton de validation sur iOS.
Dois-je sauvegarder les données partielles du formulaire si l’utilisateur quitte en cours de route ?
C’est utile pour les formulaires longs (4 étapes ou plus 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é, effacez ces données lors de la soumission et lors de la déconnexion. Ne sauvegardez pas les champs sensibles (informations de paiement, pièces d’identité) dans le localStorage.
Puis-je ajouter une logique conditionnelle entre les étapes du formulaire ?
Oui — c’est même le cas d’usage le plus courant. Décrivez les conditions à Fudge (“si l’étape 1 est ‘grossiste’, afficher les champs de l’entreprise ensuite ; sinon passer à la confirmation”) et l’outil génère nativement le code JavaScript conditionnel dans votre thème — aucune application de formulaire n’est requise. Alternatives : une application de formulaire comme Hulk ou intégrer du Typeform. L’arborescence conditionnelle est ce qui rend les formulaires multi-étapes vraiment précieux pour qualifier les clients.
Pour mesurer les résultats, consultez suivre les conversions sur Shopify.
Sur le même sujet : Ajouter une logique conditionnelle aux formulaires Shopify.
Sur le même sujet : Quiz de recommandation de produits Shopify - exemples et modèles — les formulaires multi-étapes constituent les blocs de construction des parcours de recommandation sous forme de quiz.
Sur le même sujet : Ajouter un champ de téléchargement de fichier sur Shopify.