Como Personalizar a Aparência dos Ícones de Avaliação

Gostaria de aprimorar a aparência dos ícones do seu campo de Avaliação no WPForms? Embora o construtor de formulários ofereça opções básicas de cores e ícones, você pode obter estilos mais sofisticados usando CSS.

Este guia mostrará como personalizar seus ícones de avaliação para um visual único que combine com sua marca.

Configurando Seu Formulário

Primeiro, crie seu formulário e adicione um campo Avaliação. Você pode começar selecionando seus ícones e cores preferidos através do construtor de formulários. Se precisar de ajuda para criar seu formulário, consulte nosso guia sobre como criar seu primeiro formulário.

Adicionando Estilos de Ícones Personalizados

Para personalizar seus ícones de avaliação, adicione este CSS ao seu site. Se não tiver certeza de como adicionar CSS personalizado, consulte nosso guia sobre como adicionar CSS personalizado ao seu site.

Certifique-se de substituir form#wpforms-form-1000 pelo ID real do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte nosso guia sobre como encontrar IDs de formulário e campo.

Usando Imagens Personalizadas como Ícones de Avaliação

Se preferir usar suas próprias imagens em vez dos ícones padrão, você pode usar este CSS alternativo:

/* Style custom image rating icons */
form#wpforms-form-1000 .wpforms-field-rating-item {
    padding-right: 6px;
    background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-size: 50%;
}

/* Style hover and selected states */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
    background-size: 70%;
}

/* Hide default SVG icons */
form#wpforms-form-1000 .wpforms-field-rating svg {
    display: none;
}

Perguntas Frequentes

P: Esses estilos funcionarão com Formulários de Conversa?

R: Sim! Este CSS personalizará a aparência dos ícones de avaliação ao usar o addon Formulários de Conversa, o addon Páginas de Formulários, bem como um embed padrão do formulário em qualquer postagem, página ou widget.

E é tudo o que você precisa para personalizar a aparência dos ícones do campo de formulário Avaliação no WPForms! Em seguida, você gostaria de personalizar também a aparência do tema captcha para reCAPTCHA? Para fazer isso, dê uma olhada em nosso tutorial sobre como alterar o tema do captcha no Google reCAPTCHA.