Comment créer des listes déroulantes conditionnelles dans les formulaires WordPress
Apprenez à créer des listes déroulantes conditionnelles dans WordPress à l’aide de formulaires Formidables. Une méthode simple, sans code et sans requête.
Vous cherchez un moyen de créer des listes déroulantes conditionnelles dans les formulaires où les options d’une liste déroulante dépendent des sélections effectuées par une personne dans les listes déroulantes précédentes?
Par exemple, un formulaire de concessionnaire automobile dans lequel un utilisateur sélectionne d’abord l’année de sa voiture, puis la marque, puis le modèle à partir d’une liste d’options qui ne s’appliquent qu’à l’année/marque qu’il a déjà sélectionnée. Vous avez peut-être également entendu ces types de formulaires appelés sélection enchaînée.
Cette fonctionnalité est très utile lorsque vous créez des formulaires pour gérer les estimations de prix, les devis, les paiements, etc. C’est également idéal pour les utilisateurs finaux car ils n’auront pas à filtrer des tonnes d’options non pertinentes.
Avec des formulaires formidables, vous pouvez configurer des listes déroulantes conditionnelles directement à partir d’une interface conviviale – pas besoin de vous encombrer de requêtes complexes ou de solutions de code personnalisées.
Continuez à lire pour un guide étape par étape sur la façon de créer des listes déroulantes dépendantes dans WordPress avec des formulaires formidables.
Comment créer des Listes Déroulantes conditionnelles Avec des formulaires Formidables
Avant de plonger dans le tutoriel détaillé étape par étape, examinons de haut niveau le fonctionnement des formulaires déroulants en cascade avec des formulaires Formidables.
- Créez un « formulaire de données » pour héberger toutes les données qui rempliront vos listes déroulantes en cascade. Les utilisateurs finaux n’interagiront pas directement avec ce formulaire – il est juste là pour conserver les données.
- Remplissez votre « formulaire de données » avec les données dont il a besoin en ajoutant des entrées. Si vous avez une tonne de données, vous pouvez gagner du temps en important un fichier CSV, plutôt que d’essayer de saisir manuellement toutes vos données.
- Créez un deuxième » formulaire utilisateur final « . C’est la forme avec laquelle vos visiteurs humains interagiront.
- Ajoutez des champs de recherche au « formulaire utilisateur final » afin qu’il puisse extraire des données du « formulaire de données » au besoin pour remplir les listes déroulantes.
Passons en revue plus en détail
Pour cet exemple, nous utiliserons un exemple de l’industrie automobile avec trois champs déroulants conditionnels. La commande ira comme ceci:
- L’utilisateur sélectionne l’année de sa voiture
- L’utilisateur sélectionne la marque de sa voiture parmi les marques disponibles pour cette année
- L’utilisateur sélectionne le modèle spécifique de sa voiture en fonction de l’année/marque qu’il a sélectionnée
Créer le « Formulaire de données »
Pour commencer, créez un nouveau formulaire pour agir comme votre « formulaire de données ». Encore une fois, vos utilisateurs finaux n’interagiront pas directement avec ce formulaire, mais le « formulaire utilisateur final » que vous créerez plus tard extraira ses données des entrées de ce formulaire.
Ajoutez ensuite un champ de texte pour chaque liste déroulante que vous souhaitez inclure dans votre formulaire d’utilisateur final. Pour notre exemple, ce serait trois champs de texte pour:
- Année
- Marque
- Modèle
Ensuite, enregistrez votre formulaire.
Importer des données sous forme d’entrées de formulaire
Ensuite, vous devrez remplir votre « formulaire de données » avec les options que vous souhaitez afficher dans vos listes déroulantes en cascade.
Pour ce faire, vous ajouterez chaque donnée en tant qu’entrée de formulaire.
Si vous avez un grand ensemble de données, la méthode la plus simple consiste à importer un fichier CSV. Par exemple, notre ensemble de données automobiles compte plus de 7 000 lignes – ce n’est pas quelque chose que vous voulez faire manuellement!
Si vous n’avez pas beaucoup de données, vous pouvez également ajouter manuellement des entrées à partir de l’onglet Entrées de votre formulaire de données.
Pour importer un fichier CSV dans Formidable Forms, assurez-vous d’abord que les en-têtes de votre fichier CSV correspondent aux champs de texte de votre « formulaire de données ».
Dans Excel, vous pouvez voir comment notre exemple CSV comporte trois colonnes, chacune correspondant aux champs de texte que nous avons créés à l’étape précédente:
Une fois votre fichier CSV prêt…
- Allez dans Formidable → Importer / Exporter
- Utilisez le bouton Choisir un fichier pour sélectionner votre fichier CSV
- Entrez le délimiteur CSV (il s’agit presque toujours d’une virgule)
- Sélectionnez votre « formulaire de données » dans la liste déroulante Importer dans le formulaire
- Cliquez sur Télécharger le fichier et importer
Sur l’écran suivant, assurez-vous que les données de votre fichier CSV sont correctement mappées aux champs correspondants de votre formulaire. Cliquez ensuite sur Importer:
Maintenant, vous avez les données dont vous avez besoin pour remplir vos listes déroulantes conditionnelles:
Ensuite, il est temps de créer des listes déroulantes dépendantes avec lesquelles vos visiteurs peuvent interagir.
Créez un « Formulaire Utilisateur final » et ajoutez des champs de recherche
Ensuite, créez un nouveau formulaire. Ce sera la forme que vos visiteurs humains verront.
Une fois que vous avez votre nouveau formulaire, ajoutez un champ de recherche et donnez-lui un nom, par exemple « Sélectionner une année ».
Ensuite, recherchez les paramètres des options de recherche dans le champ Paramètres et…
- Sélectionnez votre formulaire de données à l’aide de la liste déroulante Sélectionner le formulaire
- Sélectionnez le champ source pour extraire les données à l’aide de la liste déroulante Sélectionner le champ, par exemple » Année »
Assurez-vous d’enregistrer vos modifications.
Ajoutez ensuite un autre champ de recherche et configurez-le pour l’ensemble de données suivant. Seulement maintenant, vous utiliserez également le bouton Regarder un champ de recherche pour rendre ce champ de recherche dépendant du champ de recherche précédent. C’est ce qui vous permet d’afficher uniquement les options qui correspondent au champ précédent et de créer cet effet « en cascade:
Assurez-vous d’enregistrer vos modifications.
Pour ajouter la liste déroulante finale (pour notre exemple, au moins), vous devez ajouter un autre champ de recherche. Seulement maintenant, vous utiliserez l’option Regarder un champ de recherche pour le rendre dépendant des deux champs précédents:
Si vous souhaitez ajouter d’autres listes déroulantes conditionnelles à votre formulaire, vous pouvez répéter le même modèle autant de fois que nécessaire.
Et c’est tout – si vous prévisualisez votre formulaire, vous devriez voir ce bel effet de cascade lorsque vous interagissez avec votre formulaire:
Créez votre première liste déroulante conditionnelle Aujourd’hui
Les formulaires déroulants en cascade sont une approche populaire qui constitue une excellente option pour les formulaires impliquant des estimations de prix, des devis, des paiements, des emplacements, etc.
Avec Formidable Forms, vous pouvez créer des listes déroulantes conditionnelles en utilisant autant de conditions que nécessaire, sans écrire de requêtes ou de code personnalisés.
Pour le configurer, il vous suffit de créer deux formulaires et d’utiliser des champs de recherche pour les connecter. Pour les grands ensembles de données, vous pouvez même importer un fichier CSV directement depuis Excel pour remplir votre formulaire de données.
Pour créer des listes déroulantes dépendantes avec des formulaires Formidables, vous aurez besoin du plan de base Formidable Forms ou supérieur.
Si vous n’utilisez pas déjà Formidable Forms Pro, découvrez toutes les fonctionnalités utiles du générateur de formulaires pour comprendre pourquoi Formidable Forms est le meilleur plugin de formulaire WordPress pour les listes déroulantes conditionnelles.