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

Gostaria de realçar a aparência dos ícones do seu campo de Classificação no WPForms? Embora o construtor de formulários forneça opções básicas de cores e ícones, pode obter um estilo mais sofisticado utilizando CSS.

Este guia mostrar-lhe-á como personalizar os seus ícones de classificação para um visual único que corresponda à sua marca.

Configurar o Seu Formulário

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

Adicionar Estilos de Ícones Personalizados

Para personalizar os seus ícones de classificação, adicione este CSS ao seu site. Se não tiver a certeza de como adicionar CSS personalizado, consulte o 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 o nosso guia sobre como encontrar IDs de formulários e campos.

Utilizar Imagens Personalizadas como Ícones de Classificação

Se preferir usar as suas próprias imagens em vez dos ícones predefinidos, 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: Estes estilos funcionarão com Formulários Conversacionais?

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

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