Comment ajouter un formulaire en plusieurs étapes dans WordPress en 5 étapes faciles

Saviez-vous que la conversion de votre formulaire WordPress en une seule étape en un formulaire WordPress en plusieurs étapes peut augmenter votre conversion de près de 60 % ? En fait, dans certains cas, le taux de conversion peut atteindre 300 % .

Oui. Parce que de nos jours, les gens sont trop occupés et ont une courte durée d'attention. En plus de cela, si vous leur demandez de remplir un long formulaire en une étape, ils sont plus susceptibles de quitter votre site Web, laissant le formulaire incomplet.

Cependant, vous pouvez modifier ce scénario en utilisant un formulaire en plusieurs étapes pour votre site WordPress. Mais la question est comment ?

Eh bien, c'est pourquoi je suis ici pour vous montrer un guide étape par étape sur la façon d'ajouter un formulaire en plusieurs étapes dans WordPress.

Continuez à lire pour découvrir comment vous pouvez facilement créer un formulaire en plusieurs étapes sur un site Web WordPress en quelques minutes seulement….

Qu'est-ce qu'un formulaire en plusieurs étapes ?

Eh bien, comme son nom l'indique, il s'agit d'un formulaire à plusieurs étapes où les questions/champs de saisie sont divisés en différentes étapes plutôt que de tout mettre en une seule étape. Si vous recherchez une définition, voici comment HubSpot définit le formulaire en plusieurs étapes.

Un formulaire en plusieurs étapes est un long formulaire divisé en plusieurs parties. Ils sont utilisés pour rendre les longs formulaires moins intimidants et intimidants.

– Hub Spot

Les formulaires en plusieurs étapes remplacent essentiellement les formulaires longs avec trop de champs de saisie. Si vous avez un formulaire relativement plus petit, vous pouvez vous en tenir à un formulaire en une étape.

Maintenant que vous savez ce qu'est un formulaire en plusieurs étapes, examinons quelques-unes des raisons pour lesquelles vous devriez envisager d'ajouter un formulaire en plusieurs étapes à votre site WordPress.

Pourquoi utiliser le formulaire multi-étapes dans WordPress ?

Eh bien, la réponse simple est de faire monter en flèche votre taux de conversion. Les formulaires en plusieurs étapes deviennent de nos jours extrêmement populaires sur les sites Web avec des utilisations telles que les formulaires d'inscription, les formulaires de réservation, les formulaires de commande de nourriture, etc. Certaines des raisons pour lesquelles vous devriez également envisager d'utiliser le formulaire en plusieurs étapes sur votre site Web incluent :

• Les formulaires en plusieurs étapes fonctionnent mieux lorsqu'il s'agit d'attirer l'attention de l'utilisateur. En conséquence, les gens s'engagent davantage et remplissent leur formulaire de soumission plus souvent.
• Les utilisateurs trouvent que les étapes multiples sont plus conviviales et qu'elles offrent une meilleure facilité d'utilisation qu'un long formulaire en une étape.
• Puisqu'il existe une barre de navigation / barre de progression avec un formulaire en plusieurs étapes, les utilisateurs se sentent plus encouragés à remplir un formulaire en plusieurs étapes.
• Les formulaires conditionnels en plusieurs étapes sont parfaits pour collecter uniquement les données pertinentes dont vous avez besoin.
• En raison de tous les côtés positifs mentionnés ci-dessus, les formulaires en plusieurs étapes augmentent le taux de conversion.

Maintenant que vous savez que vous devez utiliser des formulaires en plusieurs étapes dans le site WordPress, il est temps de créer la configuration parfaite dont vous avez besoin pour créer votre formulaire en plusieurs parties.

Configuration dont vous avez besoin pour créer un formulaire WordPress en plusieurs étapes

En plus de WordPress, vous auriez besoin de deux plugins supplémentaires pour créer facilement des formulaires en plusieurs étapes dans WordPress. Ces plugins WordPress sont :

1. Élémentaire (version gratuite)
2. MetForm (Gratuit et Pro)

Elementor est le meilleur constructeur de pages WordPress et MetForm est l'un des plugins de formulaires multi-étapes WordPress à la croissance la plus rapide. Si vous avez besoin d'aide pour installer MetForm, vous pouvez consulter notre documentation sur l'installation de MetForm.

Une fois l'installation terminée, vous devez créer une page avec le générateur de pages Elementor avant de pouvoir utiliser Metform. Pour cela, allez dans Dashboard ⇒ Page ⇒ Add New .

Maintenant, fournissez un titre approprié, sélectionnez Elementor Full Width comme modèle, cliquez sur Publis h. Après cela, cliquez sur Modifier avec Elementor.

