Como Personalizar a Tabela do Campo Escala Likert

Gostaria de personalizar o estilo do campo de formulário Escala Likert no WPForms? Se desejar alterar o estilo deste campo para corresponder às cores de marca do seu site, este tutorial mostrar-lhe-á como. Forneceremos o exemplo CSS básico necessário para personalizar o campo de formulário Escala Likert.

Criar o seu formulário

Começaremos por criar o formulário e adicionar os nossos campos, incluindo a Escala Likert.

Se precisar de assistência na criação de um formulário com o campo de formulário Escala Likert, por favor, consulte a documentação.

Personalizar a Escala Likert

Em seguida, terá de copiar este CSS para o seu site.

Se não tiver a certeza de como fazer isto, por favor, consulte este 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;
}

O estilo acima alterará as cores das linhas pares e ímpares, bem como a cor da opção quando selecionada. Este CSS também abrange os estilos Moderno ou Clássico da Escala Likert.

Terá de alterar o -971, pois este é o ID do formulário para o nosso exemplo. Terá de atualizar este número para corresponder ao seu próprio ID de formulário.

Se precisar de ajuda para localizar o seu ID de formulário, por favor, consulte esta documentação.

E é tudo! Simplesmente usando CSS, pode personalizar o estilo da Escala Likert no seu formulário. Gostaria também de personalizar o estilo do campo de formulário Net Promoter Score? Experimente o nosso tutorial sobre Como Personalizar o Campo Net Promoter Score.

FAQ

P: Como removo a quebra de linha nas minhas opções?

R: Por defeito, o WPForms adiciona uma quebra de linha ao texto usando CSS. Pode removê-la adicionando CSS adicional.

Lembre-se de alterar o -971 para corresponder ao seu ID de formulário.

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;
}