Resumen de IA
¿Alguna vez te has preguntado si podrías permitir que los usuarios seleccionen una imagen en tu formulario de WordPress en lugar de solo texto?
Seamos sinceros. Todos nos sentimos atraídos de forma natural por los elementos interactivos y visuales. Un formulario que solo contiene texto es funcionalmente correcto, pero un formulario con imágenes seleccionables se traduce en una experiencia de usuario MUCHO mejor.
Y, ¿sabes qué? Añadir imágenes a los botones de radio en un formulario de WordPress es bastante fácil de hacer, como te mostraré en este artículo.
Cómo añadir una imagen junto a los botones de radio en formularios de WordPress
WPForms hace que sea muy sencillo añadir imágenes o iconos a tus botones de radio de opción múltiple o a tus campos de casillas de verificación. Aquí tienes los pasos que deberás seguir:
Si prefieres instrucciones escritas, sigue leyendo a continuación.
Paso 1: Crea un formulario simple de WordPress
Lo primero que necesitarás hacer es instalar y activar el plugin WPForms. Para más detalles, consulta esta guía paso a paso sobre cómo instalar un plugin en WordPress.
Una vez que hayas instalado WPForms correctamente en tu sitio, puedes empezar a crear tu formulario abriendo tu panel de WordPress y navegando a WPForms » Añadir nuevo.
Después de eso, puedes empezar dando un nombre a tu formulario y luego eligiendo una plantilla. Para este ejemplo, usaré la plantilla de formulario de contacto simple, que es una de las más de 2100 plantillas de formularios de WordPress disponibles.
Tan pronto como selecciones una plantilla, se cargará dentro del constructor de formularios.
También puedes ver nuestro tutorial sobre cómo crear un formulario de contacto simple como ejemplo para empezar.
Paso 2: Personaliza tu formulario de WordPress
La plantilla de formulario de contacto simple viene con los siguientes campos de formulario predeterminados:
- Nombre
- Correo electrónico
- Comentario o Mensaje
En nuestro ejemplo, añadiremos un campo de formulario de Opción múltiple a nuestro formulario de contacto simple y cambiaremos la etiqueta y las opciones para preguntar por qué el usuario se pone en contacto con nosotros.
Puede agregar campos adicionales a su formulario arrastrándolos desde el panel izquierdo al panel derecho.
Luego, haz clic en el campo para hacer cualquier cambio. También puedes hacer clic en un campo del formulario y arrastrarlo para reorganizar el orden de los campos en tu formulario de contacto.
Puedes añadir imágenes junto a los campos de formulario de Opción múltiple y Elementos múltiples, que son botones de radio, así como a los campos de formulario de Casillas de verificación y Elementos de casilla de verificación.
Ahora es el momento de añadir las imágenes junto a cada botón de radio.
Paso 3: Añade imágenes a los botones de radio
Para añadir una imagen a los botones de radio de tu formulario, abre las Opciones de campo para tu campo de Opción múltiple y luego activa el interruptor Usar opciones de imagen.
Después de habilitar las Opciones de imagen, puedes subir una imagen para cada opción de tu campo.
Para agregar una imagen, haz clic en el bot ilde{A3}n Subir imagen. Esto abrir ilde{A 1} tu Biblioteca de medios de WordPress para que puedas subir una imagen nueva a WordPress o elegir entre las que ya tienes.
A ilde{A 1}adir iconos a las opciones de botones de radio
Dependiendo de tu formulario, podr ilde{A 1}a tener m ilde{A 1}s sentido usar iconos que im ilde{A 1}genes. Puedes activar f ilde{A 1}cilmente esta opci ilde{A 1}n de la misma manera que lo hiciste con las im ilde{A 1}genes, seleccionando Usar iconos en el panel Opciones de campo.
WPForms utiliza una extensa biblioteca de iconos listos para usar, por lo que no necesitas subirlos. Simplemente puedes seleccionar el icono que necesitas de las opciones disponibles.
Para m ilde{A 1}s detalles, consulta nuestra gu ilde{A 1}a sobre usar iconos en WPForms.
Paso 4: Personaliza tus opciones de imagen
WPForms hace que la personalizaci ilde{A 1}n de tus opciones de imagen sea s ilde{A 1}per sencilla gracias a las opciones de personalizaci ilde{1}n integradas. Primero, elige tu Estilo de elecci ilde{1}n de imagen preferido.
El estilo Moderno muestra las im ilde{A 1}genes seleccionadas en un cuadro con sombra y a ilde{A 1}ade una marca de verificaci ilde{1}n verde en el centro. El estilo Cl ilde{A 1}sico muestra las im ilde{A 1}genes seleccionadas con un borde grueso y gris.
La opci ilde{1}n Ninguno no a ilde{A 1}adir ilde{A 1} ning ilde{1}n estilo especial; en su lugar, ver ilde{A 1}s botones de radio tradicionales junto a cada imagen para que los visitantes del sitio elijan. Luego puedes ver m ilde{A 1}s opciones haciendo clic en la pesta ilde{A 1}a Avanzado.
Es importante que selecciones tu Dise ilde{A 1}o de elecci ilde{1}n preferido. Puedes elegir entre 1, 2 o 3 columnas.
Tambi ilde{A 1}n tienes la opci ilde{1}n de elegir En l ilde{A 1}nea, que coloca tantas opciones como sea posible en cada fila antes de a ilde{A 1}adir otra. En l ilde{A 1}nea es el Dise ilde{A 1}o de elecci ilde{1}n predeterminado para todos los formularios de WordPress que muestran opciones de imagen.
Tambi ilde{A 1}n puedes seleccionar la opci ilde{1}n Aleatorizar opciones si deseas aleatorizar el orden de las opciones de imagen cada vez que un nuevo usuario visita tu sitio web.
Paso 5: Habilita los informes de encuestas
Si deseas ver cu ilde{A 1}ntas personas eligen cada opci ilde{1}n de imagen que ofreces, puedes habilitar los informes de encuestas para tus formularios instalando y activando el complemento Encuestas y Sondeos.
Para hacer esto, ve a WPForms ilde{A 1}» Complementos y busca el etiquetado como Complemento Encuestas y Sondeos. Haz clic en Instalar complemento y luego en Activar.
WPForms te permite recopilar resultados de encuestas para los siguientes campos del formulario:
- Texto de una sola línea
- Texto de párrafo
- Desplegable
- Casillas de verificación
- Opción múltiple
- Valoración
- Escala de Likert
- Puntuaci ilde{1}n Neta del Promotor (NPS)
Para habilitar los informes de encuestas para todos los campos compatibles en un formulario, ve a Ajustes ilde{A 1}» Encuestas y Sondeos en el constructor de formularios y selecciona la opci ilde{1}n Habilitar informes de encuestas.
Si solo deseas recopilar datos para un campo en particular, abre su panel Opciones de campo y haz clic en la pesta ilde{A 1}a Avanzado. Luego activa Habilitar informes de encuestas.
Una vez que las personas comiencen a completar tu formulario, con im ilde{A 1}genes junto a los botones de radio, podr ilde{A 1}s generar informes de encuestas en el panel de control de WordPress para ver los resultados.
Para generar un informe de encuesta, ve a WPForms » Todos los formularios y pasa el ratón sobre tu formulario para mostrar las opciones. Luego, haz clic en Resultados de la encuesta.
Sí, puedes personalizar la apariencia de los botones de radio y las imágenes en WPForms. Por ejemplo, puedes elegir entre diferentes diseños de campos como arreglos en línea, de 1 columna, de 2 columnas y de 3 columnas.
Añadir imágenes junto a los campos de radio – Preguntas frecuentes
He reunido algunas preguntas comunes que nuestro equipo ha recibido últimamente sobre los campos de radio y las imágenes. Échales un vistazo si tienes más preguntas sobre este tema.
¿Por qué debería añadir imágenes junto a los botones de radio en los formularios de WordPress?
Las imágenes funcionan de maravilla como ayudas visuales en los formularios de WordPress; son mucho más fáciles de notar y atraen inmediatamente la mirada del visitante.
Como resultado, los formularios que tienen elementos visuales son más fáciles de completar porque se tarda menos tiempo en leerlos y comprenderlos, lo que conduce a una mayor participación del usuario y a una mejor experiencia general.
¿Necesito experiencia en codificación para añadir imágenes a mi formulario?
Si estás utilizando un plugin fácil de usar como WPForms, no necesitas ni una sola línea de código para añadir imágenes a tus formularios.
Añadir imágenes a tu formulario con WPForms es tan fácil como subir imágenes a tu Biblioteca de Medios de WordPress. ¡Cualquiera puede hacerlo!
¿Añadir imágenes ralentizará mi sitio web?
Si bien añadir imágenes afecta la velocidad de carga de la página, mucho depende de tu sitio web en particular. Si tienes cuidado con la cantidad de imágenes que añades y te aseguras de que todas estén optimizadas, no habrá ningún impacto negativo en la velocidad de tu página.
¿Puedo personalizar la apariencia de los botones de radio y las imágenes?
Sí, puedes personalizar la apariencia de los botones de radio y las imágenes en WPForms. Por ejemplo, puedes elegir entre diferentes diseños de campos como arreglos en línea, de 1 columna, de 2 columnas y de 3 columnas.
Además, WPForms también te permite elegir entre estilos Moderno y Clásico para las opciones de campos de radio, que muestran las imágenes en estilos ligeramente diferentes.
¿Las imágenes junto a los botones de radio afectan a la accesibilidad?
Las imágenes que acompañan a los botones de radio pueden afectar a la accesibilidad si se ignoran algunas consideraciones como el contraste de color entre el fondo y las imágenes.
Recomiendo añadir textos alternativos descriptivos a tus imágenes y hacer una comprobación visual básica para asegurarte de que las imágenes son inmediatamente visibles con un alto contraste.
Si te cuesta ver la imagen con claridad, es una señal de que necesitas más colores contrastantes para garantizar una accesibilidad ideal.
A continuación, Gana más dinero online
¡Y eso es todo! Ahora sabes cómo añadir una imagen junto a los botones de radio en los formularios de WordPress.
Si estás interesado en ganar dinero online, puedes consultar nuestro tutorial sobre cómo crear un formulario de pedido simple en WordPress y añadir imágenes junto a cada artículo que tengas a la venta.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
La imagen de radio no se muestra en los campos de pago... funciona bien en "campos estándar" pero no funciona en campos de pago.
¿Alguna idea de por qué??
Hola Raju,
¡Lo siento! Sí, esto se está impidiendo intencionadamente debido a cómo nuestras integraciones de pago manejan estas etiquetas (el HTML causará problemas cuando esos datos se envíen a Stripe o PayPal). Sin embargo, nuestro equipo está al tanto de esto y nuestros desarrolladores están trabajando en una solución. No tengo una fecha estimada, ¡pero esperamos resolverlo pronto!
En caso de que ayude, las imágenes aún se pueden agregar a cada opción de elemento con CSS personalizado. Esto requiere un estilo CSS específico para el formulario, pero si estuviera dispuesto a ponerse en contacto con nuestro equipo de soporte, podemos ayudarle a lograrlo 🙂
¿Es "Image Choices to WPForms" una capacidad básica del formulario?
Mi sitio contiene varias galerías de imágenes inmutables para un usuario. Hay entre 5 y 30 imágenes en un formulario y 50 formularios (galerías). Quiero que el usuario seleccione una imagen en un formulario y luego pase al siguiente formulario; seleccione una imagen y así sucesivamente. Cada selección de imagen corresponde a un párrafo de texto que quiero proporcionar al usuario en un informe. ¿Se puede hacer esto con WPForms? ¿Con solo adiciones menores de código?
Hola Richard:
Me disculpo, pero no estoy seguro de entender exactamente lo que buscas. Cuando tengas un momento, ¿podrías ponerse en contacto con nuestro soporte con algunos detalles adicionales?
¡Gracias! 🙂
Esta es una gran característica, sin embargo, tanto el estilo moderno como el clásico están muy mal diseñados. En el clásico, el marco gris es muy difícil de ver y en el moderno, la marca está en la imagen y a menudo es difícil de ver, muestra un icono de marca negro en muchos teléfonos, lo que lo hace aún más difícil de ver y el negrita del texto mueve los campos a veces cuando están en el móvil...
Simplemente hazlo simple y crea un marco GRUESO DE COLOR que no cambie el ancho de los campos.
Hola Martin: ¡Gracias por tus comentarios y sugerencias! Lo he anotado en nuestro rastreador para que el equipo de desarrollo lo considere mientras trabaja en nuestra hoja de ruta para futuras actualizaciones. Mientras tanto, si lo deseas, puedes ponerte en contacto con nuestro equipo de soporte para obtener ayuda y podrán ayudarte con algo de código CSS personalizado para que se vea como necesitas.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Hola,
Usé la opción de imagen junto con las casillas de verificación. Funciona bien en modo de escritorio y tableta, pero no en móvil. Toda la sección de casillas de verificación con todas las imágenes y casillas de verificación desaparece desde el punto de interrupción de 600 px hacia abajo. Tengo algo de CSS personalizado, pensé que podría ser mi CSS lo que causó los problemas y lo eliminé, pero no tuve suerte.
Uso la versión gratuita de WPFrom.
¿Alguna idea?
Hola Daniel:
En ese caso, te recomiendo que uses la clase CSS para móvil como se muestra en esta guía
¡Espero que esto ayude! 🙂