Enfin, vous êtes prêt à créer votre formulaire en plusieurs étapes. Passons donc au processus principal.

Remarque : Dans ce didacticiel, je vais vous montrer comment ajouter un formulaire en plusieurs étapes à une page. Mais vous pouvez également ajouter facilement des formulaires créés avec MetForm dans une fenêtre contextuelle modale.

Comment créer un formulaire en plusieurs étapes dans WordPress

Dans ce blog, vous apprendrez à créer un formulaire multi-étapes d'aspect moderne à partir de zéro en seulement 5 étapes faciles :

Étape 1 : Faites glisser et déposez MetForm

Une fois que vous êtes en mode Modifier avec Elementor , recherchez MetForm et faites glisser et déposez à l'endroit où vous souhaitez que le formulaire apparaisse.

Étape 2 : créer un nouveau formulaire

Cliquez sur la section du formulaire pour accéder aux options Modifier MetForm . Cliquez sur le bouton Modifier le formulaire .

Une fois la nouvelle fenêtre popups

• Sélectionnez Nouveau (créer un nouveau formulaire)
• Fournir un nom de formulaire pour le formulaire
• Choisissez le modèle vierge,
• et cliquez sur le formulaire Modifier

Étape 3 : Créez un formulaire en plusieurs étapes à partir de zéro à l'aide de MetForm et du générateur de pages Elementor

Une fois que vous avez cliqué sur Modifier le formulaire, vous aurez accès à une autre nouvelle fenêtre avec le constructeur de pages Elementor pour créer votre formulaire à partir de zéro. Pour créer une seule étape d'un formulaire en plusieurs étapes, vous devez suivre ces quatre étapes :

Ajouter une toute nouvelle section

Faites glisser et déposez les champs de saisie en fonction des besoins

Faites glisser et déposez le bouton Précédent/Suivant/Soumettre en fonction de la phrase du formulaire

Donnez un nom propre à la section

Pour ce blog, je vais créer une démo du formulaire de réservation d'hôtel en 3 étapes en utilisant les étapes mentionnées ci-dessus. Les trois étapes du formulaire comprendront des informations personnelles, des informations de réservation et des informations supplémentaires.

Formulaire de réservation Première étape – Informations personnelles :

• Pour la section Informations personnelles, cliquez sur l' icône Elementor + et choisissez une structure à deux colonnes égales .

• Recherchez le champ de saisie de texte et faites glisser et déposez le champ de formulaire dans la colonne de gauche.

• Maintenant, pour modifier l'attribut de ce champ de saisie, cliquez sur le signe d'édition, allez dans Contenu ⇒ contenu et modifiez les options suivantes :
  • Afficher l'étiquette : activez cette option pour afficher l'étiquette du champ de saisie.
  • Position : vous pouvez choisir de positionner l'étiquette en haut ou à gauche.
  • Étiquette : Donnez un nom à votre étiquette. Je vais utiliser "Prénom".
  • Nom : le champ Nom est obligatoire et doit être unique. Assurez-vous donc de donner un nom différent à chaque champ et de remplacer l'espace par un trait de soulignement/trait d'union.
  • Espace réservé : fournissez un texte d'espace réservé.
  • Texte d'aide : si vous souhaitez fournir un texte d'aide aux utilisateurs, vous pouvez le faire ici.

• Ensuite, allez dans Contenu ⇒ Paramètres pour modifier les options suivantes :
  • Obligatoire : pour rendre ce champ de formulaire obligatoire, activez cette option.
  • Type de validation : vous pouvez définir différents types de validation pour le champ de texte en fonction de la longueur des caractères, de la longueur des mots et de l'expression.
  • Message d'avertissement : ici, vous pouvez définir le message d'avertissement qui s'affichera si l'exigence n'est pas remplie.

Remarque : J'utiliserai la fonction de logique conditionnelle à la deuxième étape de ce formulaire.

Tout comme le prénom, ajoutez un autre champ de saisie de texte pour le nom de famille. Dans le cadre de l'étape des informations personnelles, ici, je vais ajouter deux champs supplémentaires ; E-mail et numéro de portable.

Une fois que vous avez terminé de modifier les paramètres du champ E-mail et numéro de portable. Recherchez et faites glisser et déposez le bouton Étape suivante . Vous pouvez modifier différents paramètres de bouton tels que l'étiquette, l'alignement des boutons, l'icône, la position de l'icône, etc.

