Comment créer un formulaire multi-étapes dans WordPress [Plugin & Code]

Les formulaires multi-étapes facilitent l'accomplissement de tâches longues pour les utilisateurs, telles que les inscriptions, les sondages ou les soumissions détaillées. Si vous êtes prêt à en implémenter un sur votre site WordPress, ce guide vous montrera comment créer un formulaire multi-étapes dans WordPress en utilisant un plugin de formulaire multi-étapes WordPress de Claspo ou un code personnalisé. 

Qu'est-ce qu'un formulaire multi-étapes, et quand fonctionne-t-il le mieux ?

Un formulaire multi-étapes est un formulaire qui divise les questions ou les champs de saisie en plusieurs étapes ou pages, au lieu de les présenter tous en même temps. Cette approche rend les formulaires longs moins intimidants et plus faciles à remplir pour les utilisateurs en divisant votre formulaire en sections plus petites.

Les formulaires multi-étapes sont idéaux pour des tâches comme les inscriptions, les réservations, les sondages, et d'autres soumissions de formulaires détaillés. Vous pouvez facilement créer des formulaires multi-étapes pour divers objectifs, que ce soit un formulaire conversationnel, un simple formulaire de contact, ou un flux de génération de leads plus complexe. Cette flexibilité vous permet de diviser le formulaire en plusieurs étapes selon vos besoins. Voici pourquoi ils valent la peine d'être utilisés :

• Engagement utilisateur amélioré : diviser votre formulaire en plusieurs parties gérables les rend moins accablants et maintient plus les utilisateurs engagés.
• Meilleure convivialité : des indicateurs de progression guident les utilisateurs et montrent combien du formulaire reste, rendant le processus plus court et structuré.
• Taux de complétion plus élevés : les utilisateurs sont plus susceptibles de terminer les formulaires quand ils sont plus faciles à naviguer et ne semblent pas trop longs.
• Logique conditionnelle : les formulaires multi-étapes peuvent collecter uniquement les informations pertinentes en s'adaptant dynamiquement en fonction des saisies utilisateur.
• Conversions accrues : en réduisant la fatigue des formulaires et en créant une expérience fluide, les formulaires multi-étapes peuvent considérablement augmenter les taux de soumission.

Comment créer un formulaire multi-étapes dans WordPress avec Claspo

Claspo est un créateur de formulaires multi-étapes WordPress simple et flexible pour les tâches quotidiennes. Vous pouvez créer un formulaire multi-étapes gratuit pour WordPress qui a fière allure sur n'importe quel appareil, prend en charge plusieurs langues, et s'intègre avec les outils de marketing populaires. Avec Claspo, vous ne faites pas que ajouter le formulaire, vous créez un flux de travail qui attire des clients potentiels et construit des relations avec eux.

Étape 1 : Installez le plugin Claspo

Tout d'abord, vous devez intégrer le plugin de création de formulaires Claspo avec votre tableau de bord WordPress. Claspo fonctionne comme un assistant de formulaire WordPress, rendant facile l'installation et la personnalisation de vos formulaires sans codage. Voici ce que vous devez faire : 

1. Créez un compte pour utiliser notre créateur de widgets pour votre site Web.
2. Allez dans le magasin de plugins WordPress, recherchez "Claspo" et cliquez sur Télécharger.
3. Connectez-vous à votre panneau d'administration WordPress.
4. Naviguez jusqu'à Plugins > Téléverser.
5. Sélectionnez et téléversez le fichier.
6. Une fois installé, rendez-vous sur Claspo et trouvez l'ID du script. Dans le panneau latéral gauche, naviguez jusqu'à <>Script.
7. Vérifiez l'intégration, et c'est tout bon!

Étape 2 : Allez sur Claspo et créez un nouveau formulaire

Connectez-vous à votre compte Claspo, et commençons. Cliquez sur le bouton Nouveau Widget et sélectionnez Bibliothèque de modèles. Si vous vous sentez créatif, vous pouvez commencer avec un formulaire vierge et construire votre propre mise en page.

Vous serez introduit à notre catalogue de modèles. Dans le filtre Caractéristiques, sélectionnez Multi-Étapes, et vous verrez tous les modèles de formulaire multi-étapes. Choisissez le thème du formulaire multi-étapes pour votre site WordPress.

Étape 3 : Concevez votre formulaire multi-étapes

À des fins de démonstration, nous utiliserons le modèle suivant :

Essayez ce modèle

Ce formulaire de contact WordPress comporte déjà trois étapes :

