Come personalizzare il campo Net Promoter Score

Desideri personalizzare l'aspetto del campo modulo Net Promoter Score? Utilizzando un po' di CSS puoi cambiare facilmente l'aspetto di questo campo modulo sul tuo sito. In questo tutorial, ti mostreremo come usare il CSS per cambiare lo stile di questo campo.

Aggiunta del campo modulo

Per prima cosa, dovrai creare un modulo e i tuoi campi, nonché il campo Net Promoter Score al tuo modulo, quindi configurare le opzioni che desideri per questo campo.

Se hai bisogno di assistenza, consulta la documentazione.

Personalizzazione del Net Promoter Score

Successivamente, dovrai copiare questo CSS sul tuo sito. Se hai bisogno di aiuto su come aggiungere CSS al tuo sito, dai un'occhiata a questo tutorial.

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}

Il CSS sopra verrà applicato solo al modulo con ID 548. Prima di salvare questo CSS, dovrai aggiornare quell'ID modulo per farlo corrispondere al tuo ID modulo.

Se hai bisogno di assistenza su come trovare il tuo ID modulo, consulta questo tutorial.

E questo è tutto! Hai utilizzato con successo il CSS per personalizzare il campo modulo Net Promoter Score. Desideri personalizzare lo stile delle icone del campo modulo Valutazioni? Dai un'occhiata al nostro articolo su Come personalizzare l'aspetto delle icone di valutazione.

FAQ

D: Come posso cambiare il testo che appare (Per niente probabile)?

R: Puoi cambiare anche questo testo che appare con il CSS.

form#wpforms-form-548 span.not-likely:before {
    content: "Not at all satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.extremely-likely:before {
    content: "Completely satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
    font-size: 0;
}