Agregar opciones de imagen en formularios de WordPress

 

Recientemente, un lector nos preguntó cómo pueden agregar opciones de imagen a sus formularios de WordPress. Quizás también te preguntaste sobre eso.

En lugar de solo mostrar selecciones 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 generar conversiones.

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

Aquí se explica cómo agregar fácilmente opciones de imagen en un formulario de WordPress

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

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

Aquí hay un formulario que usa opciones de imagen en lugar de opciones de texto normales. Se seleccionó la primera opción, las fresas:

Un ejemplo de la selección de imágenes utilizada en un formulario: muestra imágenes coloridas para 6 opciones de frutas

La selección de imágenes puede resultar beneficiosa de muchas formas. En todos los casos, puede usarlo para hacer que su forma sea más atractiva y visualmente atractiva.

El uso de imágenes también puede ayudar a que sus formularios se vean más elegantes y profesionales. También pueden ayudar a los usuarios a tomar decisiones más rápidas.

Por ejemplo, si tiene un restaurante que ofrece entrega a domicilio, es posible que desee tener un formulario de pedido en su sitio web. Puede utilizar imágenes de sus diferentes platos para ayudar a los clientes potenciales a elegir los platos que desean.

La elección de imágenes puede facilitar que sus lectores completen su formulario, especialmente para los espectadores con dificultades de lectura o para las personas que no dominan su idioma.

Video tutorial

Suscríbete a WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

Agregar opciones de imagen a sus formularios de WordPress

Para este tutorial usaremos WPForms Enchufar. Es el mejor complemento de WordPress Form Builder que existe y le permite crear formularios fácilmente con un simple generador de formularios de arrastrar y soltar.

Primero necesitas instalar y activar eso Complemento WPForms. Si no está seguro de cómo hacer esto, puede encontrar 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 Liteque también tiene la función de selección de imágenes.

Construya 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.

Crea un nuevo formulario con WPForms

Primero ingrese un nombre para su formulario, luego haga clic para elegir una plantilla. Usaremos el formulario de contacto simple como punto de partida.

Utilice la plantilla de formulario de contacto simple

Esto inicia la interfaz del constructor de WPForms con campos de formulario preinstalados. Puede editar cualquier campo de formulario haciendo clic en él, moviéndolo hacia arriba y hacia abajo, o eliminándolo.

El formulario estándar 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: La selección de imágenes también funciona con el campo de casilla de verificación. Utilice esta opción si su usuario puede elegir más de una opción.

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

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

Como puede ver, el cuadro de opción múltiple contiene opciones de texto por defecto. Cuando haga clic en el campo para editarlo, las opciones del campo aparecerán en el lado izquierdo de su pantalla.

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

Aquí, todo lo que tiene que hacer es marcar la casilla Usar selector de imagen y WPForms actualizará automáticamente el campo.

La opción

Puede ingresar 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 elegir una de la biblioteca de medios de WordPress.

Carga de imágenes para las diversas opciones en su formulario

Recomendamos utilizar imágenes JPG o PNG que no superen los 250 x 250 píxeles. Sus imágenes se verán mejor en su formulario cuando todas sean del mismo tamaño.

Importante: WPForms no cambia el tamaño de sus imágenes. Debe asegurarse de que tengan el tamaño que desea antes de cargarlos. Alternativamente, puede editar su imagen usted mismo en WordPress antes de agregarla a su formulario.

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

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

Cambiar cómo se muestran las selecciones de imágenes en su formulario

WPForms facilita el cambio del diseño de selección de imágenes y otras configuraciones en la pestaña Opciones avanzadas.

Abra las opciones avanzadas para optimizar la visualización de sus imágenes

Puede seleccionar la casilla de verificación «Seleccionar opciones al azar» si desea que sus selecciones de imágenes se muestren al azar en lugar de en un orden en particular. Esto es útil cuando está creando una encuesta y desea evitar el sesgo de primera opción en los resultados.

En «Estilo de selección de imagen» puede elegir cómo desea formatear sus imágenes. El estilo estándar es «moderno». Si se selecciona la opción «Fresas», se verá así:

La selección de imágenes aplicada con el estilo moderno predeterminado

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

La selección de imágenes con el estilo clásico aplicado (borde más grueso, sin sombras, sin texto en negrita, sin marcas)

Alternativamente, puede elegir Ninguno para el estilo. En este caso, sus imágenes son imágenes normales sin marcos ni otros estilos. Las etiquetas se muestran con botones de opción.

La selección de imágenes sin estilo.

Si lo prefiere, también puede reorganizar el orden de sus selecciones utilizando la lista desplegable «Diseño de selección». La configuración predeterminada es «en línea». Sus opciones se muestran una al lado de la otra hasta que se insertan en una nueva línea.

En su lugar, puede mostrar sus selecciones en varias columnas. Si desea una lista vertical, simplemente elija «Una columna» en la lista desplegable. Su selección de imágenes se verá así:

Selección de imágenes en una sola columna vertical

También existe la opción «Ocultar título» para su selección de imágenes. Esto significa que no aparecerá texto debajo de las imágenes. En algunos casos, puede resultar útil hacer esto. Por ejemplo, puede pedir a las personas que voten por el nuevo diseño de logotipo que más les guste.

Sin embargo, asegúrese de incluir una etiqueta relevante y útil siempre que sea posible. Esto aparecerá como texto alternativo para sus imágenes, haciendo que su sitio web 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 ingrese la etiqueta que desea usar y desmarque la casilla «Requerido» para que el campo sea opcional.

Edita el campo

Para eliminar un campo, mueva el puntero del mouse sobre él y haga clic en el icono rojo de la papelera.

Eliminar un campo en WPForms

Cuando 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 en su sitio web con solo unos pocos clics. Crearemos una nueva página para nosotros.

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

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

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

Luego haga clic en la lista desplegable Seleccionar formulario y haga clic en el nombre de su formulario para seleccionarlo. Usamos nuestro formulario de pedido para cajas de frutas aquí.

Seleccione el formulario que desee de la lista desplegable de WPForms

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

La selección de imagen terminada en el formulario.

Si desea realizar cambios en su formulario, consulte WPForms »Todos los formularios en su tablero. Una vez que haya guardado sus cambios, su formulario también se actualizará automáticamente de su lado.

Esperamos que este tutorial le haya ayudado a aprender cómo agregar opciones de imagen en formularios de WordPress. También le puede interesar nuestra guía sobre cómo crear una encuesta en WordPress y nuestra comparación de los mejores complementos para el creador de sitios de WordPress.