How to Customize the Labels for Image Choices

Afficher Markdown

Vous souhaitez améliorer l'attrait visuel des étiquettes de vos choix d'images dans WPForms ? Que vous utilisiez des choix d'images pour les champs de cases à cocher ou de choix multiples, vous pouvez créer des effets de survol attrayants et styliser vos étiquettes à l'aide de CSS.

Ce guide vous montrera plusieurs façons de personnaliser les étiquettes de vos choix d'images pour créer une expérience de formulaire plus interactive et visuellement attrayante.

Configuration de votre formulaire

Commençons par créer un formulaire et ajouter nos champs. Nous inclurons également un champ Case à cocher qui utilise des Choix d'images.

Si vous avez besoin d'aide pour créer un formulaire avec des choix d'images, veuillez consulter notre guide sur la configuration des choix d'images.

Personnalisation des étiquettes de choix d'images

Ces exemples de CSS vous aideront à créer divers effets visuels pour vos étiquettes de choix d'images. Pour tous les exemples, n'oubliez pas de remplacer form#wpforms-form-1000 par l'ID de votre propre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, veuillez consulter notre guide sur la recherche des ID de formulaire et de champ.

Superposer les étiquettes au survol

Ce style crée un effet de superposition élégant où les étiquettes apparaissent sur l'image lorsque les utilisateurs survolent :

avec ce CSS, vous pouvez facilement styliser les étiquettes pour qu'elles apparaissent sur les images lorsque vous survolez

Ajouter des bordures et des effets de boîte

Utilisez les propriétés de bordure et de boîte pour créer des cadres, des bordures ou des coins arrondis autour des étiquettes.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

dans cet exemple CSS, nous plaçons une bordure autour de l'étiquette

Faire pivoter les images au survol

En appliquant la règle CSS transform, nous allons introduire une touche délicieuse à vos images. Au survol, elles pivoteront élégamment, injectant un élément interactif ludique dans votre formulaire. Cet effet attrayant captive les visiteurs lorsqu'ils naviguent dans votre sélection d'images.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
    transform: rotate(10deg);
}

dans cet exemple, nous appliquons un effet d'inclinaison lorsque vous survolez l'image

Ombre portée au survol

Pour améliorer vos images avec une touche de profondeur et de dimension, nous implémentons un effet d'ombre portée au survol et supprimons la bordure par défaut au survol. Lorsque vos visiteurs survolent chaque image, une ombre subtile émerge gracieusement, conférant à votre formulaire un sens captivant de profondeur et d'interactivité.

form#wpforms-form-1000 .wpforms-image-choices label:hover {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

avec cet exemple CSS, nous fournissons une ombre portée au survol

Combiner plusieurs effets (bordure, étiquettes et ombre portée au survol)

Dans ce dernier exemple, nous allons combiner certains des CSS que nous avons déjà utilisés.

Lorsque vous survolez l'image maintenant, vous verrez l'étiquette sur l'image.

avec ce CSS, nous pouvons combiner un peu de tout

Et ce ne sont là que quelques exemples de la facilité avec laquelle vous pouvez personnaliser les étiquettes pour les choix d'images. Souhaitez-vous également supprimer l'espace blanc que vous voyez autour des images ? Consultez notre article sur Comment supprimer l'espace blanc autour des choix d'images.

Comment personnaliser les étiquettes des choix d’images

Résumé IA