Formulaire relativement petit, pouvez le faire étape par étape. Maintenant que savez déjà ce qu’est un module en plusieurs étapes, voyons pourquoi devriez envisager d’ajouter des modules en plusieurs étapes à votre site WordPress. Pourquoi utiliser des modules en plusieurs étapes dans WordPress? La réponse simple est damp;rsquoaugmenter votre taux de conversion. Aujourdamp;rsquohui, les modules Multi étapes sont très populaires sur les sites Web et leur utilisation comprend des formulaires damp;rsquoinscription, des formulaires de réservation, des formulaires de commande damp;rsquoaliments, etc. Voici quelques unes des raisons pour lesquelles devriez envisager damp;rsquoutiliser des modules en plusieurs étapes sur votre site Web:
Les modules en plusieurs étapes sont les meilleurs pour attirer lamp;rsquoattention des utilisateurs. Par conséquent, les gens participent davantage à des formulaires et les remplissent plus souvent. Lamp;rsquoutilisateur estime que plusieurs étapes sont plus intuitives et plus faciles à utiliser que les modules longs en une seule étape. Comme il y a une barre de navigation de progression avec un formulaire en plusieurs étapes, les utilisateurs sont encouragés à remplir le formulaire en plusieurs étapes. Les formulaires conditionnels en plusieurs étapes sont parfaits pour recueillir seulement les données pertinentes dont avez besoin. Grâce à tous ces avantages, les modules à plusieurs niveaux augmentent le taux de conversion. Maintenant que savez que devriez utiliser des modules Multi étapes dans votre site WordPress, il est temps de créer la configuration parfaite pour créer des modules Multi parties.
Configurer avez besoin de créer des modules Multi étapes WordPress avec wordpress, et avez besoin de deux autres plug ins pour créer facilement des modules Multi étapes dans WordPress. Ces plugins WordPress incluent: elementor (Free Edition) metform (free and Professional Editions) elementor est le meilleur générateur de page WordPress, et metform est l’un des plugins de modules Multi étapes de Word
Vous devez suivre les quatre étapes suivantes: ajouter une nouvelle section sur demande faire glisser et déposer les champs damp;rsquoentrée faire glisser et déposer précédent suivant soumettre bouton fournir votre propre nom pour la Section de ce blog selon la phrase du module, et je vais utiliser les étapes ci dessus pour créer un module en trois étapes de démonstration de réservation damp;rsquohôtel en plusieurs étapes. Les trois étapes du formulaire comprendront des renseignements personnels, des renseignements sur la réservation et damp;rsquoautres renseignements.
Étape 1 Renseignements personnels: dans la section renseignements personnels, cliquez sur lamp;rsquoicône Élément + et sélectionnez une structure avec deux colonnes égales. Rechercher les champs damp;rsquoentrée de texte et faire glisser et déposer les champs de formulaire dans la colonne de gauche. Maintenant, pour modifier les propriétés de ce champ damp;rsquoentrée, cliquez sur le symbole damp;rsquoédition, allez au contenu ⇒ contenu, puis changez lamp;rsquooption suivante: afficher lamp;rsquoétiquette: activez cette option pour afficher lamp;rsquoétiquette du champ damp;rsquoentrée. Emplacement: Vous pouvez choisir de placer lamp;rsquoétiquette en haut ou à gauche. Étiquettes: Étiquettes nommées. Je vais utiliser le nom Nom: le champ nom est obligatoire et doit être unique. Ensuite, assurez de spécifier un nom différent pour chaque champ et de remplacer lamp;rsquoespace par un trait damp;rsquounion trait damp;rsquounion. Substituant: fournit le texte du substituant. Texte damp;rsquoaide: souhaitez fournir un texte damp;rsquoaide aux utilisateurs, pouvez le faire ici. Ensuite, allez au contenu ⇒ paramètres pour modifier les options suivantes: obligatoire: pour rendre ce champ de formulaire obligatoire, activez cette option. Type de validation: différents types de validation peuvent être définis pour les champs de texte en fonction de la longueur des caractères, des mots et des expressions. Messages damp;rsquoavertissement: Vous pouvez définir ici les messages damp;rsquoavertissement qui seront affichés si les exigences ne sont pas respectées. Note: Je vais utiliser la fonction logique conditionnelle dans la deuxième étape de ques
Au module.
Comme un prénom, ajoutez un autre champ damp;rsquoentrée de texte pour le nom de famille. Dans le cadre de la phase des renseignements personnels, jamp;rsquoajouterai deux autres champs ici E mail et numéro de téléphone portable. Après avoir modifié les paramètres des champs e mail et numéro de téléphone. Rechercher et faire glisser et déposer le bouton suivant. Vous pouvez modifier différents paramètres de bouton, tels que les étiquettes, lamp;rsquoalignement des boutons, les icônes, lamp;emplacement des icônes, etc. Maintenant que la partie de la première étape est prête, pour nommer la première étape, cliquez sur lamp;rsquoicône en six points pour ouvrir les options de configuration, puis allez à la mise en page ⇒ Multi étapes. Fournissez un nom sur lamp;rsquooption multi pass card title pour sélectionner une icône dans la bibliothèque ou SVG. Cliquez sur mise à jour pour enregistrer. Maintenant que la première partie est prête, construisons la deuxième étape.
Formulaire de réservation Étape 2 renseignements sur la réservation: Étape 2, devez sélectionner une nouvelle section. Je vais sélectionner une nouvelle section avec une seule colonne, puis ajouter une nouvelle section interne avec deux colonnes égales. Après avoir sélectionné les colonnes, faites glisser et déposer le champ damp;rsquoentrée date2 pour les options check in et check out. Règle à suivre: Vous devez sélectionner une nouvelle section pour commencer la nouvelle étape, sinon tout champ damp;rsquoentrée ajouté sera ajouté à lamp;rsquoétape précédente. Par conséquent, gardez toujours à lamp;rsquoesprit que la nouvelle étape nécessite une nouvelle section, même si elle a la même disposition. En plus des options de réglage pour les champs de texte ci dessus, pouvez également obtenir les paramètres suivants pour le champ damp;rsquoentrée de date dans le contenu ⇒ définir la date actuelle à la date minimale: activez cette option pour définir la date actuelle à la date minimale. Définir manuellement la date minimale: ne voulez pas définir la date actuelle à la date minimale, pouvez également définir manuellement la date minimale. Définir manuellement la date maximale:
Vous pouvez définir la date maximale ici. 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 une date. Saisissez la date damp;rsquointervalle: activez cette option pour permettre à lamp;rsquoutilisateur de sélectionner une plage de dates. Mais pour ce module, je désactiverai cette option. Entrée de lamp;rsquoannée: activez cette option pour inclure lamp;rsquoannée dans lamp;rsquoentrée de date. Saisissez le mois: pour activer le mois dans le cadre de lamp;rsquoentrée de date, activez cette option. Insertion de date: activez cette option pour formater la date (jour) dans le format de date damp;rsquoinsertion de date: Définissez ici le format de la date damp;rsquoentrée. Emplacement: Sélectionnez un emplacement dans le menu déroulant en fonction de vos préférences. Pour saisir le temps: activez cette option pour saisir le temps avec les données. activez cette option, obtiendrez une autre option, qui est damp;rsquoactiver le temps de 24 heures. Utilisez cette option pour activer le format de 24 heures. Enfin, nous utiliserons la fonction module conditionnel comme champ de vérification. Pour rendre le champ check out visible seulement lorsque le champ check in est vide, copiez la valeur du champ Nom du champ check in. Ensuite, allez au contenu ⇒ critères et activez lamp;rsquooption select e dans le menu déroulant de la politique de correspondance des critères. Dans lamp;rsquooption action drop down, sélectionnez afficher ce champ. Cliquez sur + ajouter un article et collez la valeur copiée dans le champ damp;rsquoentrée pour le nom du champ enregistré. Sélectionnez non vide (comparer) dans le menu déroulant correspondant. Cliquez maintenant sur le bouton aperçu pour le voir. Le champ check out namp;rsquoest visible que lorsque la date damp;rsquoenregistrement est sélectionnée. Ajouter une nouvelle section interne afin que le module ne semble pas mauvais lorsque lamp;rsquooption de condition cache la vérification INI
En gros Faites glisser deux fois le champ du module numérique pour créer deux champs supplémentaires pour le nombre de chambres et de personnes. Comme il samp;rsquoagit damp;rsquoune étape intermédiaire, nous devons inclure les boutons précédent et suivant. Après avoir modifié les paramètres de tous les champs ajoutés à cette section, changez le nom de la section étape de la disposition en plusieurs étapes, comme lamp;rsquoavez fait pour la section 1. Jamp;rsquoappelle les réservations. Pour plus de détails sur la fonctionnalité du module condition metform, cliquez ici. Maintenant que lamp;rsquoétape 2 est prête, passons à lamp;rsquoétape 3 formulaire damp;rsquoabonnement Étape 3 renseignements supplémentaires pour lamp;rsquoétape 3, nous avons ajouté une nouvelle section avec une seule colonne. Et ajoutez un champ de texte et appelez le informations supplémentaires. Ensuite, ajoutez deux colonnes de sections internes à la section. Ensuite, faites glisser et déposer un bouton, puis faites glisser et déposer le bouton soumettre pour soumettre le formulaire. Remarque: Vous pouvez ajouter autant de sections internes que nécessaire. Mais pour créer une nouvelle étape, devez ajouter une nouvelle section. Pour nommer la troisième partie, allez à la mise en page ⇒ en plusieurs étapes, ajoutez le titre « informations supplémentaires» et ajoutez une icône. Enfin, nous avons complété la création du module multi étapes WordPress en 3 étapes. Cliquez maintenant sur Update pour enregistrer et fermer la fenêtre pour passer aux paramètres en plusieurs étapes. Étape 4: activez lamp;rsquooption metform Multi step form maintenant que nous avons un module, il est temps de le convertir en un module multi step fonctionnel. Aller au contenu ⇒ paramètres Multi étapes activer Multi étapes activer lamp;rsquooption multi étapes activer lamp;rsquoaffichage multi étapes de navigation pour afficher une partie du menu en haut. Vous pouvez également modifier différents paramètres tels que la hauteur du conteneur du module adaptatif, activer le défilement vers le haut, et plus encore. A après
avez terminé tous les changements, cliquez sur mise à jour pour enregistrer Étape 5: configurer les confirmations, les notifications et damp;rsquoautres paramètres à compléter après la conception du module en plusieurs étapes. Nous configurons tous les paramètres du module que metform doit fournir. Pour modifier les paramètres de metform à partir du tableau de bord WordPress, allez à metform ⇒ module ⇒ cliquez sur les options d’édition du formulaire que venez de créer. Remarque: ici, trouverez également le raccourci vers le formulaire que avez créé, que pouvez simplement copier et coller pour ajouter namp;rsquoimporte où sur le site. Vous pouvez également accéder aux paramètres du formulaire à partir de lamp;rsquooption modifier le formulaire. Vous trouverez ici les paramètres suivants: général: dans le cadre des paramètres généraux, pouvez modifier le titre, les messages de succès, les droits damp;rsquoaccès requis, les vues de comptage, etc. Vous pouvez également définir namp;rsquoimporte quelle URL personnalisée que voulez que les utilisateurs accèdent après avoir soumis le formulaire. Confirmation: Vous pouvez envoyer un courriel de confirmation à lamp;rsquoutilisateur en créant une copie du formulaire envoyé par le plug in. Activez les options de confirmation, puis pouvez définir le sujet du courriel, lamp;rsquoexpéditeur du courriel, lamp;rsquoexpéditeur du courriel, la réponse au courriel et les messages de remerciement. Paramètres de notification: Vous pouvez également utiliser metform pour envoyer un courriel de notification de formulaire à votre administrateur. Activez lamp;rsquooption envoyer un courriel de notification à lamp;rsquoAdministrateur. Ensuite, définissez le sujet du courriel, le destinataire du courriel, lamp;rsquoexpéditeur du courriel, les commentaires de lamp;rsquoAdministrateur, etc. Lorsque avez terminé toutes les modifications, faites défiler vers le bas et cliquez sur Enregistrer les modifications pour mettre à jour les paramètres. En plus des paramètres que jamp;rsquoai décrits dans ce blog, pouvez également obtenir lamp;rsquoAPI rest, mail Chimp, Google Sheets et plus encore. En outre, des passerelles de paiement intégrées telles que paypal, Stripe. Intégration CRM, y compris hubspot, zoho, etc. Vous pouvez également obtenir des options damp;rsquoauthentification telles que lamp;rsquoouverture de session et lamp;rsquoinscription.
Pour plus de détails sur ces paramètres, consultez notre documentation metform. suivez correctement les étapes énumérées, devriez obtenir un formulaire de réservation en plusieurs étapes comme suit: Il est également très facile de créer une invitation à travailler à lamp;rsquoaide du modèle de demande damp;emploi par défaut. Pour consulter le blog complet, cliquez ici. Ici, venez de créer le module multi étapes WordPress en quelques minutes. pensez que ce module est simple, ne inquiétez pas. Le but principal de ce blog est de montrer comment créer des modules en plusieurs étapes dans WordPress en utilisant metform. Maintenant que savez comment créer des modules WordPress en plusieurs étapes, pouvez créer vos propres modules personnalisés et logiques. Je veux que utilisiez les fonctionnalités de metform pour créer de merveilleux formulaires en plusieurs étapes. rencontrez des problèmes en cours de route, veuillez nous en faire part et notre équipe répondra dès que possible. Namp;rsquooubliez pas de regarder toutes les fonctionnalités étonnantes de metform. Comprendre les caractéristiques de metform
Comment ajouter un module multi étapes dans WordPress en 5 étapes simples
