How to Customize the Look of the Rating Icons

Afficher Markdown

Souhaitez-vous améliorer l'apparence des icônes de votre champ de notation dans WPForms ? Bien que le constructeur de formulaires offre des options de base pour les couleurs et les icônes, vous pouvez obtenir un style plus sophistiqué en utilisant du CSS.

Ce guide vous montrera comment personnaliser vos icônes de notation pour un look unique qui correspond à votre marque.

Configuration de votre formulaire

Tout d'abord, créez votre formulaire et ajoutez un champ Notation. Vous pouvez commencer par sélectionner vos icônes et couleurs préférées via le constructeur de formulaires. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.

Pour plus de détails sur l'utilisation du champ Notation, consultez notre guide complet sur le champ Notation.

Ajout de styles d'icônes personnalisés

Pour personnaliser vos icônes de notation, ajoutez ce CSS à votre site. Si vous ne savez pas comment ajouter du CSS personnalisé, veuillez consulter notre guide sur l'ajout de CSS personnalisé à votre site.

Assurez-vous de remplacer form#wpforms-form-1000 par l'ID réel de votre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez notre guide sur la manière de trouver les ID de formulaire et de champ.

en ajoutant ce CSS, vous pouvez maintenant personnaliser l'apparence des icônes de notation pour qu'elles correspondent à n'importe quel style que vous souhaitez

Utilisation d'images personnalisées comme icônes de notation

Si vous préférez utiliser vos propres images au lieu des icônes par défaut, vous pouvez utiliser ce CSS alternatif :

/* Style custom image rating icons */
form#wpforms-form-1000 .wpforms-field-rating-item {
    padding-right: 6px;
    background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-size: 50%;
}

/* Style hover and selected states */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
    background-size: 70%;
}

/* Hide default SVG icons */
form#wpforms-form-1000 .wpforms-field-rating svg {
    display: none;
}

N'oubliez pas de mettre à jour l'URL de l'image pour qu'elle pointe vers votre image personnalisée. L'exemple suppose une taille d'image de 150px par 150px.

Questions fréquemment posées

Q : Ces styles fonctionneront-ils avec les formulaires conversationnels ?

R : Oui ! Ce CSS personnalisera l'apparence des icônes de notation lors de l'utilisation du module complémentaire Formulaires conversationnels, du module complémentaire Pages de formulaires ainsi que d'une intégration standard du formulaire dans n'importe quel article, page ou widget.

Et voilà tout ce dont vous avez besoin pour personnaliser l'apparence des icônes du champ de formulaire Notation dans WPForms ! Ensuite, souhaitez-vous également personnaliser l'apparence du thème captcha pour reCAPTCHA ? Pour ce faire, consultez notre tutoriel sur la modification du thème captcha sur Google reCAPTCHA.

Comment personnaliser l'apparence des icônes de notation

Résumé IA