• La première étape du formulaire recueille des informations personnelles.
• La deuxième partie du formulaire collecte l'email et l'âge.
• L'étape suivante du formulaire capture les coordonnées et la date souhaitée du cours.

Nous allons personnaliser chacune des sections de votre formulaire ensemble. Commençons par le formulaire de demande principal.

Nous allons remplacer le champ du nom de famille par un champ pour permettre aux utilisateurs de partager leur âge. Cela nous donnera une idée de l'audience intéressée par nos cours et pourra nous aider à préparer les groupes. Nous remplacerons également le texte sous le titre par un texte plus engageant qui ajoute de la rareté.

Passons à la page suivante. Nous demanderons l'email de l'utilisateur et découvrirons son style de danse préféré. Comme avec le premier formulaire, nous supprimerons un champ par défaut et le remplacerons par une saisie de texte. Nous ajouterons également du texte sous le titre pour mieux expliquer pourquoi nous demandons ces informations. Puisque nous avons déjà demandé le nom de la personne, nous pouvons ajouter une balise de fusion pour personnaliser cette étape.

Et pourquoi ne pas remplacer l'image pour rendre le formulaire encore plus dynamique ? Imaginez que notre entreprise enseigne différents styles — c'est une excellente occasion pour le renforcer.

Et pour la dernière page, nous remplacerons également le texte par défaut et l'image et rendrons le champ du téléphone facultatif.

C'est intelligent d'ajouter un bouton Retour ici au cas où les utilisateurs voudraient modifier quelque chose qu'ils ont entré plus tôt. Il suffit d'ajouter un deuxième bouton à l'étape, de cliquer dessus, d'ouvrir l'onglet Général, et de sélectionner « Page précédente » sous « Action au clic ». Ainsi, les utilisateurs peuvent revenir en arrière et faire des modifications à tout moment.

Voilà. Maintenant, nous devons simplement personnaliser les pages de réussite et d'erreur. Ajoutons plus de détails sur ce à quoi s'attendre ensuite et ajoutons un tag de fusion avec le prénom pour personnaliser les entrées du formulaire.

Étape 4 : Ajuster les règles d'affichage

Maintenant que le design est prêt, parlons des paramètres d'affichage. Ce formulaire particulier sur l'interface utilisateur est destiné à être utilisé pour empêcher la sortie du site, donc nous activerons l'option Intention de sortie.

Cependant, vous pouvez utiliser ce widget et tout autre type de formulaire comme formulaire d'inscription. Les règles de Claspo vous donnent beaucoup de flexibilité pour rendre votre ciblage extrêmement précis. Par exemple, vous pouvez choisir sur quelles pages le popup apparaît ou cibler les utilisateurs par leur pays ou leur ville. Pourquoi ne pas créer des popups uniques avec des récompenses spéciales pour différents lieux ? Vous pouvez même utiliser des paramètres UTM pour vous assurer que le popup s'intègre naturellement dans une campagne plus large.

Vous avez peut-être remarqué trois déclencheurs supplémentaires disponibles :

• Déclencheur de lanceur : un lanceur est une petite icône qui reste dans le coin inférieur de la page. Les utilisateurs peuvent cliquer dessus pour ouvrir le popup quand ils le souhaitent. Vous pouvez le configurer lors de la première étape de création du popup ou l'ajouter plus tard. C'est parfait pour donner aux utilisateurs plus de contrôle.
• Déclencheur de clic HTML : cela vous permet d'utiliser n'importe quel élément cliquable sur la page pour afficher le popup. Par exemple, il pourrait apparaître lorsqu'une personne clique sur une image, un bouton ou un lien texte.
• Déclencheur API : cette option vous permet de contrôler de manière programmatique quand et comment les popups sont affichés. C'est idéal pour une personnalisation avancée, une intégration avec d'autres services, ou pour améliorer l'expérience utilisateur, mais cela nécessite quelques connaissances techniques.

C'est donc à vous de choisir comment utiliser le formulaire ; pour ce guide, nous nous en tiendrons à la prévention de la sortie. 

Étape 5 : Intégrez vos formulaires avec ESP ou CRM

La dernière étape consiste à connecter Claspo à vos autres outils, tels qu'un CRM ou un fournisseur de services d'email. Cela permet aux informations collectées par le formulaire de créer automatiquement des leads dans votre CRM ou de déclencher des campagnes email. Une fois que les utilisateurs soumettent le formulaire, toutes les données collectées sont traitées et transférées en toute sécurité.

