Gostaria de personalizar o estilo do campo de formulário Escala de Likert no WPForms? Se você gostaria de alterar o estilo deste campo para combinar com as cores da marca do seu site, este tutorial mostrará como. Daremos o exemplo básico de CSS necessário para personalizar o campo de formulário da Escala de Likert.
Criar o seu formulário
Vamos começar por criar o formulário e adicionar os nossos campos de formulário, incluindo a escala de Likert.
Se precisar de ajuda para criar um formulário com o campo de formulário Escala de Likert, consulte a documentação.
Personalização da escala de Likert
Em seguida, terá de copiar este CSS para o seu sítio.
Se não tiver a certeza de como o fazer, 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 mudará as cores das linhas pares e ímpares, bem como a cor da opção quando marcada. Este CSS também abrange os estilos Moderno ou Clássico da Escala de Likert.
Terá de alterar o -971, uma vez que esse é o ID do formulário do 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, consulte esta documentação.
E é isso! Basta utilizar CSS para personalizar o estilo da Escala de Likert no seu formulário. Gostaria de personalizar também 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 é que removo a quebra de palavra nas minhas opções?
R: Por padrão, o WPForms adiciona uma quebra de palavra ao texto usando CSS. É possível remover isso adicionando CSS adicional.
Não se esqueça 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;
}