• Maintenant la section pour la première étape est prête, pour donner un nom propre à la première étape
  • Cliquez sur l'icône à six points pour ouvrir l'option des paramètres et accédez à la mise en page ⇒ multistep .
  • Indiquez un nom dans l'option Titre de l'onglet multi -étapes
  • Choisissez une icône dans la bibliothèque ou téléchargez un SVG.
  • Cliquez sur mettre à jour pour enregistrer.

Maintenant que la première section est prête, construisons la deuxième étape.

Deuxième étape du formulaire de réservation - Informations de réservation :

• Pour la deuxième étape, vous devez choisir une nouvelle section. Je vais choisir une nouvelle section avec une seule colonne, puis ajouter une nouvelle section interne avec deux colonnes égales.
• Après avoir choisi la colonne, faites glisser et déposez le champ de saisie des 2 dates pour les options d'arrivée et de départ.

Règle à suivre : vous devez choisir une nouvelle section pour démarrer la nouvelle étape , sinon, tout champ de saisie que vous ajoutez sera ajouté à l'étape précédente. Alors, rappelez-vous toujours que les nouvelles étapes nécessitent une nouvelle section même si elle a la même mise en page.

• En plus de l'option de paramètres mentionnée pour le champ de texte, vous obtenez les paramètres suivants pour le champ de saisie Date sous Contenu ⇒ Paramètres
  • Définir la date actuelle comme date minimale : activez cette option pour définir la date actuelle comme date minimale.
  • Définir la date minimale manuellement : si vous ne souhaitez pas définir la date actuelle comme date minimale, vous pouvez également définir la date minimale manuellement.
  • Définir la date maximale manuellement : Ici, vous pouvez définir la date maximale.
  • Désactiver la liste des dates : vous pouvez utiliser cette option pour désactiver certaines dates. Pour désactiver une date, cliquez sur le bouton +AJOUTER UN ARTICLE et sélectionnez la date.
  • Saisie de la plage de dates : en activant cette option, vous pouvez permettre aux utilisateurs de sélectionner une plage de dates. Mais pour ce formulaire, je laisserai cette option désactivée.
  • Saisie de l'année : activez cette option pour prendre une année dans le cadre de la saisie de la date.
  • Saisie du mois : pour activer le mois dans le cadre de la saisie de la date, activez cette option.
  • Saisie de la date : activez cette option pour prendre une date (jour) dans le cadre de la saisie de la date
  • Format de date : définissez ici le format de saisie de la date.
  • Localisation : choisissez l'emplacement dans la liste déroulante en fonction de vos préférences.
  • Vous voulez entrer du temps avec : activez cette option pour prendre le temps avec les données en entrée. Si vous activez cette option, vous obtiendrez une autre option qui est Enable time 24hr. En utilisant cette option, vous pouvez activer le format 24h.

Maintenant, enfin, nous allons utiliser la fonction de formulaire conditionnel pour le champ Check Out. Pour rendre le champ d'extraction visible uniquement lorsque le champ d'intégration est vide,

• Copiez la valeur du champ Nom du champ de saisie Check-In.
• Ensuite, allez dans Contenu ⇒ Conditionnel , activez l'option d'activation
• Choisissez ET dans la liste déroulante Critères de correspondance des conditions.
• Dans les options de la liste déroulante Action, choisissez Afficher ce champ .
• Cliquez sur + AJOUTER UN ÉLÉMENT , dans le champ de saisie si, collez la valeur du nom du champ d'enregistrement que vous avez copiée.
• Choisissez « non vide » dans le menu déroulant de Correspondance (comparaison).

Cliquez maintenant sur le bouton de prévisualisation pour voir. Le champ de départ ne doit être visible qu'une fois que vous avez choisi une date d'arrivée.

Ajoutez une nouvelle section interne pour que le formulaire ne paraisse pas mauvais lorsque l'option conditionnelle masque la vérification initialement. Faites glisser et déposez deux fois le champ du formulaire Nombre pour créer deux autres champs pour le nombre de chambres et le nombre de personnes.

Et comme il s'agit de l'étape intermédiaire, nous devons inclure les boutons Prev et Next .

Une fois que vous avez terminé de modifier les paramètres de tous les champs ajoutés pour cette section, modifiez le nom de la section/étape de layout ⇒ multistep comme vous l'avez fait avec la première section. Je l'appelle les informations de réservation.

Maintenant que la deuxième étape est prête, passons à la troisième étape

Troisième étape du formulaire de réservation - Informations supplémentaires

Pour la troisième étape, ajoutons une nouvelle section avec une seule colonne. Et ajoutez un champ de texte et nommez-le Informations supplémentaires.

Ensuite, ajoutez une section interne de deux colonnes dans la section. Après cela, faites glisser et déposez un bouton précédent, puis un bouton de soumission pour la soumission du formulaire.