Claspo s'intègre à de nombreux outils logiciels populaires. Choisissez simplement ceux dont vous avez besoin et mappez les champs pour vous assurer que toutes les informations sont correctement enregistrées.

Si un fournisseur de logiciel ne figure pas dans la liste, vous pouvez créer un webhook et transférer des informations du formulaire vers pratiquement n'importe quel système.

Étape 6 : Tester et optimiser

Claspo facilite le test et l'optimisation de vos formulaires WordPress avancés. Vous pouvez configurer des tests A/B en quelques clics seulement, et Claspo recueillera les statistiques de performance de vos widgets du site. Cela aide à identifier les points faibles tels que l'abandon du formulaire ou la fatigue de l'utilisateur, vous permettant d'ajuster votre conception pour de meilleurs résultats.

Pour des perspectives encore meilleures, utilisez des outils de heatmap ou d'autres logiciels pour voir comment les utilisateurs remplissent le formulaire, puis appliquez ces données pour réaliser des tests plus efficaces dans Claspo.

Étape pour créer un formulaire pas à pas WordPress avec du code personnalisé

Créer un formulaire multi-étapes WP à partir de zéro est plus qu'une tâche de conception ; c'est un effort collaboratif qui nécessite la contribution de divers rôles pour garantir à la fois fonctionnalité et expérience utilisateur fluide. Selon la complexité du formulaire utilisant du code personnalisé, vous pourriez avoir besoin de :

• Un designer UI/UX pour créer un design intuitif.
• Un développeur frontend pour implémenter l'interface et la logique de navigation, y compris toute configuration nécessaire des blocs de pause de page de formulaire.
• Un développeur backend pour gérer le stockage et le traitement des données.
• Un spécialiste QA pour tester le formulaire sur différents appareils et scénarios.

Pour un formulaire simple que vous souhaitez créer, ce processus pourrait prendre à une petite équipe environ 20-40 heures. Cependant, des formulaires complexes avec des fonctionnalités avancées comme la validation en temps réel ou des intégrations pourraient nécessiter 60-100+ heures, selon l'ampleur.

Étape 1. Définir l'objectif et la structure

La base d'un formulaire multi-étapes commence par la compréhension de son objectif. Cela nécessite une collaboration entre les parties prenantes et les chefs de produit pour identifier le but du formulaire et le type d'informations nécessaires. Les informations sont ensuite décomposées en étapes logiques pour assurer un flux naturel.

Étape 2. Concevoir l'interface utilisateur

Une fois la structure définie, l'accent est mis sur la conception de l'apparence et du fonctionnement du formulaire. Un designer UI/UX crée un plan visuel. L'étape de conception est cruciale pour garantir la clarté et la facilité d'utilisation, car ceux-ci impactent directement l'engagement des utilisateurs et les taux de complétion. 

Étape 3. Développer le Frontend

À ce stade, le formulaire commence à prendre forme grâce au développement frontend. En utilisant le design comme guide, le développeur frontend crée la mise en page pour chaque étape et implémente le système de navigation. Cela peut inclure la configuration d'une option de conteneur de formulaire pour organiser proprement les éléments et les étapes du formulaire. 

Étape 4. Ajouter validation et retour d'information

La validation assure l'exactitude et la complétude des informations collectées. La validation des entrées peut se produire en temps réel sur le frontend ou après soumission sur le backend. 

Par exemple, le système peut vérifier que les adresses e-mail sont correctement formatées ou que les champs de formulaire requis ne sont pas laissés vides. Fournir un retour instantané tient informés les utilisateurs des erreurs ou des détails manquants, réduisant la frustration et assurant la qualité des données.

Étape 5. Implémenter la gestion des données

Avec la navigation et la validation en place, l'attention se tourne vers la gestion des données. Le développeur backend veille à ce que les informations soumises par les utilisateurs soient capturées et stockées de manière sécurisée. 

Cela implique la mise en place de serveurs ou d'APIs pour recevoir les données et les enregistrer dans une base de données sécurisée. Dans les cas où le formulaire est complexe ou s'intègre avec des outils tiers, un travail supplémentaire sur le backend peut être nécessaire pour gérer ces connexions de manière fluide.

Étape 6. Test et amélioration

Avant que le formulaire multi-étapes ne soit prêt pour les utilisateurs, il doit être rigoureusement testé pour s'assurer que tout fonctionne comme prévu. Les tests identifient également les problèmes potentiels d'expérience utilisateur, qui sont traités à cette étape. Raffiner le formulaire sur la base de ces informations garantit un produit final soigné.

