Gostaria de melhorar a aparência dos ícones do campo Classificação no WPForms? Embora o construtor de formulários forneça opções básicas de cores e ícones, você pode obter um estilo mais sofisticado usando CSS.
Este guia mostrará como personalizar os ícones de classificação para obter uma aparência exclusiva que corresponda à sua marca.
Configuração de seu formulário
Primeiro, crie seu formulário e adicione um campo Rating . Você pode começar selecionando seus ícones e cores preferidos no construtor de formulários. Se precisar de ajuda para criar seu formulário, consulte nosso guia sobre como criar seu primeiro formulário.
Adição de estilos de ícones personalizados
Para personalizar os ícones de classificaçã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 seu ID de formulário real. Se precisar de ajuda para encontrar o ID do formulário, consulte nosso guia sobre como encontrar IDs de formulários e campos.
Uso de imagens personalizadas como ícones de classificaçã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 o Conversational Forms?
R: Sim! Esse CSS personalizará a aparência dos ícones de classificação ao usar o complemento Conversational Forms, o complemento Forms Pages, bem como uma incorporação padrão do formulário em qualquer post, página ou widget.
E isso é tudo o que você precisa para personalizar a aparência dos ícones do campo do formulário de classificação no WPForms! Em seguida, você gostaria de personalizar também a aparência do tema do captcha para o reCAPTCHA? Para isso, dê uma olhada no nosso tutorial sobre como alterar o tema do captcha no Google reCAPTCHA.