Comment ajouter un module multi – étapes dans WordPress en 5 étapes simples

Formulaire relativement petit, vous pouvez le faire étape par étape. Maintenant que vous savez déjà ce qu’est un module en plusieurs étapes, voyons pourquoi vous 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 d’augmenter votre taux de conversion. Aujourd’hui, les modules Multi – étapes sont très populaires sur les sites Web et leur utilisation comprend des formulaires d’inscription, des formulaires de réservation, des formulaires de commande d’aliments, etc. Voici quelques – unes des raisons pour lesquelles vous devriez envisager d’utiliser des modules en plusieurs étapes sur votre site Web:
Les modules en plusieurs étapes sont les meilleurs pour attirer l’attention des utilisateurs. Par conséquent, les gens participent davantage à la présentation des formulaires et les remplissent plus souvent. L’utilisateur 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 vous avez besoin. Grâce à tous ces avantages, les modules à plusieurs niveaux augmentent le taux de conversion. Maintenant que vous savez que vous 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 vous avez besoin de créer des modules Multi – étapes WordPress avec wordpress, et vous 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 d’entré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 d’hôtel en plusieurs étapes. Les trois étapes du formulaire comprendront des renseignements personnels, des renseignements sur la réservation et d’autres renseignements.
Étape 1 – Renseignements personnels: dans la section renseignements personnels, cliquez sur l’icône Élément + et sélectionnez une structure avec deux colonnes égales. Rechercher les champs d’entré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 d’entrée, cliquez sur le symbole d’édition, allez au contenu ⇒ contenu, puis changez l’option suivante: afficher l’étiquette: activez cette option pour afficher l’étiquette du champ d’entrée. Emplacement: Vous pouvez choisir de placer l’é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 – vous de spécifier un nom différent pour chaque champ et de remplacer l’espace par un trait d’union \/ trait d’union. Substituant: fournit le texte du substituant. Texte d’aide: Si vous souhaitez fournir un texte d’aide aux utilisateurs, vous 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 d’avertissement: Vous pouvez définir ici les messages d’avertissement 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 d’entrée de texte pour le nom de famille. Dans le cadre de la phase des renseignements personnels, j’ajouterai 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, l’alignement des boutons, les icônes, l’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 l’icône en six points pour ouvrir les options de configuration, puis allez à la mise en page ⇒ Multi – étapes. Fournissez un nom sur l’option multi – pass card title pour sélectionner une icône dans la bibliothèque ou télécharger 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, vous 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 d’entré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 d’entrée ajouté sera ajouté à l’étape précédente. Par conséquent, gardez toujours à l’esprit 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, vous pouvez également obtenir les paramètres suivants pour le champ d’entré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: Si vous ne voulez pas définir la date actuelle à la date minimale, vous 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 d’intervalle: activez cette option pour permettre à l’utilisateur de sélectionner une plage de dates. Mais pour ce module, je désactiverai cette option. Entrée de l’année: activez cette option pour inclure l’année dans l’entrée de date. Saisissez le mois: pour activer le mois dans le cadre de l’entrée de date, activez cette option. Insertion de date: activez cette option pour formater la date (jour) dans le format de date d’insertion de date: Définissez ici le format de la date d’entré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. Si vous activez cette option, vous obtiendrez une autre option, qui est d’activer 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 l’option select e dans le menu déroulant de la politique de correspondance des critères. Dans l’option action drop – down, sélectionnez afficher ce champ. Cliquez sur + ajouter un article et collez la valeur copiée dans le champ d’entré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 n’est visible que lorsque la date d’enregistrement est sélectionnée. Ajouter une nouvelle section interne afin que le module ne semble pas mauvais lorsque l’option 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 s’agit d’une é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 vous l’avez fait pour la section 1. J’appelle les réservations. Pour plus de détails sur la fonctionnalité du module condition metform, cliquez ici. Maintenant que l’étape 2 est prête, passons à l’étape 3 formulaire d’abonnement Étape 3 – renseignements supplémentaires pour l’é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, vous 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 l’option 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 l’option multi – étapes activer l’affichage 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
Si vous avez terminé tous les changements, cliquez sur mise à jour pour enregistrer Étape 5: configurer les confirmations, les notifications et d’autres 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 vous venez de créer. Remarque: ici, vous trouverez également le raccourci vers le formulaire que vous avez créé, que vous pouvez simplement copier et coller pour ajouter n’importe où sur le site. 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, les messages de succès, les droits d’accès requis, les vues de comptage, etc. Vous pouvez également définir n’importe quelle URL personnalisée que vous voulez que les utilisateurs accèdent après avoir soumis le formulaire. Confirmation: Vous pouvez envoyer un courriel de confirmation à l’utilisateur en créant une copie du formulaire envoyé par le plug – in. Activez les options de confirmation, puis vous pouvez définir le sujet du courriel, l’expéditeur du courriel, l’expé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 l’option envoyer un courriel de notification à l’Administrateur. Ensuite, définissez le sujet du courriel, le destinataire du courriel, l’expéditeur du courriel, les commentaires de l’Administrateur, etc. Lorsque vous 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 j’ai décrits dans ce blog, vous pouvez également obtenir l’API 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 d’authentification telles que l’ouverture de session et l’inscription.
Pour plus de détails sur ces paramètres, consultez notre documentation metform. Si vous suivez correctement les étapes énumérées, vous devriez obtenir un formulaire de réservation en plusieurs étapes comme suit: Il est également très facile de créer une invitation à travailler à l’aide du modèle de demande d’emploi par défaut. Pour consulter le blog complet, cliquez ici. Ici, vous venez de créer le module multi – étapes WordPress en quelques minutes. Si vous pensez que ce module est simple, ne vous 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 vous savez comment créer des modules WordPress en plusieurs étapes, vous pouvez créer vos propres modules personnalisés et logiques. Je veux que vous utilisiez les fonctionnalités de metform pour créer de merveilleux formulaires en plusieurs étapes. Si vous rencontrez des problèmes en cours de route, veuillez nous en faire part et notre équipe vous répondra dès que possible. N’oubliez pas de regarder toutes les fonctionnalités étonnantes de metform. Comprendre les caractéristiques de metform