Souhaitez-vous améliorer l'apparence des icônes de vos champs de notation dans WPForms ? Alors que le constructeur de formulaire fournit des options de base pour les couleurs et les icônes, vous pouvez obtenir un style plus sophistiqué en utilisant le CSS.
Ce guide vous montrera comment personnaliser vos icônes de classement pour leur donner un aspect unique qui correspond à votre marque.
Mise en place du formulaire
Tout d'abord, créez votre formulaire et ajoutez un champ Classement . Vous pouvez commencer par sélectionner vos icônes et couleurs préférées dans le générateur de formulaires. Si vous avez besoin d'aide pour créer votre formulaire, consultez notre guide sur la création de votre premier formulaire.
Ajout de styles d'icônes personnalisés
Pour personnaliser vos icônes de classement, ajoutez ce CSS à votre site. Si vous ne savez pas comment ajouter un CSS personnalisé, veuillez consulter notre guide sur l'ajout d'un CSS personnalisé à votre site.
Veillez à remplacer form#wpforms-form-1000 par l'identifiant de votre formulaire. Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, consultez notre guide sur la recherche des identifiants de formulaire et de champ.
Utilisation d'images personnalisées comme icônes de classement
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;
}
Questions fréquemment posées
Q : Ces styles fonctionneront-ils avec les formulaires de conversation ?
R : Oui ! Ce CSS personnalisera l'apparence des icônes d'évaluation lors de l'utilisation de l'addon Conversational Forms, de l'addon Forms Pages ainsi que de l'intégration standard du formulaire dans n'importe quel article, page ou widget.
Et c'est tout ce dont vous avez besoin pour personnaliser l'apparence des icônes des champs du formulaire Rating dans WPForms ! Ensuite, voudriez-vous également personnaliser l'apparence du thème captcha pour reCAPTCHA ? Pour ce faire, jetez un coup d'œil à notre tutoriel sur la modification du thème captcha sur Google reCAPTCHA.