Cómo personalizar el aspecto de los iconos de calificación

¿Le gustaría mejorar la apariencia de los iconos de su campo de Calificación en WPForms? Si bien el constructor de formularios proporciona opciones básicas de color e icono, puede lograr un estilo más sofisticado utilizando CSS.

Esta guía le mostrará cómo personalizar sus iconos de calificación para un aspecto único que coincida con su marca.

Configuración de tu formulario

Primero, cree su formulario y agregue un campo de Calificación. Puede comenzar seleccionando sus iconos y colores preferidos a través del constructor de formularios. Si necesita ayuda para crear su formulario, consulte nuestra guía sobre cómo crear su primer formulario.

Añadir estilos de iconos personalizados

Para personalizar sus iconos de calificación, agregue este CSS a su sitio. Si no está seguro de cómo agregar CSS personalizado, consulte nuestra guía sobre cómo agregar CSS personalizado a su sitio.

Asegúrese de reemplazar form#wpforms-form-1000 con el ID de su formulario real. Si necesita ayuda para encontrar el ID de su formulario, consulte nuestra guía sobre cómo encontrar los IDs de formularios y campos.

Usar imágenes personalizadas como iconos de calificación

Si prefiere usar sus propias imágenes en lugar de los iconos predeterminados, puede 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;
}

Preguntas frecuentes

P: ¿Funcionarán estos estilos con Formularios Conversacionales?

R: ¡Sí! Este CSS personalizará el aspecto de los iconos de calificación cuando se utilice el complemento Formularios Conversacionales, el complemento Páginas de Formularios, así como una incrustación estándar del formulario en cualquier publicación, página o widget.

¡Y eso es todo lo que necesita para personalizar el aspecto de los iconos del campo de formulario de Calificación en WPForms! A continuación, ¿le gustaría también personalizar el aspecto del tema de captcha para reCAPTCHA? Para hacerlo, eche un vistazo a nuestro tutorial sobre cómo cambiar el tema del captcha en Google reCAPTCHA.