¿Le gustaría mejorar la apariencia de los iconos de sus campos de Rating en WPForms? Mientras que el constructor de formularios proporciona opciones básicas de color e icono, puede lograr un estilo más sofisticado usando CSS.
Esta guía le mostrará cómo personalizar sus iconos de valoración para conseguir un aspecto único que se adapte a su marca.
Configuración del formulario
En primer lugar, cree su formulario y añada un campo Calificación . Puedes empezar seleccionando tus iconos y colores preferidos a través del constructor de formularios. Si necesitas ayuda para crear tu formulario, consulta nuestra guía para crear tu primer formulario.
Añadir estilos de iconos personalizados
Para personalizar tus iconos de valoración, añade este CSS a tu sitio. Si no está seguro de cómo añadir CSS personalizado, consulte nuestra guía sobre cómo añadir CSS personalizado a su sitio.
Asegúrese de sustituir form#wpforms-form-1000 por el ID real de su formulario. Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestra guía sobre cómo encontrar los ID de formularios y campos.
Uso de imágenes personalizadas como iconos de clasificación
Si prefieres utilizar tus propias imágenes en lugar de los iconos predeterminados, puedes 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;
}
Preguntas frecuentes
P: ¿Funcionarán estos estilos con las Formas Conversacionales?
R: ¡Sí! Este CSS personalizará el aspecto de los iconos de valoración al utilizar el complemento Conversational Forms, el complemento Forms Pages, así como una incrustación estándar del formulario en cualquier entrada, página o widget.
Y eso es todo lo que necesita para personalizar el aspecto de los iconos de los campos del formulario de calificación en WPForms. A continuación, ¿le gustaría personalizar también el aspecto del tema del captcha para reCAPTCHA? Para ello, eche un vistazo a nuestro tutorial sobre cómo cambiar el tema del captcha en Google reCAPTCHA.