Saltar al contenido

Cómo agregar opciones de imagen en formularios de WordPress (Boost Engagement)

How to easily add image choices in a WordPress form

Recientemente, un lector nos preguntó cómo agregar opciones de imagen a sus formularios de WordPress. Quizás esto es algo de lo que te has preguntado también.

En lugar de solo mostrar las opciones de texto, las imágenes pueden hacer que sus formularios sean más atractivos al instante. Esto puede ayudar a mejorar su tasa de respuesta y las conversiones de formularios.

En este artículo, le mostraremos cómo agregar opciones de imagen en los formularios de WordPress para aumentar el compromiso y las conversiones.

Cómo agregar fácilmente opciones de imagen en un formulario de WordPress

¿Qué son las opciones de imagen y por qué usarlas en sus formularios?

Las opciones de imagen son fotos, ilustraciones, gráficos o íconos entre los que los usuarios pueden elegir al completar su formulario.

Aquí hay un formulario que utiliza opciones de imagen, en lugar de opciones de texto normales. La primera opción, Fresas, ha sido seleccionada:

Un ejemplo de opciones de imagen en uso en un formulario: muestra imágenes coloridas para 6 opciones de fruta

La elección de imágenes puede ser una ventaja de muchas maneras. En todos los casos, le permiten hacer que su formulario sea más atractivo y visualmente atractivo.

El uso de imágenes también puede ayudar a que sus formularios se vean más pulidos y profesionales. También pueden ayudar a los usuarios a decidir más rápido.

Por ejemplo, si tiene un restaurante que ofrece entregas, querrá tener un formulario de pedido en su sitio web. Puede usar imágenes de sus diferentes platos para ayudar a los clientes potenciales a elegir lo que quieren.

Las opciones de imagen pueden facilitar que sus lectores completen su formulario, especialmente para el público con dificultades de lectura o alguien que no habla su idioma con fluidez.

Video Tutorial

Suscríbase a WPBeginner

Si prefieres instrucciones escritas, sigue leyendo.

Agregar opciones de imagen a sus formularios de WordPress

Para este tutorial, utilizaremos el complemento WPForms. Es el mejor plugin de generador de formularios de WordPress en el mercado y le permite crear formularios fácilmente utilizando un simple generador de formularios de arrastrar y soltar.

Primero, deberá instalar y activar el complemento WPForms. Si no está seguro de cómo hacerlo, puede obtener instrucciones paso a paso en nuestra guía sobre cómo instalar un complemento de WordPress.

WPForms es un complemento premium de WordPress. También ofrecen una versión gratuita llamada WPForms Lite, que también tiene la función de opciones de imagen.

Crear su formulario con WPForms

Una vez que haya activado el complemento, vaya a WPForms »Agregar formulario página en su panel de WordPress para crear un nuevo formulario.

Crear un nuevo formulario usando WPForms

Primero proporcione un nombre para su formulario y luego haga clic para seleccionar una plantilla. Utilizaremos el formulario de contacto simple como punto de partida.

Use la plantilla de formulario de contacto simple

Esto lanzará la interfaz del generador de WPForms con campos de formulario precargados. Puede editar cualquier campo de formulario haciendo clic en él, moverlo hacia arriba y hacia abajo o eliminarlo.

El formulario predeterminado creado con la plantilla de formulario de contacto de WPForms

A continuación, agregaremos un campo de opción múltiple para que los clientes puedan elegir el tipo de fruta que desean.

Nota: Las opciones de imagen también funcionan con el campo Casillas de verificación. Úselo si desea que su usuario pueda elegir más de una opción.

Para agregar el campo, simplemente arrastre y suelte el campo Opción múltiple de la sección Campos estándar en el lado izquierdo de su pantalla. Lo colocaremos justo encima del cuadro «Comentario o Mensaje».

Agregar un campo de opción múltiple a su formulario

Como puede ver, el campo de opción múltiple tiene opciones de texto por defecto. Si hace clic en el campo para editarlo, verá las opciones de campo en el lado izquierdo de su pantalla.

Editar el campo de opción múltiple para su formulario

Aquí, simplemente necesita marcar la casilla para «Usar opciones de imagen» y WPForms actualizará automáticamente el campo.

La opción 'Usar opciones de imagen' en WPForms

Puede escribir lo que desee para la etiqueta de texto del campo y luego hacer clic en el botón «Cargar imagen». Puede cargar una imagen desde su computadora o seleccionar una de la biblioteca de medios de WordPress.

Subir imágenes para las diferentes opciones en su formulario

Recomendamos utilizar imágenes .jpg o .png que no superen los 250 px por 250 px. Sus imágenes se verán mejor en su forma si son todas del mismo tamaño.

Importante: WPForms no redimensionará sus imágenes. Deberá asegurarse de que tengan el tamaño que desea antes de cargarlos. Alternativamente, puede editar su imagen en WordPress antes de agregarlos a su formulario.

