Ajouter des images aux étiquettes de cases à cocher à l'aide de CSS

Souhaitez-vous ajouter des images aux étiquettes de cases à cocher dans vos formulaires ? Vous pouvez améliorer l'attrait visuel de votre formulaire en ajoutant des images d'arrière-plan ou des icônes basées sur des polices à vos étiquettes de cases à cocher à l'aide de CSS. Par défaut, toutes les étiquettes de formulaire n'affichent que le texte que vous avez dans le générateur de formulaires.

Ce guide vous présentera deux méthodes différentes pour y parvenir.

En suivant les instructions de l'article, il est assez facile d'utiliser des images ainsi que du texte pour les étiquettes de votre champ de formulaire Case à cocher en utilisant une image ou même des icônes basées sur des polices.

Configuration du formulaire

Tout d'abord, créez votre formulaire et ajoutez un champ de formulaire Case à cocher. Si vous avez besoin d'aide pour créer votre formulaire, consultez notre guide sur la création de votre premier formulaire.

Notez l'ID de votre formulaire et l'ID du champ, car vous en aurez besoin lors de l'ajout du CSS. Si vous n'êtes pas sûr de la manière de trouver ces ID, veuillez consulter notre guide sur la façon de trouver les ID de formulaire et de champ.

Ajout d'images d'arrière-plan

La première méthode utilise des images d'arrière-plan téléchargées dans votre médiathèque WordPress. Si vous n'êtes pas sûr de la manière d'ajouter du CSS personnalisé à votre site, veuillez consulter notre tutoriel sur l'ajout de CSS à votre site.

Si vous souhaitez ajouter une image d'arrière-plan aux étiquettes du champ de formulaire Case à cocher, utilisez le CSS suivant.

Remplacez les valeurs suivantes dans le code CSS :

• Ligne 1 : Remplacez 1000 par l'ID de votre formulaire
• Ligne 1 : Remplacez field_25 par l'ID de votre champ
• Ligne 4 : Remplacez l'URL par le chemin de votre image
• Lignes 6-7 : Ajustez la hauteur et la largeur aux lignes 6-7 en fonction de la taille de votre image

Pour chaque option de case à cocher supplémentaire, copiez l'intégralité du bloc CSS et remplacez choice-1 par choice-2, choice-3, etc. Vous pouvez également utiliser différentes images pour chaque choix en modifiant l'URL de l'image d'arrière-plan.

Utilisation d'icônes basées sur des polices

La deuxième méthode utilise des icônes de polices, qui peuvent être plus légères et plus flexibles que les images d'arrière-plan. Tout d'abord, assurez-vous d'avoir une bibliothèque d'icônes de polices installée dans votre thème WordPress. Si vous avez besoin d'aide à ce sujet, consultez le guide de WPBeginner sur l'ajout de polices d'icônes à WordPress.

Vous pouvez également utiliser des images pour les étiquettes de cases à cocher en utilisant une police d'icônes basée sur des polices.

Tout comme avec le CSS précédent, nous ciblons l'ID du formulaire 1000 et l'ID du champ 25. Dans le CSS ci-dessous, vous verrez le -1000- qui fait référence à l'ID du formulaire.

ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
    font-family: dashicons;
    content: "\f173";
    display: inline-block;
    color: #000000;
    font-size: 16px;
    margin: 0px 5px;
    position: relative;
    top: 2px;
}

Questions fréquemment posées

Q : Puis-je utiliser ce CSS pour le champ de formulaire à choix multiples ?

R : Absolument ! Ces mêmes classes CSS sont également utilisées pour le champ de formulaire Choix multiples. N'oubliez pas de mettre à jour les ID de formulaire et de champ dans votre CSS.

Q : Pourquoi cela ne semble-t-il pas fonctionner pour mon formulaire ?

R: Veuillez vous assurer que vous avez mis à jour le CSS pour utiliser vos propres ID de formulaire et de champ. Une fois que vous avez confirmé cela et que votre image ne s'affiche pas, veuillez vérifier l'URL de l'image que vous essayez d'ajouter dans votre CSS.

Pour obtenir de l'aide sur la recherche de vos ID de formulaire et de champ, veuillez consulter cette documentation utile.

Q: Puis-je l'utiliser pour le champ Liste déroulante ?

R: Pour le moment, ce CSS fonctionnera uniquement correctement avec les champs suivants :

• Case à cocher
• Choix multiples
• Paiement par case à cocher
• Paiement par choix multiple

Ceci est principalement dû à la façon dont les navigateurs modernes rendent les champs déroulants et au balisage HTML.

Et voilà ! Vous avez ajouté avec succès une image aux étiquettes de votre case à cocher. Souhaitez-vous également personnaliser l'apparence des icônes de notation ? Consultez notre tutoriel sur Comment personnaliser l'apparence des icônes de notation.