Come personalizzare la tabella del campo Scala Likert

Desideri personalizzare lo stile del campo modulo Scala Likert in WPForms? Se desideri modificare lo stile di questo campo per adattarlo ai colori del marchio del tuo sito, questo tutorial ti mostrerà come fare. Ti forniremo l'esempio CSS di base necessario per personalizzare il campo modulo Scala Likert.

Creazione del tuo modulo

Inizieremo creando il modulo e aggiungendo i nostri campi modulo, inclusa la Scala Likert.

Se hai bisogno di assistenza nella creazione di un modulo con il campo modulo Scala Likert, consulta la documentazione.

Personalizzazione della Scala Likert

Successivamente, dovrai copiare questo CSS sul tuo sito.

Se non sei sicuro di come fare, consulta questo tutorial.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
    background-color: #FFE0B2;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
    border: 1px solid #EF6C00;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

Lo stile sopra cambierà i colori delle righe pari e dispari, nonché il colore dell'opzione quando selezionata. Questo CSS copre anche gli stili Moderno o Classico della Scala Likert.

Dovrai cambiare il -971 poiché questo è l'ID del modulo per il nostro esempio. Dovrai aggiornare questo numero per corrispondere al tuo ID modulo.

Se hai bisogno di aiuto per localizzare il tuo ID modulo, consulta questa documentazione.

E questo è tutto! Semplicemente usando il CSS puoi personalizzare lo stile della Scala Likert sul tuo modulo. Desideri anche personalizzare lo stile del campo modulo Net Promoter Score? Prova il nostro tutorial su Come personalizzare il campo Net Promoter Score.

FAQ

D: Come posso rimuovere l'interruzione di parola sulle mie opzioni?

R: Per impostazione predefinita, WPForms aggiunge un'interruzione di parola al testo utilizzando il CSS. Puoi rimuoverla aggiungendo CSS aggiuntivo.

Ricorda di cambiare il -971 per corrispondere al tuo ID modulo.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic th, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
    word-break: auto-phrase;
}