Résumé IA
Souhaitez-vous modifier l'apparence ou le fonctionnement de vos champs déroulants ? Il existe de nombreuses façons de personnaliser ce type de champ pour répondre à vos besoins.
Ce tutoriel vous montrera toutes les façons dont vous pouvez personnaliser le champ déroulant dans WPForms.
- Modification du libellé et de la description du champ
- Modification, ajout et suppression des choix
- Génération de choix avec WPForms AI
- Champ obligatoire
- Activation de la sélection d'options multiples
- Choix d'un style de champ déroulant
- Modification de la taille du champ
- Ajout de texte d'espace réservé
- Utilisation des choix dynamiques déroulants
- 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. Vous pouvez ensuite créer un nouveau formulaire ou modifier un formulaire existant pour ouvrir le générateur de formulaires.
Si ce n'est pas déjà fait, ajoutez un champ déroulant à votre formulaire en cliquant sur Champ déroulant dans la section Champs standard du générateur, ou en faisant glisser ce champ dans la zone d'aperçu du formulaire.
Modification du libellé 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 déroulant que vous souhaitez personnaliser dans la zone d'aperçu du formulaire pour ouvrir ses options de champ.
Remarque : Vous souhaitez en savoir plus sur toutes les options de champ disponibles dans WPForms ? Consultez notre guide complet pour des conseils de personnalisation supplémentaires.
Modification de l’étiquette du champ
Par défaut, l'étiquette du champ sera « Champ déroulant ». Dans le panneau Options de champ, vous pouvez saisir votre propre étiquette personnalisée pour que ce texte soit ce que vous voulez.
Ajout d'une description
Les descriptions de champ peuvent fournir aux utilisateurs des détails et des instructions supplémentaires pour remplir votre formulaire. Vous pouvez en ajouter une à votre champ déroulant dans le champ Description du panneau Options de champ.
Remarque : Vous souhaitez découvrir d'autres façons d'ajouter des instructions à vos formulaires ? Consultez notre tutoriel sur comment ajouter du texte supplémentaire à vos formulaires.
Modification, ajout et suppression des choix
Les champs déroulants permettent aux utilisateurs de choisir parmi plusieurs options. Vous pouvez personnaliser ces choix dans le panneau Options de champ.
Modification des choix déroulants
Pour personnaliser le texte de chacun de vos choix déroulants, tapez l'étiquette souhaitée dans le champ prévu à cet effet.
Remarque : Vous souhaitez savoir comment ajouter un choix conditionnel « Autre » à votre champ déroulant ? Consultez notre tutoriel sur comment configurer ce type d'option pour les champs de sélection.
Pour réorganiser vos choix déroulants, faites-les simplement glisser et déposez-les 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 déroulant, consultez notre tutoriel sur l'ajout de valeurs par défaut à vos champs de formulaire.
Ajout ou suppression de choix déroulants
Pour ajouter un nouveau choix à votre champ déroulant, cliquez sur l'un des boutons bleus plus (+) à côté d'un choix existant dans les options de champ.
Le nouveau choix apparaîtra 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 Ajout en masse.
Entrez ensuite chacune de vos nouvelles options sur une ligne distincte. Une fois que vous avez entré toutes les options que vous souhaitez inclure, cliquez sur Ajouter de nouvelles options.
Vos nouvelles options seront ajoutées après la dernière option existante.
Remarque : Vous cherchez plus de conseils sur l'ajout d'options à vos champs de liste déroulante ? Consultez notre guide sur comment ajouter en masse des options aux champs de sélection.
Pour supprimer une option de votre champ de liste déroulante, cliquez sur le bouton rouge moins (-) à côté de celle-ci.
Génération de choix avec WPForms AI
Vous pouvez également ajouter des options à votre champ de liste déroulante à l'aide de l'IA WPForms. Cette fonctionnalité vous permet de générer rapidement des options pertinentes en fonction de votre invite. Pour utiliser l'IA WPForms, cliquez simplement sur le bouton Générer des options sous la section Options.
Note : Pour en savoir plus sur la génération de choix avec l'IA de WPForms, consultez notre tutoriel sur l'utilisation des choix IA.
Champ obligatoire
En rendant votre champ de liste déroulante obligatoire, vous pouvez vous assurer que les utilisateurs font une sélection avant de soumettre votre formulaire.
Pour rendre votre champ de liste déroulante obligatoire, activez le paramètre Obligatoire en bas des options du champ.
Si un utilisateur essaie de soumettre votre formulaire sans faire de sélection dans ce champ de liste déroulante, il verra un message indiquant : « Ce champ est obligatoire ».
Remarque : Souhaitez-vous 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
Généralement, les utilisateurs ne peuvent choisir qu'une seule option dans un champ de liste déroulante. Cependant, 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 de plusieurs options pour votre champ de liste déroulante, cliquez sur l'onglet Avancé dans le panneau Options du champ.
Ensuite, activez le paramètre Sélection de plusieurs options.
Remarque : Besoin d'aide supplémentaire pour configurer la sélection de plusieurs options ? Consultez notre tutoriel complet sur ce paramètre pour plus de détails.
Choix d'un style de champ déroulant
Il existe deux styles disponibles pour le champ de liste déroulante : Moderne et Classique.
Style de liste déroulante moderne
Le style moderne apparaît avec une petite flèche pleine que les utilisateurs peuvent cliquer pour développer les options du champ.
Aucune option n'est présélectionnée par défaut dans un champ de liste déroulante moderne.
Si vous activez la sélection de plusieurs options, les utilisateurs verront le champ de liste déroulante typique. Lorsqu'ils cliqueront sur la flèche pour développer les options disponibles, ils pourront cliquer sur autant d'options qu'ils le souhaitent pour ajouter leurs sélections au champ.
Chaque option sélectionnée aura un bouton X sur lequel les utilisateurs pourront cliquer pour la supprimer.
Remarque : Pour personnaliser davantage le champ de liste déroulante moderne, comme le contrôle du nombre de résultats de recherche affichés, consultez notre documentation pour les développeurs pour des options de configuration supplémentaires.
Style de liste déroulante classique
Le champ de liste déroulante de style classique apparaît avec une flèche ouverte que les utilisateurs peuvent cliquer pour développer les options disponibles.
Par défaut, la première option répertoriée dans l'onglet Général des Options du champ sera sélectionnée, sauf si vous présélectionnez une autre option ou ajoutez du texte d'espace réservé au champ.
Si la sélection de plusieurs options est activée, les utilisateurs verront ce champ sous forme de liste de choix. Ils peuvent cliquer sur une seule option pour la sélectionner, ou appuyer sur la touche Maj de leur clavier et sélectionner plusieurs éléments.
Les choix sélectionnés apparaîtront en surbrillance.
Modification de la taille du champ
Vous pouvez ajuster la largeur de votre champ Liste déroulante dans votre formulaire publié en sélectionnant Petit, Moyen, ou Grand dans la liste déroulante Taille du champ.
Cette option est particulièrement utile lors de la création d'une mise en page multicolonne.
Remarque : Pour plus de détails sur les tailles de champ, veuillez consulter notre guide complet des options de champ dans WPForms.
Ajout de texte d'espace réservé
Vous pouvez ajouter un texte d'espace réservé à votre champ Liste déroulante pour donner aux utilisateurs des instructions supplémentaires sur la façon de faire leurs choix. Cette option empêche également une liste déroulante classique de présélectionner le premier choix.
Pour ajouter un texte d'espace réservé à votre champ Liste déroulante, saisissez votre texte personnalisé dans le champ Texte d'espace réservé dans les options avancées du champ.
Remarque : Besoin de plus d'aide pour ajouter du texte d'espace réservé à vos champs Liste déroulante ? Consultez notre tutoriel sur l'utilisation du texte d'espace réservé dans WPForms pour plus d'informations.
Utilisation des choix dynamiques déroulants
Les champs Liste déroulante peuvent extraire des données de votre site, telles que les taxonomies et les titres de contenu, pour les utiliser comme choix. Ces options seront automatiquement mises à jour dans vos formulaires au fur et à mesure que vous les modifierez ailleurs sur votre site WordPress.
Pour activer les choix dynamiques, ouvrez les options avancées du champ. Sélectionnez ensuite Type de publication ou Taxonomie dans la liste déroulante Choix dynamiques.
Remarque : Besoin d'aide supplémentaire pour configurer les choix dynamiques de votre champ Liste déroulante ? 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 Masquer le libellé pour masquer le libellé de votre champ Liste déroulante dans votre formulaire intégré.
Remarque : Nous vous recommandons d'ajouter un libellé de champ dans les options générales du champ pour votre champ Liste déroulante, même si vous masquez son libellé sur le frontend. Cela garantira que votre champ Liste déroulante sera toujours étiqueté dans les entrées de votre formulaire.
Questions fréquemment posées
Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes sur la personnalisation du champ Liste déroulante dans WPForms.
Puis-je styliser l'apparence du champ Liste déroulante ?
Oui. Avec du CSS personnalisé, vous pouvez personnaliser l'apparence du champ Liste déroulante sur votre site. Cependant, cela implique l'ajout de code CSS à votre site et s'adresse aux utilisateurs avertis en technologie. Pour en savoir plus, consultez notre tutoriel sur la personnalisation du champ Liste déroulante.
Et voilà ! Vous pouvez maintenant personnaliser les champs Liste déroulante de vos formulaires pour qu'ils aient l'apparence et le fonctionnement que vous souhaitez.
Ensuite, souhaitez-vous ajouter une logique conditionnelle à vos champs Liste déroulante ? Consultez notre tutoriel sur l'utilisation de la logique conditionnelle intelligente dans WPForms.