Riassunto AI
Desideri migliorare l'aspetto delle icone del tuo campo Valutazione in WPForms? Sebbene il modulo offra opzioni di base per colori e icone, puoi ottenere uno stile più sofisticato utilizzando il CSS.
Questa guida ti mostrerà come personalizzare le icone di valutazione per un aspetto unico che corrisponda al tuo brand.
Configurazione del tuo modulo
Per prima cosa, crea il tuo modulo e aggiungi un campo Valutazione. Puoi iniziare selezionando le tue icone e i tuoi colori preferiti tramite il generatore di moduli. Se hai bisogno di aiuto per creare il tuo modulo, consulta la nostra guida su come creare il tuo primo modulo.
Aggiungere stili di icone personalizzati
Per personalizzare le tue icone di valutazione, aggiungi questo CSS al tuo sito. Se non sei sicuro su come aggiungere CSS personalizzato, consulta la nostra guida su come aggiungere CSS personalizzato al tuo sito.
Assicurati di sostituire form#wpforms-form-1000 con l'ID effettivo del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su come trovare gli ID dei moduli e dei campi.
Utilizzare immagini personalizzate come icone di valutazione
Se preferisci utilizzare le tue immagini invece delle icone predefinite, puoi utilizzare questo CSS alternativo:
/* 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;
}
Domande frequenti
D: Questi stili funzioneranno con i Moduli Conversazionali?
R: Sì! Questo CSS personalizzerà l'aspetto delle icone di valutazione quando si utilizza l'addon Moduli Conversazionali, l'addon Pagine Modulo, nonché un'incorporazione standard del modulo in qualsiasi post, pagina o widget.
E questo è tutto ciò che ti serve per personalizzare l'aspetto delle icone del campo modulo Valutazione in WPForms! Successivamente, desideri anche personalizzare l'aspetto del tema captcha per reCAPTCHA? Per farlo, dai un'occhiata al nostro tutorial su come cambiare il tema captcha su Google reCAPTCHA.