Volete migliorare l'aspetto delle icone dei campi di valutazione in WPForms? Sebbene il costruttore di moduli fornisca opzioni di base per il colore e le icone, è possibile ottenere uno stile più sofisticato utilizzando i CSS.
Questa guida vi mostrerà come personalizzare le icone di valutazione per ottenere un aspetto unico che si adatti al vostro marchio.
Impostazione del modulo
Per prima cosa, creare il modulo e aggiungere un campo Valutazione . Si può iniziare selezionando le icone e i colori preferiti attraverso il costruttore di moduli. Se avete bisogno di aiuto per creare il vostro modulo, consultate la nostra guida alla creazione del vostro primo modulo.
Aggiunta di stili di icone personalizzati
Per personalizzare le icone di valutazione, aggiungete questo CSS al vostro sito. Se non sapete come aggiungere un CSS personalizzato, consultate la nostra guida sull'aggiunta di CSS personalizzati al vostro sito.
Assicurarsi di sostituire form#wpforms-form-1000 con l'ID effettivo del modulo. Se avete bisogno di aiuto per trovare l'ID del modulo, consultate la nostra guida su come trovare gli ID dei moduli e dei campi.
Utilizzo di immagini personalizzate come icone di valutazione
Se si preferisce utilizzare le proprie immagini al posto delle icone predefinite, è possibile 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 funzionano con i moduli di conversazione?
R: Sì! Questo CSS personalizzerà l'aspetto delle icone di valutazione quando si utilizza l'addon Conversational Forms, l'addon Forms Pages e l'embed standard del modulo in qualsiasi post, pagina o widget.
E questo è tutto ciò che vi serve per personalizzare l'aspetto delle icone dei campi dei moduli di valutazione in WPForms! Volete poi personalizzare anche l'aspetto del tema del captcha per reCAPTCHA? Per farlo, date un'occhiata al nostro tutorial su come cambiare il tema del captcha su Google reCAPTCHA.