Types de formulaires qui convertissent mieux en format multi-étapes

Tout comme il existe des meilleures utilisations pour les formulaires simples à une étape, les formulaires multi-étapes WordPress sont parfaits pour :

1. Formulaires d'inscription

Prenons un formulaire d'inscription à une newsletter. Avec l'aide d'un formulaire d'inscription multi-étapes gratuit pour WordPress, vous pouvez faire d'une pierre deux coups : créer un processus d'inscription convivial et recueillir des informations précieuses pour envoyer les newsletters que vos lecteurs souhaitent lire.

Utiliser ce modèle

2. Formulaires de génération de leads

Les formulaires multi-étapes améliorent les efforts de génération de leads en vous permettant de collecter des informations détaillées sur les prospects sans les submerger. Cela, à son tour, facilite l'évaluation et la catégorisation des prospects pour déterminer leur probabilité de devenir des clients payants.

Utiliser ce modèle

3. Enquêtes et retours 

Le nombre optimal de questions pour un formulaire de retour multi-pages varie en fonction de l'objectif de l'enquête, du public et du temps souhaité pour la compléter. Cependant, les recherches suggèrent que 5 à 15 questions sont généralement suffisantes pour obtenir des informations significatives. Si vous regroupez vos questions judicieusement et divisez le formulaire en étapes, vous faciliterez l'engagement des utilisateurs.

Utiliser ce modèle

4. Formulaires de précommande 

Utiliser des formulaires multi-étapes dans WordPress pour collecter des précommandes permet aux utilisateurs de valider facilement les informations à chaque étape, ce qui peut aider à réduire les erreurs. Étant donné que chaque étape suit logiquement la précédente, il est plus difficile de manquer des champs critiques ou de saisir des données incorrectes.

Utiliser ce modèle

5. Formulaire d'inscription multi-étapes WordPress

Pour les inscriptions, il est préférable de créer un formulaire multi-étapes plutôt que de submerger les utilisateurs avec des formulaires plus longs. Diviser le formulaire en sections — comme les informations personnelles, la configuration du compte, et les préférences — aide les gens à rester concentrés et à terminer.

Avec Claspo, créer des formulaires comme celui-ci est facile. Vous contrôlez tous les paramètres du formulaire : champs obligatoires, étapes, et flux. Et si vous avez besoin de modifications, les mises à jour sont simples. En fin de compte, ce formulaire fonctionne mieux pour les utilisateurs et votre entreprise.

Utiliser ce modèle

Conseils UX pour améliorer la conversion du formulaire WP à disposition multi-étapes

Même si vous utilisez un plugin ou un constructeur gratuit, un bon design fait toujours la plus grande différence. Voici quelques conseils UX simples pour vous aider à créer un formulaire WordPress multi-étapes qui non seulement a fière allure, mais convertit également les visiteurs en prospects ou clients.

Indicateurs de progression du formulaire

Un élément crucial d'un formulaire WP multi-étapes réussi est une indication claire de la progression. Les utilisateurs aiment savoir où ils en sont et quel effort supplémentaire est requis pour terminer. Une barre de progression ou des indicateurs d'étape en haut du formulaire multi-parties sont des outils excellents pour visualiser la progression des pages de formulaire.

Si vous utilisez des modèles de formulaire multi-étapes de Claspo, ce conseil est inclus. Tous les formulaires sont fournis avec des indicateurs de progression, mais vous pouvez les ajuster à votre convenance. Par exemple, au lieu d'une barre de progression, vous pouvez ajouter des pages de point de contrôle qui indiquent aux utilisateurs où ils en sont dans la progression. 

Une étape = une tâche

Il est tout aussi important de regrouper intelligemment les informations connexes. Par exemple, une étape peut se concentrer uniquement sur les détails personnels, une autre sur les informations de contact, etc. 

Vous trouverez de nombreux exemples de formulaires multi-étapes suivant cette approche — chaque section a un but clair, permettant aux utilisateurs de se concentrer sur l'accomplissement d'une tâche à la fois. Pour soutenir cela, gardez chaque étape concise, idéalement avec pas plus de cinq à sept champs, et utilisez des titres pour indiquer clairement le but de chaque section.

Indications et instructions

Lorsque vous créez votre formulaire multi-étapes dans WordPress, fournissez le contexte et des instructions claires. Les utilisateurs sont plus susceptibles de remplir les formulaires lorsqu'ils comprennent clairement pourquoi certaines informations sont demandées et comment remplir certains champs.