Remarque : Vous pouvez ajouter autant de sections intérieures que vous le souhaitez. Mais pour créer une nouvelle étape, vous devez ajouter une nouvelle section.

Pour donner un nom à la troisième section, allez dans layout ⇒ multistep et ajoutez le titre « Additional Information » et ajoutez une icône.

Enfin, nous avons fini de construire notre formulaire WordPress multi-étapes en 3 étapes. Cliquez maintenant sur mettre à jour pour enregistrer et fermer la fenêtre pour passer aux paramètres en plusieurs étapes.

Étape 4 : Activer l'option de formulaire en plusieurs étapes de MetForm

Maintenant que nous avons notre formulaire, il est temps de le convertir en un formulaire fonctionnel en plusieurs étapes. Faire cela

• Allez dans Contenu ⇒ Paramètres multi-étapes
• Activez l'option Activer plusieurs étapes pour activer les options multi-étapes
• Activez l'affichage de la navigation en plusieurs étapes pour que le menu de la section s'affiche en haut. Vous pouvez également modifier les différents paramètres tels que la hauteur du conteneur de formulaire adaptatif, activer le défilement vers le haut, etc.
• Après avoir effectué toutes les modifications, cliquez sur mettre à jour pour enregistrer

Étape 5 : Configurer la confirmation, la notification et d'autres paramètres pour terminer

Maintenant que vous avez conçu votre formulaire en plusieurs étapes. Configurons tous les paramètres de formulaire que MetForm a à offrir. Pour modifier les paramètres MetForm depuis le tableau de bord WordPress, rendez- vous dans MetForm ⇒ Formulaires ⇒ Cliquez sur l'option Modifier du formulaire que vous venez de créer.

Remarque : Vous trouverez également ici le shortcode du formulaire que vous avez créé, qu'il vous suffit de copier-coller pour ajouter votre formulaire n'importe où sur le site Web. Vous pouvez également accéder aux paramètres du formulaire à partir de l'option Modifier le formulaire .

Vous trouverez ici les paramètres suivants :

Général:

Dans le cadre des paramètres généraux, vous pouvez modifier le titre, le message de réussite, la connexion requise, le nombre de vues , etc. Vous pouvez également définir toute URL personnalisée sur laquelle vous souhaitez que les utilisateurs accèdent après avoir soumis le formulaire.

Confirmation:

Vous pouvez envoyer un e-mail de confirmation à vos utilisateurs avec une copie de leur formulaire soumis avec ce plugin de création de formulaire. Activez l'option de confirmation , puis vous pouvez définir l' objet de l'e-mail, l'expéditeur de l'e-mail, l'expéditeur de l'e-mail, la réponse par e-mail à et le message de remerciement.

Paramètres de notification:

Vous pouvez également envoyer des e-mails de notification de formulaire à l'administrateur avec MetForm. Activez l'option Courrier de notification à l'administrateur. Définissez ensuite l'objet de l'e- mail, l'e-mail vers, l'e-mail de, la note d'administration , etc.

Après avoir effectué toutes les modifications, faites défiler vers le bas et cliquez sur enregistrer les modifications pour mettre à jour les paramètres.

Outre les paramètres que j'ai abordés dans ce blog, vous bénéficiez également d'une intégration telle que l' API REST, Mail Chimp, Google Sheet , etc. En outre, l'intégration d'une passerelle de paiement telle que PayPal, Stripe. Intégration CRM qui inclut HubSpot, Zoho, etc. Vous bénéficiez également d' options d'authentification telles que la connexion et l'enregistrement . Pour plus de détails sur ces paramètres, consultez notre documentation de MetForm.

Si vous avez correctement suivi les étapes mentionnées, vous devriez obtenir un formulaire de réservation en plusieurs étapes comme celui ci-dessous :

Conclure

Voilà, vous venez de créer votre formulaire multiétape WordPress en quelques minutes. Si vous pensez que ce formulaire est simple, ne vous inquiétez pas. L'objectif principal de ce blog était de montrer comment vous pouvez créer un formulaire en plusieurs étapes dans WordPress en utilisant MetForm.

Maintenant que vous savez comment créer un formulaire WordPress en plusieurs étapes, vous pouvez créer votre formulaire et votre logique personnalisés. J'espère que vous utiliserez les fonctionnalités de MetForm pour créer de merveilleux formulaires en plusieurs étapes. Si vous rencontrez des problèmes en cours de route, partagez-les avec nous, notre équipe vous répondra dès que possible.

N'oubliez pas de vérifier toutes les fonctionnalités étonnantes que MetForm a à offrir.