Cómo agregar opciones de imagen en formularios de WordPress

Recientemente, un lector nos preguntó cómo agregar opciones de imágenes a sus formularios de WordPress. Quizás esto es algo que también te ha estado preguntando.

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

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

¿Cuáles son las opciones de imagen y por qué usarlas en formularios?

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

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

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

El uso de imágenes también puede ayudar a que sus formularios sean más refinados y profesionales. También pueden ayudar a los usuarios a tomar decisiones más rápidamente.

Por ejemplo, si tiene un restaurante que ofrece entrega a domicilio, le recomendamos que tenga un formulario de pedido en su sitio web. Puede utilizar imágenes de sus diferentes platos para ayudar a los clientes potenciales a elegir lo que quieren.

La elección de imágenes puede facilitar que sus lectores completen el formulario, especialmente para la audiencia con dificultades de lectura o alguien que no habla su idioma con fluidez.

Agregar opciones de imagen a los formularios de WordPress

Para este tutorial, usaremos WPForms conectar. Es el mejor plugin de creación de formularios de WordPress del mercado y le permite crear formularios fácilmente con un simple generador de formularios de arrastrar y soltar.

Primero, necesitará instalar y activar el archivo Plugin WPForms. Si no está seguro de cómo hacer esto, puede obtener instrucciones paso a paso en nuestra guía sobre cómo instalar un plugin de WordPress.

WPForms es un plugin premium de WordPress. También ofrecen una versión gratuita llamada WPForms Lite, que también tiene la función de elegir imágenes.

Creando el formulario con WPForms

Después de activar el plugin, vaya a la WPForms »Agregar formulario página en el panel de WordPress para crear un nuevo formulario.

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

Esto lanzará la interfaz del constructor 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.

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, arrastre y suelte el campo de opción múltiple de la sección Campos estándar en el lado izquierdo de la pantalla. Lo colocaremos justo encima del cuadro «Comentario o mensaje».

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 del campo en el lado izquierdo de la pantalla.

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

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.

Le recomendamos que utilice imágenes .jpg o .png que no midan más de 250 px por 250 px. Sus imágenes se verán mejor en su formulario si todas son del mismo tamaño.

Importante: WPForms no cambiará el tamaño de sus imágenes. Deberá asegurarse de que sean del tamaño que desea antes de cargarlos. Alternativamente, puede editar su imagen en WordPress antes de agregarla al formulario.

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

Cambiar cómo se muestran las opciones de imagen en el formulario

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

Puede marcar la casilla «Aleatorizar opciones» si desea mostrar sus opciones de imagen al azar, en lugar de en un orden particular. Esto es útil si está creando una encuesta y desea eliminar el sesgo de primer nivel en los resultados.

En «Estilo de elección de imagen», puede elegir cómo personalizar el estilo de la imagen. El estilo predeterminado es Moderno, que se ve así con las fresas seleccionadas:

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

Alternativamente, puede elegir «Ninguno» para el estilo. En este caso, sus imágenes serán simplemente imágenes normales sin bordes ni otros estilos. Las etiquetas se mostrarán con botones de opción.

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

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

También existe la opción aquí para «Ocultar etiqueta» para sus opciones de imagen. Esto significa que no habrá texto debajo de las imágenes. En algunos casos, puede tener sentido hacerlo. Por ejemplo, podría pedirle a las personas que voten por el nuevo diseño de logotipo que prefieran.

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

Agregar, eliminar o cambiar campos en el formulario

Puede agregar, eliminar o editar campos de formulario. Para editar un campo, 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 desmarque la casilla «Requerido» para que el campo sea opcional.

Para eliminar un campo, coloque el cursor sobre él y haga clic en el icono rojo de la papelera.

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

Agregar el módulo a su sitio web

Puede agregar su formulario a cualquier publicación o página de su sitio con solo un par de clics. Crearemos 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.

Encuentre el bloque WPForms en la sección Widgets o búsquelo usando la barra de búsqueda. Luego, haz clic en el bloque para agregarlo a tu página.

Luego, haz clic en el menú desplegable «Seleccionar un módulo» y haz clic en el nombre del módulo para seleccionarlo. Estamos utilizando nuestro formulario de pedido de cajas de frutas aquí.

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

Si desea realizar cambios en su formulario, puede encontrarlo a continuación WPForms »Todos los formularios en su tablero. Después de guardar sus cambios, el formulario también se actualizará automáticamente en su página.

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

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *