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, é possível obter um estilo mais sofisticado usando CSS.
Este guia mostra-lhe como personalizar os seus ícones de classificação para obter um aspeto único que corresponda à sua marca.
Configurar o seu formulário
Primeiro, crie o seu formulário e adicione um campo Classificação . Pode começar por selecionar os seus ícones e cores preferidos através do criador 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 que substitui form#wpforms-form-1000 pelo seu ID de formulário real. Se precisar de ajuda para encontrar a ID do formulário, consulte o nosso guia sobre como encontrar IDs de formulários e campos.
Usar imagens personalizadas como ícones de classificação
Se preferir utilizar as suas próprias imagens em vez dos ícones predefinidos, pode utilizar 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 mais frequentes
P: Estes estilos funcionam com os formulários de conversação?
R: Sim! Este CSS irá personalizar a aparência dos ícones de classificação ao usar o addon Conversational Forms, o addon 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 captcha para reCAPTCHA? Para fazer isso, dê uma olhada no nosso tutorial sobre como alterar o tema captcha no Google reCAPTCHA.