Ajoutez des descriptions courtes et utiles en haut de chaque étape. Par exemple, une étape demandant des détails sur l'adresse pourrait inclure une note telle que : "Veuillez fournir l'adresse où vous souhaitez que vos articles soient livrés." 

Confirmations et écrans d'erreur

Les derniers moments de l'interaction d'un utilisateur avec votre formulaire multi-étapes peuvent laisser une impression durable sur votre entreprise. Un écran de confirmation bien conçu offre rassurance et clarté, aidant les utilisateurs à savoir que leurs actions ont été réussies. Si vous créez des formulaires multi-étapes avec un plugin de formulaire multi-étapes WordPress comme Claspo, vous pouvez facilement personnaliser ces écrans pour correspondre à votre marque. 

Utilisez un ton amical qui reflète votre marque et des indicateurs visuels, comme une coche verte ou une icône de célébration, pour renforcer le succès. Inclure un appel à l'action (CTA) clair, tel qu'explorer leur compte ou retourner à la page d'accueil, peut guider les utilisateurs en douceur vers leur prochaine étape.

Les écrans d'erreur, en revanche, doivent clairement expliquer ce qui s'est mal passé et fournir des étapes concrètes pour résoudre le problème. La spécificité est essentielle — les utilisateurs ont besoin d'un chemin clair à suivre. Utilisez un ton de soutien et proposez des solutions comme un bouton "Réessayer" ou des conseils de dépannage pour réduire la frustration et maintenir la confiance.

Comme les barres de progression, ces écrans sont l'option par défaut dans Claspo. Nous les avons simplement ajoutés pour chaque page de votre formulaire multi-étapes. 

Utilisabilité sur mobile

Rendre vos formulaires multi-étapes optimisés pour le mobile est non négociable. Alors que la taille moyenne des écrans d'aujourd'hui varie de 6,1 pouces à 6,7 pouces en diagonale — ce qui peut sembler suffisant — vous devez vous assurer que votre formulaire est facile à interagir avec. 

Les champs et les boutons doivent être suffisamment grands pour être facilement tapés, et tous les éléments doivent s'empiler verticalement pour éviter le défilement horizontal. Vous pourriez également vouloir désactiver les grandes images ou vidéos pour économiser de l'espace.  

Dilemme entre plugin WordPress pour formulaire multi-étapes et code personnalisé

Vous êtes donc confronté à un choix : créer un code personnalisé ou utiliser un plugin WordPress pour formulaire multi-étapes comme Claspo. Décomposons cela par facilité d'utilisation, délai de mise sur le marché et coût — trois facteurs clés pour les marketeurs qui ont besoin de résultats rapides.

Facilité d'utilisation

Le code personnalisé nécessite des compétences en codage, ce qui peut être chronophage et compliqué à gérer, surtout pour les marketeurs qui veulent se concentrer sur leurs campagnes. En revanche, Claspo propose un créateur de formulaires WordPress simple, sans code, que tout le monde peut utiliser. Vous n'avez pas besoin d'expertise technique — il suffit de glisser-déposer et de personnaliser. Même des configurations plus complexes comme un formulaire multi-étapes avec logique conditionnelle peuvent être réalisées facilement avec l'interface de Claspo.

Délai de mise sur le marché

Construire des formulaires personnalisés peut prendre des jours (ou même des semaines) de développement et de tests. Avec Claspo, vous pouvez gérer la création de formulaires et lancer un formulaire multi-étapes WP gratuitement et en moins de 15 minutes. Cette rapidité vous permet de tester rapidement de nouvelles idées, d'ajuster en cours de route et de maintenir vos efforts marketing agiles.

Coût

Le codage personnalisé nécessite un investissement substantiel, en tenant compte des frais de développeur et des coûts de maintenance potentiels. Le codage personnalisé nécessite un investissement substantiel, en tenant compte des frais de développeur et des coûts de maintenance potentiels. En revanche, le plugin de créateur de formulaire WordPress de Claspo a un plan gratuit à vie, ce qui signifie que vous pouvez créer des formulaires sans coût. C'est une option économique pour les marketeurs souhaitant expérimenter sans risque financier.

En résumé

Pour les marketeurs, le plugin de formulaire magique WordPress de Claspo est le choix évident. Il est gratuit, convivial et rapide, vous permettant de donner vie à vos idées sans tracas. Pourquoi passer du temps et de l'argent sur un développement personnalisé quand vous pouvez obtenir les mêmes résultats (ou même meilleurs) en quelques minutes avec Claspo?