Como Personalizar o Campo Net Promoter Score

Gostaria de personalizar a aparência do campo de formulário Net Promoter Score? Usando um pouco de CSS, pode facilmente alterar o aspeto deste campo de formulário no seu site. Neste tutorial, mostraremos como usar CSS para alterar o estilo deste campo.

Adicionar o campo de formulário

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

Se precisar de assistência com isto, reveja 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 alguma assistência sobre como encontrar o seu ID de formulário, reveja este tutorial.

E é tudo! Utilizou com sucesso o CSS para personalizar o campo de formulário Net Promoter Score. Gostaria de personalizar o estilo dos ícones do campo de formulário Ratings? Dê uma vista de olhos ao nosso artigo sobre Como Personalizar a Aparência dos Ícones de Classificação.

FAQ

P: Como 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;
}