Utiliser des icônes pour les choix

Souhaitez-vous ajouter des options d'icônes à vos formulaires ? L'utilisation d'icônes dans les champs Choix multiples, Cases à cocher, Éléments multiples et Éléments de case à cocher est un moyen simple d'améliorer l'attrait visuel et l'expérience utilisateur de votre formulaire.

Ce tutoriel vous montrera comment ajouter des choix d'icônes à des champs existants ou nouveaux dans WPForms.

---

Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.

Configuration de votre formulaire

Une fois que vous aurez ouvert le constructeur de formulaires, vous pourrez ajouter des choix d'icônes à n'importe lequel des types de champs suivants :

• Choix multiples
• Cases à cocher
• Plusieurs articles
• Éléments de cases à cocher

Pour notre exemple, nous allons créer un formulaire de contact simple qui permet aux utilisateurs de choisir leur méthode de contact préférée, y compris par téléphone, SMS ou e-mail.

Pour commencer, nous allons ajouter un champ Choix multiples à notre formulaire en cliquant dessus ou en le faisant glisser dans la zone de prévisualisation du formulaire.

Ensuite, nous allons modifier les étiquettes de nos choix pour inclure les éléments suivants : Appel téléphonique, Message texte et E-mail.

Activation des choix d'icônes

Une fois cette configuration de base prête, nous activerons les choix d'icônes en activant l'option Utiliser les choix d'icônes.

Si c'est la première fois que vous configurez des choix d'icônes, vous verrez une superposition avec un message vous demandant de télécharger une bibliothèque d'icônes. Le téléchargement de la bibliothèque d'icônes est une étape obligatoire qui vous donne accès à plus de 2 000 icônes à utiliser dans vos formulaires.

Pour poursuivre le téléchargement, cliquez sur le bouton Continuer.

Ensuite, vous verrez une autre superposition vous informant que le téléchargement est en cours. Pour éviter toute interruption pendant l'installation, assurez-vous de ne pas fermer ou recharger la fenêtre du navigateur.

Une fois la bibliothèque d'icônes installée avec succès, cliquez sur le bouton OK pour enregistrer votre formulaire et recharger le constructeur de formulaires.

Sélection des icônes

Maintenant que nous avons activé les choix d'icônes, des icônes par défaut sont ajoutées à notre formulaire. Nous sélectionnerons de nouvelles icônes pour remplacer celles par défaut en cliquant sur chaque icône sur le côté gauche du constructeur de formulaires.

Ensuite, la fenêtre modale du sélecteur d'icônes apparaîtra. Ici, vous pouvez parcourir ou rechercher l'icône parfaite à utiliser dans votre formulaire.

Nous allons rechercher une icône de téléphone en tapant « téléphone » dans la barre de recherche.

Les résultats de la recherche afficheront toutes les icônes contenant « téléphone » dans leur nom. Nous allons cliquer sur l'icône téléphone pour la sélectionner comme première icône de choix.

Après avoir sélectionné une icône dans le sélecteur d'icônes, elle apparaîtra dans le constructeur de formulaires.

Allez-y et sélectionnez d'autres icônes à utiliser pour les choix restants dans votre formulaire en répétant ce processus.

Personnalisation des choix d'icônes

Une fois que vous avez sélectionné les icônes que vous souhaitez utiliser dans votre formulaire, il est temps de personnaliser leur apparence. WPForms facilite la personnalisation de la couleur, de la taille et du style des icônes, directement depuis le constructeur de formulaire. Nous aborderons chacune de ces options ci-dessous.

Couleur de l'icône

Par défaut, la couleur de l'icône est définie sur bleu. Vous pouvez facilement sélectionner votre couleur d'icône préférée en cliquant sur l'option Couleur de l'icône et en utilisant l'outil de sélection de couleur.

La couleur sélectionnée s'appliquera à tous les choix d'icônes pour le champ donné.

Taille de l'icône

Il existe 3 options de taille pour les choix d'icônes, notamment Petite, Moyenne et Grande. Pour changer la taille, cliquez sur le menu déroulant Taille de l'icône et sélectionnez la taille de votre choix.

Voici comment les options de taille se comparent sur le frontend :

La taille sélectionnée s'appliquera à tous les choix d'icônes pour le champ donné.

Style de choix d'icône

Il existe 4 options pour styliser les choix d'icônes, notamment Défaut, Moderne, Classique et Aucune. Pour changer le style de l'icône, cliquez sur le menu déroulant Style de choix d'icône et sélectionnez le style de votre choix.

Le style de choix d'icône sélectionné s'appliquera à tous les choix d'icônes pour le champ donné.

Nous allons passer en revue chacune des options de style disponibles ci-dessous :

Défaut

Le style Défaut ajoute une bordure arrondie, inclut une case à cocher ou un bouton radio visible, a un arrière-plan et une bordure colorés lorsqu'il est sélectionné, et affiche l'étiquette du choix à l'extérieur de la bordure.

Moderne

Le style Moderne ajoute une bordure arrondie, affiche l'étiquette du choix à l'intérieur de la bordure, et a une ombre portée et une bordure colorée lorsqu'il est sélectionné.

Classique

Le style Classique ajoute une bordure carrée et colorée lorsqu'il est sélectionné. L'étiquette du choix est affichée à l'intérieur de la bordure du choix sélectionné.

Aucun

Si vous ne souhaitez inclure aucun style spécial, sélectionnez l'option Aucune. Cette option affiche une case à cocher ou un bouton radio sur une seule ligne sous l'icône.

Sélection d'une disposition de choix

Pour sélectionner une disposition de la manière dont les choix d'icônes sont affichés dans votre formulaire, ouvrez l'onglet Avancé dans le panneau Options de champ.

Vous pouvez choisir parmi les 4 options de disposition suivantes pour afficher les choix : Une colonne, Deux colonnes, Trois colonnes et En ligne. La disposition que vous sélectionnez déterminera le nombre de colonnes utilisées pour afficher les choix.

Allez-y et cliquez sur le menu déroulant Disposition des choix et sélectionnez la disposition de votre choix.

Voici à quoi ressemblera le formulaire sur le frontend du site :

Questions fréquemment posées

Vous trouverez ci-dessous certaines des questions les plus fréquemment posées concernant l'utilisation des choix d'icônes.

Pourquoi les icônes ne s'affichent-elles pas sur mon formulaire ?

Si les choix d'icônes que vous avez ajoutés à votre formulaire ne s'affichent pas, il y a probablement un problème avec le dossier contenant la bibliothèque d'icônes. Pour résoudre ce problème, ouvrez simplement votre formulaire dans le générateur de formulaires et suivez les instructions pour réinstaller la bibliothèque d'icônes.

Pourquoi les icônes ne s'affichent-elles pas dans les entrées, les notifications par e-mail, les entrées imprimées, etc. ?

Les icônes sont utilisées pour améliorer l'apparence d'un formulaire et fournir des indices visuels aux utilisateurs, leur permettant ainsi de remplir le formulaire plus rapidement. Cependant, il ne faut pas s'y fier comme substitut aux étiquettes ou aux descriptions, car l'interprétation de la signification d'une icône peut varier. Seule la valeur d'une icône sélectionnée est incluse dans les entrées et les notifications par e-mail pour communiquer efficacement les informations soumises via votre formulaire.

C'est tout ! Vous savez maintenant comment ajouter des choix d'icônes à votre formulaire.

Ensuite, souhaitez-vous ajouter du contenu supplémentaire à vos formulaires ? Assurez-vous de consulter notre guide sur l'utilisation du champ Contenu pour apprendre à ajouter des titres, des listes, des médias, et plus encore à vos formulaires.