Cómo Ocultar Etiquetas de Elección de Imagen con WPForms

Introducción

¿Desea ocultar las etiquetas de elección de imagen en los campos de formulario de opción múltiple y casilla de verificación? Utilizar la opción de mostrar imágenes para estos campos en lugar de sólo etiquetas es una gran manera de captar la atención de tus visitantes, pero ¿quizás te gustaría dejar que las imágenes hablen por sí solas y eliminar las etiquetas que aparecen debajo de estas imágenes? Con un pequeño fragmento de CSS puedes ocultar fácilmente las etiquetas de estas imágenes y, en este tutorial, te mostraremos exactamente cómo hacerlo.

Creación del formulario

Para empezar, crearemos un nuevo formulario y añadiremos nuestros campos. Como ya sabemos que queremos usar imágenes para nuestro campo Checkbox, añadiremos este campo y las imágenes que lo acompañan.

Si necesita ayuda para crear su formulario, consulte esta útil guía. Además, si también necesita ayuda sobre cómo configurar un campo utilizando las Opciones de Imagen, por favor revise esta documentación.

añada sus opciones de imagen de casilla de verificación a su formulario

Añadir CSS para ocultar las etiquetas de elección de imagen

Ahora que se ha creado el formulario, puede ver las etiquetas debajo de las imágenes.

puede ver las etiquetas debajo de las imágenes

Como queremos ocultar estas etiquetas, vamos a añadir algo de CSS para ocultarlas.

Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial.

Simplemente copia y pega este CSS en tu sitio.

form.wpforms-form .wpforms-field-container ul.wpforms-image-choices span.wpforms-image-choices-label {
    display: none;
}

Este CSS no sólo ocultará las etiquetas que aparecen bajo las imágenes, sino que también eliminará cualquier margen (espaciado) que se aplique automáticamente bajo las imágenes.

Ahora verás que ya no están las etiquetas

¿Le gustaría también eliminar los espacios en blanco que se colocan alrededor de las opciones de imagen? Eche un vistazo a nuestro artículo sobre Cómo eliminar los espacios en blanco alrededor de las opciones de imagen.