Souhaitez-vous modifier l'aspect ou le fonctionnement des champs Dropdown de vos formulaires ? Il existe de nombreuses façons de personnaliser ce type de champ en fonction de vos besoins.
Ce tutoriel vous montrera toutes les façons de personnaliser le champ Dropdown dans WPForms.
- Modification de l'étiquette et de la description du champ
- Modifier, ajouter et supprimer des choix
- Générer des choix avec WPForms AI
- Exiger le champ
- Activation de la sélection d'options multiples
- Choix d'un style de champ déroulant
- Modification de la taille du champ
- Ajout d'un texte de remplacement
- Utilisation des choix dynamiques de la liste déroulante
- Masquer l'étiquette du champ
- Questions fréquemment posées
Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress. Ensuite, vous pouvez créer un nouveau formulaire ou éditer un formulaire existant pour ouvrir le constructeur de formulaire.
Si vous ne l'avez pas encore fait, ajoutez un champ Dropdown à votre formulaire en cliquant sur Dropdown dans la section Standard Fields du builder, ou en glissant-déposant ce champ dans la zone de prévisualisation du formulaire.
Modification de l'étiquette et de la description du champ
Tout d'abord, vous pouvez choisir de modifier l'étiquette et la description de votre champ déroulant. Cliquez sur le champ Dropdown que vous souhaitez personnaliser dans la zone de prévisualisation du formulaire pour ouvrir ses options.
Note : Vous voulez en savoir plus sur toutes les options de champs disponibles dans WPForms ? Consultez notre guide complet pour des conseils de personnalisation supplémentaires.
Modification de l'intitulé d'un champ
Par défaut, l'intitulé du champ est "Dropdown". Dans le panneau Options du champ, vous pouvez saisir votre propre étiquette personnalisée afin de donner à ce texte la valeur que vous souhaitez.
Ajout d'une description
Les descriptions de champ peuvent fournir aux utilisateurs plus de détails et d'instructions pour remplir votre formulaire. Vous pouvez en ajouter une à votre champ déroulant dans le champ Description du panneau Options du champ.
Note : Vous voulez apprendre d'autres façons d'ajouter des instructions à vos formulaires ? Consultez notre tutoriel sur l 'ajout de texte supplémentaire à vos formulaires.
Modifier, ajouter et supprimer des choix
Les champs déroulants permettent aux utilisateurs de choisir parmi plusieurs options. Vous pouvez personnaliser ces choix dans le panneau Options du champ.
Modification des choix de la liste déroulante
Pour personnaliser le texte de chacun de vos choix déroulants, saisissez l'étiquette souhaitée dans le champ prévu à cet effet.
Remarque : vous souhaitez savoir comment ajouter un choix conditionnel "Autre" à votre champ de sélection ? Consultez notre tutoriel sur la mise en place de ce type d'option pour les champs de sélection.
Pour réorganiser les choix de la liste déroulante, il suffit de les faire glisser et de les déposer dans l'ordre dans lequel vous souhaitez qu'ils apparaissent.
Vous pouvez présélectionner un choix en cliquant sur le bouton radio à gauche de son étiquette.
Remarque : pour plus de détails sur la présélection d'un choix dans votre champ Dropdown, consultez notre tutoriel sur l'ajout de valeurs par défaut à vos champs de formulaire.
Ajouter ou supprimer des choix déroulants
Pour ajouter un nouveau choix à votre champ déroulant, cliquez sur l'un des boutons bleus plus (+) situés à côté d'un choix existant dans les options du champ.
Le nouveau choix apparaît immédiatement après celui dont vous avez cliqué sur le bouton plus (+).
Si vous souhaitez ajouter plusieurs choix en même temps, cliquez sur Ajouter en bloc.
Saisissez ensuite chacun de vos nouveaux choix sur une ligne distincte. Une fois que vous avez saisi toutes les options que vous souhaitez inclure, cliquez sur Ajouter de nouveaux choix.
Vos nouveaux choix seront ajoutés après le dernier choix existant.
Remarque : vous souhaitez obtenir davantage d'informations sur l'ajout de choix à vos champs déroulants ? Consultez notre guide sur l 'ajout en bloc d'options aux champs de sélection.
Pour supprimer un choix de la liste déroulante, cliquez sur le bouton rouge moins (-) situé à côté.
Générer des choix avec WPForms AI
Vous pouvez également ajouter des choix à votre champ Dropdown en utilisant WPForms AI. Cette fonctionnalité vous permet de générer rapidement des choix pertinents basés sur votre requête. Pour utiliser WPForms AI, il suffit de cliquer sur le bouton Générer des choix situé sous la section Choix.
Note : Pour en savoir plus sur la génération de choix avec WPForms AI, n'oubliez pas de consulter notre tutoriel sur l'utilisation des choix AI.
Exiger le champ
En rendant votre champ Dropdown obligatoire, vous pouvez vous assurer que les utilisateurs effectuent une sélection avant de soumettre votre formulaire.
Pour rendre votre champ déroulant obligatoire, activez le paramètre Requis au bas des options du champ.
Si un utilisateur tente d'envoyer votre formulaire sans faire de sélection dans ce champ déroulant, il verra s'afficher le message suivant : "Ce champ est obligatoire".
Note : Vous souhaitez modifier le message que les utilisateurs verront s'ils essaient de soumettre un formulaire sans remplir un champ obligatoire ? Notre tutoriel sur la personnalisation des messages de validation contient tous les détails.
Activation de la sélection d'options multiples
En règle générale, les utilisateurs ne peuvent choisir qu'une seule option dans un champ déroulant. Toutefois, vous pouvez leur permettre de choisir plusieurs options en configurant certains paramètres dans les options avancées du champ.
Pour activer la sélection d'options multiples pour votre champ Dropdown, cliquez sur l'onglet Avancé dans le panneau Options du champ.
Activez ensuite le paramètre Sélection d'options multiples.
Remarque : vous avez besoin d'aide pour configurer la sélection d'options multiples ? Consultez notre tutoriel complet sur ce paramètre pour plus de détails.
Choix d'un style de champ déroulant
Deux styles sont disponibles pour le champ Dropdown : Moderne et Classique.
Style moderne de la liste déroulante
Le style Moderne apparaît avec une petite flèche remplie sur laquelle les utilisateurs peuvent cliquer pour élargir les choix du champ.
Aucun choix n'est présélectionné par défaut dans un champ Modern Dropdown.
Si vous activez la sélection d'options multiples, les utilisateurs verront le champ Dropdown typique. Lorsqu'ils cliqueront sur la flèche pour développer les choix disponibles, ils pourront cliquer sur autant d'options qu'ils le souhaitent pour ajouter leurs sélections au champ.
Chaque choix sélectionné est accompagné d'un bouton X sur lequel les utilisateurs peuvent cliquer pour le supprimer.
Remarque : pour personnaliser davantage le champ Modern Dropdown, par exemple en contrôlant le nombre de résultats de recherche affichés, consultez notre documentation destinée aux développeurs pour obtenir des options de configuration supplémentaires.
Style classique de la liste déroulante
Le champ déroulant de style classique apparaît avec une flèche ouverte sur laquelle les utilisateurs peuvent cliquer pour élargir les choix disponibles.
Par défaut, le premier choix figurant dans l'onglet Général du panneau Options du champ sera sélectionné, sauf si vous présélectionnez une autre option ou si vous ajoutez un texte de remplacement au champ.
Si la sélection d'options multiples est activée, les utilisateurs verront ce champ sous la forme d'une liste de choix. Ils peuvent cliquer sur une seule option pour la sélectionner ou appuyer sur la touche Shift de leur clavier pour sélectionner plusieurs éléments.
Les choix sélectionnés apparaissent en grisé.
Modification de la taille du champ
Vous pouvez ajuster la largeur de votre champ Dropdown dans votre formulaire publié en sélectionnant Petit, Moyen ou Grand dans le menu déroulant Taille du champ.
Cette option est particulièrement utile lors de la création d'une mise en page à plusieurs colonnes.
Note : Pour plus de détails sur la taille des champs, veuillez consulter notre guide complet sur les options de champs dans WPForms.
Ajout d'un texte de remplacement
Vous pouvez ajouter un texte de remplacement à votre champ déroulant pour donner aux utilisateurs des instructions supplémentaires sur la manière de faire leurs choix. Cette option permet également d'éviter qu'une liste déroulante classique ne présélectionne le premier choix.
Pour ajouter un texte de remplacement à votre champ déroulant, saisissez votre texte personnalisé dans le champ Texte de remplacement dans les options avancées du champ.
Note : Vous avez besoin de plus d'informations sur l'ajout d'un texte de remplacement dans vos champs Dropdown ? Consultez notre tutoriel sur l'utilisation de texte de remplacement dans WPForms pour plus d'informations.
Utilisation des choix dynamiques de la liste déroulante
Les champs déroulants peuvent extraire des données de votre site, telles que des taxonomies et des titres de contenu, pour les utiliser comme choix. Ces options seront automatiquement mises à jour dans vos formulaires lorsque vous les modifierez ailleurs sur votre site WordPress.
Pour activer les choix dynamiques, ouvrez les options de champ avancées. Sélectionnez ensuite Type de message ou Taxonomie dans la liste déroulante Choix dynamiques.
Note : Vous avez besoin d'aide pour configurer les choix dynamiques de votre champ Dropdown ? Consultez notre guide complet sur l'utilisation des valeurs dynamiques dans WPForms pour plus de détails.
Masquer l'étiquette du champ
Enfin, vous pouvez activer le paramètre Hide Label pour masquer l'étiquette de votre champ Dropdown dans votre formulaire intégré.
Remarque : nous vous recommandons d'ajouter une étiquette de champ dans les options générales pour votre champ Dropdown, même si vous masquez son étiquette sur le frontend. Cela vous permettra de vous assurer que votre champ Dropdown est toujours étiqueté dans les entrées de votre formulaire.
Questions fréquemment posées
Ci-dessous, nous avons répondu à quelques-unes des questions les plus fréquentes sur la personnalisation du champ Dropdown dans WPForms.
Puis-je modifier l'apparence du champ de la liste déroulante ?
Oui. Le CSS personnalisé vous permet de personnaliser l'aspect et la convivialité du champ Dropdown sur votre site. Toutefois, cela implique d'ajouter du code CSS à votre site et s'adresse aux utilisateurs qui ont des connaissances techniques. Pour en savoir plus, consultez notre tutoriel sur la personnalisation du champ Dropdown.
Voilà, c'est fait ! Vous pouvez maintenant personnaliser les champs Dropdown de vos formulaires pour qu'ils aient l'aspect et le fonctionnement que vous souhaitez.
Ensuite, vous voulez ajouter une logique conditionnelle à vos champs Dropdown ? Consultez notre tutoriel sur l'utilisation d'une logique conditionnelle intelligente dans WPForms.