Añadir imágenes a las etiquetas de casilla de verificación usando CSS

¿Le gustaría añadir imágenes a las etiquetas de las casillas de verificación en sus formularios? Puede mejorar el atractivo visual de su formulario añadiendo imágenes de fondo o iconos basados en fuentes a las etiquetas de sus casillas de verificación usando CSS. Por defecto, todas las etiquetas de formulario solo mostrarán el texto que tenga dentro del constructor de formularios.

Esta guía le mostrará dos métodos diferentes para lograr esto.

Siguiendo las instrucciones del artículo, es bastante fácil usar imágenes, así como texto, para las etiquetas de su campo de formulario Casilla de verificación usando una imagen o incluso iconos basados en fuentes.

Configuración del formulario

Primero, cree su formulario y añada un campo de formulario Casilla de verificación. Si necesita ayuda para crear su formulario, consulte nuestra guía sobre cómo crear su primer formulario.

Tome nota de su ID de formulario y ID de campo, ya que los necesitará al añadir el CSS. Si no está seguro de cómo encontrar estos IDs, por favor revise nuestra guía sobre cómo encontrar IDs de formulario y campo.

Añadir imágenes de fondo

El primer método utiliza imágenes de fondo subidas a su biblioteca de medios de WordPress. Si no está seguro de cómo añadir CSS personalizado a su sitio, por favor consulte nuestro tutorial sobre cómo añadir CSS a su sitio.

Si desea añadir una imagen de fondo a las etiquetas del campo de formulario Casilla de verificación, utilice el siguiente CSS.

Reemplace los siguientes valores en el código CSS:

• Línea 1: Reemplace 1000 con su ID de formulario
• Línea 1: Reemplace field_25 con su ID de campo
• Línea 4: Reemplace la URL con la ruta de su imagen
• Líneas 6-7: Ajuste la altura y el ancho en las líneas 6-7 según el tamaño de su imagen

Para cada opción de casilla de verificación adicional, copie todo el bloque CSS y cambie choice-1 por choice-2, choice-3, y así sucesivamente. También puede usar imágenes diferentes para cada opción cambiando la URL de la imagen de fondo.

Usar iconos basados en fuentes

El segundo método utiliza iconos de fuentes, que pueden ser más ligeros y flexibles que las imágenes de fondo. Primero, asegúrese de tener una biblioteca de iconos de fuentes instalada en su tema de WordPress. Si necesita ayuda con esto, consulte la guía de WPBeginner sobre cómo añadir fuentes de iconos a WordPress.

También puede usar imágenes en las etiquetas de las casillas de verificación utilizando una familia de fuentes de iconos basada en fuentes.

Al igual que con el CSS anterior, estamos apuntando al ID de formulario de 1000 y al ID de campo de 25. En el CSS a continuación verá el -1000- que se refiere al ID del formulario.

ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
    font-family: dashicons;
    content: "\f173";
    display: inline-block;
    color: #000000;
    font-size: 16px;
    margin: 0px 5px;
    position: relative;
    top: 2px;
}

Preguntas frecuentes

P: ¿Puedo usar este CSS para el campo de formulario de opción múltiple?

R: ¡Absolutamente! Estas mismas clases CSS se utilizan también para el campo de formulario Opción múltiple. Solo recuerde actualizar los IDs de formulario y campo en su CSS.

P: ¿Por qué no parece funcionar esto para mi formulario?

R: Asegúrate de haber actualizado el CSS para usar tus propios IDs de formulario y campo. Una vez que lo hayas confirmado y tu imagen no se muestre, asegúrate de comprobar la URL de la imagen que intentas añadir en tu CSS.

Para obtener ayuda sobre cómo encontrar los IDs de tu formulario y campo, consulta esta útil documentación.

P: ¿Puedo usar esto para el campo desplegable?

R: En este momento, este CSS solo funcionará correctamente con los siguientes campos:

• Casilla de verificación
• Opción múltiple
• Pago con casilla de verificación
• Opción múltiple de pago

Esto se debe en gran medida a la forma en que los navegadores modernos renderizan los campos desplegables y el marcado HTML.

¡Y eso es todo! Has añadido correctamente una imagen a las etiquetas de tus casillas de verificación. ¿También te gustaría personalizar el aspecto de los iconos de Valoración? Echa un vistazo a nuestro tutorial sobre Cómo personalizar el aspecto de los iconos de valoración.