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, você pode facilmente alterar a aparência deste campo em seu site. Neste tutorial, mostraremos como usar CSS para alterar a estilização deste campo.

Adicionando o campo de formulário

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

Se precisar de ajuda com isso, revise a documentação.

Personalizando o Net Promoter Score

Em seguida, você precisará copiar este CSS para o seu site. Se precisar de ajuda para adicionar CSS ao seu site, confira 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 será aplicado apenas ao formulário com o ID 548. Antes de salvar este CSS, você precisará atualizar esse ID de formulário para corresponder ao seu ID de formulário.

Se precisar de ajuda para encontrar seu ID de formulário, revise este tutorial.

E é isso! Você usou com sucesso o CSS para personalizar o campo de formulário Net Promoter Score. Gostaria de personalizar a estilização dos ícones do campo de formulário Ratings? Dê uma olhada em nosso artigo sobre Como Personalizar a Aparência dos Ícones de Avaliação.

Perguntas Frequentes

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

R: Você 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;
}