Si tiene más de 3 opciones para incluir, simplemente haga clic en el botón (+) para agregar una nueva opción. Puede usar el botón (-) para eliminar una opción.

Agregar más opciones de opción múltiple a su formulario

Cambiar cómo se muestran sus opciones de imagen en su formulario

WPForms facilita el cambio del diseño de elección de imagen y otras configuraciones desde la pestaña «Opciones avanzadas».

Abra las Opciones avanzadas para ajustar cómo se muestran sus imágenes

Puede marcar la casilla «Elección aleatoria de opciones» si desea mostrar sus opciones de imagen al azar, en lugar de hacerlo en un orden particular. Esto es útil si está creando una encuesta y desea eliminar el sesgo de primera opción en los resultados.

En «Estilo de elección de imagen», puede elegir cómo desea diseñar sus imágenes. El estilo predeterminado es Moderno, que se ve así con la opción Fresas seleccionada:

Las opciones de imagen con el estilo moderno predeterminado aplicado

En su lugar, puede elegir el estilo Clásico, que se ve así cuando se selecciona la opción Fresas:

Las opciones de imagen con el estilo clásico aplicado (borde más grueso, sin sombra, sin texto en negrita, sin marca de verificación)

Alternativamente, puede elegir «Ninguno» para el estilo. En este caso, sus imágenes simplemente serán imágenes regulares sin bordes u otro estilo. Las etiquetas se mostrarán con botones de radio.

Las opciones de imagen sin estilo

Si lo desea, también puede cambiar la forma en que se presentan sus opciones, utilizando el menú desplegable «Diseño de elección». El valor predeterminado es «En línea» con las opciones que aparecen una al lado de la otra hasta que se ajustan a una nueva línea.

En su lugar, puede elegir mostrar sus elecciones en varias columnas. Si desea una lista vertical, simplemente elija «Una columna» en el menú desplegable. Sus opciones de imagen se verán así:

Opciones de imagen en una sola columna vertical

También existe la opción aquí para «Ocultar etiqueta» para sus opciones de imagen. Esto significa que no habrá ningún texto debajo de las imágenes. En algunos casos, puede tener sentido hacer esto. Por ejemplo, puede pedirle a la gente que vote por el nuevo diseño de logotipo que más les guste.

Sin embargo, asegúrese de ingresar una etiqueta relevante y útil siempre que sea posible. Esto se mostrará como texto alternativo para sus imágenes, haciendo que su sitio sea más accesible para los usuarios con discapacidad visual.

Agregar, eliminar o editar campos en su formulario

Puede agregar, eliminar o editar los campos en su formulario. Para editar un campo, simplemente haga clic en él.

Por ejemplo, es posible que desee cambiar el campo «Comentario o Mensaje» para que sea opcional y tenga una etiqueta diferente. Después de hacer clic en el campo, puede editarlo en el lado izquierdo de la pantalla.

Simplemente escriba la etiqueta que desea usar y desactive la casilla «Obligatorio» para que el campo sea opcional.

Edición del campo 'Comentario o mensaje' en WPForms

Para eliminar un campo, pase el cursor sobre él y luego haga clic en el icono de la papelera roja.

Eliminar un campo en WPForms

Una vez que esté satisfecho con su formulario, haga clic en el botón «Guardar» en la parte superior de la pantalla.

Agregar su formulario a su sitio web

Puede agregar su formulario a cualquier publicación o página de su sitio con solo un par de clics. Vamos a crear una nueva página para la nuestra.

Ir Páginas »Agregar nuevo, luego haga clic en el botón (+) para agregar un bloque a su página.

Busque el bloque WPForms en la sección Widgets o búsquelo usando la barra de búsqueda. Luego, simplemente haga clic en el bloque para agregarlo a su página.

Agregar el bloque WPForms a su página o publicación

Luego, haga clic en el menú desplegable «Seleccionar un formulario» y haga clic en el nombre de su formulario para seleccionarlo. Estamos usando nuestro formulario de pedido de caja de frutas aquí.

Seleccionar el formulario que desea del menú desplegable WPForms

Ahora está listo para publicar su página y ver su formulario en vivo en su sitio. Así es como se ve el nuestro:

Las opciones de imagen terminadas en el formulario

Si desea realizar cambios en su formulario, puede encontrarlo en WPForms »Todos los formularios en tu tablero de instrumentos. Una vez que haya guardado sus cambios, su formulario también se actualizará automáticamente en su página.

Esperamos que este tutorial lo haya ayudado a aprender cómo agregar opciones de imagen en los formularios de WordPress. También puede que le guste nuestra guía sobre cómo crear una encuesta en WordPress, y nuestra comparación sobre los mejores complementos del creador de páginas de WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

.