Comment personnaliser les étiquettes pour les choix d'images

Vous souhaitez améliorer l'attrait visuel de vos étiquettes de choix d'image dans WPForms ? Que vous utilisiez des choix d'images pour des cases à cocher ou des champs à 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 vos étiquettes Image Choice afin de créer une expérience de formulaire plus interactive et visuellement attrayante.

Mise en place du formulaire

Commençons par créer un formulaire et ajouter nos champs. Nous inclurons également un champ Checkbox qui utilise Image Choices.

Si vous avez besoin d'aide pour créer un formulaire avec Choix d'image, veuillez consulter notre guide sur la configuration de Choix d'image.

Personnalisation des étiquettes de choix d'image

Ces exemples CSS vous aideront à créer divers effets visuels pour vos étiquettes Image Choice. Pour tous les exemples, n'oubliez pas de remplacer form#wpforms-form-1000 avec votre propre identifiant de formulaire. Si vous avez besoin d'aide pour trouver votre identifiant de formulaire, veuillez consulter notre guide sur recherche des identifiants de formulaires et de champs.

Superposition d'étiquettes au survol

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

Avec cette feuille de style CSS, vous pouvez facilement styliser les étiquettes pour qu'elles apparaissent au-dessus des images lorsque vous les survolez.

Ajouter des effets de bordure et de boîte

Utilisez les propriétés border et box 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

Rotation des images au survol

En appliquant la règle CSS transformDans le cadre de l'application de l'article "L'image", nous ajouterons une touche de fantaisie à vos images. Lorsqu'elles sont survolées, elles tournent élégamment, injectant un élément interactif ludique dans votre formulaire. Cet effet 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 de basculement lorsque vous survolez l'image

Ombre de la boîte au survol

Pour donner à vos images une touche de profondeur et de dimension, nous mettons en place un effet d'ombre au survol et supprimons la bordure par défaut au survol. Lorsque vos visiteurs glissent sur chaque image, une ombre subtile se dessine gracieusement, conférant à votre formulaire un sentiment 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 créons une ombre de boîte au passage de la souris

Combiner plusieurs effets (bordure, étiquettes et ombre de la boîte au survol)

Dans ce dernier exemple, nous allons combiner certaines des feuilles de style CSS que nous avons déjà utilisées.

Lorsque vous survolez l'image, vous verrez l'étiquette au-dessus de l'image.

avec ce CSS, nous pouvons combiner un peu de tout

Ce ne sont là que quelques exemples de la facilité avec laquelle vous pouvez personnaliser les libellés des choix d'images. Vous souhaitez également supprimer l'espace blanc autour des images ? Consultez notre article sur la suppression des espaces blancs autour des choix d'images.