Como personalizar o campo Net Promoter Score

Gostaria de personalizar o aspeto do campo de formulário Net Promoter Score? Com um pouco de CSS, pode alterar facilmente o aspeto deste campo de formulário no seu site. Neste tutorial, vamos mostrar-lhe como utilizar CSS para alterar o estilo deste campo.

Adicionar o campo de formulário

Em primeiro lugar, terá de criar um formulário e os seus campos, bem como o campo Net Promoter Score no seu formulário e, em seguida, configurar as opções que pretende para este campo.

Se precisar de ajuda, consulte a documentação.

Personalizar o Net Promoter Score

Em seguida, terá de copiar este CSS para o seu site. Se precisar de ajuda sobre como adicionar CSS ao seu site, consulte este 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;
}

O CSS acima só será aplicado ao formulário com o ID 548. Antes de guardar este CSS, terá de atualizar esse ID de formulário para corresponder ao seu ID de formulário.

Se precisar de ajuda para encontrar o ID do formulário, consulte este tutorial.

E é isso! Utilizou com êxito o CSS para personalizar o campo de formulário Net Promoter Score. Gostaria de personalizar o estilo dos ícones do campo de formulário Avaliações? Dê uma olhada em nosso artigo sobre Como personalizar a aparência dos ícones de avaliação.

FAQ

P: Como é que posso alterar o texto que aparece (Nada provável)?

R: Também pode alterar este texto que aparece com 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;
}