Desde hace tiempo llevo manejando el plugin de formularios incluido Gravity Forms y la verdad aún no he encontrado otro que lo supere en versatilidad, te sirve desde hacer un simple formulario de contacto (vale quizás sea un poco matar moscas a cañonazos) hasta realizar complejos formularios de cálculos de precios para woocommerce e infinidad de usos más, darle tus estilos CSS e incluso puedes añadir imágenes a un formulario de Gravity Forms que ya tengas en tu librería de medios de WordPress.
Este plugin te permite crear varios tipos de formularios que se pueden conectar entre sí y tu web además de con tus usuarios, interactuar con ellos y con ello las posibilidades de aumentar las conversiones.
Agregar imágenes un formulario de Gravity Forms puede mejorar aún más la usabilidad por parte del usuario, personalizar o agregar más visibilidad al formulario y garantizar que transmites el mensaje que quieres con tu formulario para la conversión.
Con Gravity Forms, incluir tus imágenes en los formularios se hace de manera rápida y sencilla tal como te voy a mostrar a lo largo de este artículo, te comento algunas de las formas que podemos tener para incluir las imágenes que quieras en los formularios, y si te resulta complicado o quieres hacerlo de manera más sencilla, hay un plugin con certificado para Gravity que te permite hacerlo de manera aún más intuitiva.
Vamos a ello.
Índice
Subiendo imágenes
Como ya te he dicho en Gravity Forms podemos mostrar nuestras imágenes dentro de nuestro formulario, puedes usar imágenes relacionadas con la temática del formulario, añadir alguna en plan “decorativo”, un gráfico (en formato imagen) o agregar tu logotipo a los formularios y ayudar a reforzar tu imagen de marca.
Lo primero de todo que necesitamos para añadir una imagen a un formulario de Gravity, es cargar la imagen elegida en nuestra biblioteca de medios del sitio web si no la tenemos subida ya. Para esto simplemente nos vamos a Medios y añadimos uno nuevo, dentro del back de WordPress Medios > Biblioteca > Agregar nuevo > Seleccionar archivos .
En esta parte simplemente vamos a navegar en nuestro equipo para seleccionar la imagen que queremos usar, la cargamos en la biblioteca de medios; una vez que ya la tenemos subida, pues ya tenemos la imagen lista para incluirla en nuestro formulario.
Agregar una imagen a un formulario
Lo primero que vamos a hacer para agregar nuestra imagen a nuestro formulario, pues es lógico que tendremos que abrir el formulario concreto y añadir un campo a este, en este caso el campo HTML (dentro de los campos estándar) y ponerlo en la ubicación donde queramos que salga nuestra imagen.
Una vez hemos añadido nuestro campo, vamos a tener que ir a la biblioteca de medios de WordPress y la vamos a seleccionar, dentro de la ventana que se nos abre nos dará la opción de copiar la URL donde está guardada, así que nos la copiamos.
Volvemos a nuestro formulario y pinchamos en campo HTML donde vamos a añadir la imagen y el código para insertarla, pegando la URL de la imagen copiada que queremos añadir, el trozo de código sería + la URL de tu imagen:
<img src=”Pegar la URL del archivo de imagen aquí”>
Ahora si queremos ver como nos sale, tendremos que guardar el formulario y haciendo clic en el botón de vista previa que tenemos disponible en la parte superior del formulario, podemos comprobar como ha quedado insertada nuestra imagen en el formulario de Gravity Forms, ten en cuenta a la hora de añadir imágenes que no estamos modificando el tamaño, así que procura tenerla en el tamaño adecuado con que la subas si no conoces algo de lenguaje HTML o CSS.
Puedes agregar tantos campos HTML con imágenes como quieras y en cualquier parte del formulario, además este campo HTML nos puede dar bastante juego a la hora de usarlo, ya que lo podemos utilizar para agregar cualquier tipo de contenido HTML o incluso código Javascript y aumentar las funcionalidades de nuestros formularios.
Añadir imágenes a otros campos de formulario
Pero lo bueno que tiene Gravity Forms, es que aparte de añadir imágenes en el campo HTML podemos agregar nuestras imágenes dentro de otros campos. Esto puede ayudar por ejemplo en campos de opciones donde podemos mostrar una imagen diferente para cada opción y ayudar al usuario a elegir más fácilmente la opción que quiere.
Para conseguir esta configuración lo primero es elegir el campo de formulario apropiado para después poder mostrar las opciones del formulario con nuestras imágenes. Vamos a usar el campo Botones de radio
Iremos a la configuración del campo de botón de opción > General > Opciones , puedes editar el texto de cada botón de opción y agregarles una imagen para cada uno. El proceso de añadir imágenes en este tipo de campo es muy similar al del campo HTML, buscamos la imagen en el archivo de medios, copiamos la URL y la insertamos en el campo mediante el código HTML <img src=”Pegar la URL del archivo de imagen aquí” /> y poniendo la URL de la imagen
El paso anterior lo hacemos para todos los campos de opciones que necesitemos, una vez añadidas nuestras imágenes simplemente volvemos a guardar el formulario y después podemos ver una vista previa del formulario de Gravity Forms para ver si están correctas.
Otra de las opciones que podemos tener, es que quizás queramos que nuestros botones con imágenes se nos presenten en dos o más columnas, en Gravity podemos usar clases CSS predefinidas para hacer esto desde la configuración de campo -> apariencia -> Clases de CSS, la opción de dos columnas es gf_list_2col.
Si quieres más información sobre las clases de CSS puedes consultar la documentación disponible en esta Guía de Ready Classes de CSS para Gravity Forms.
¿Prefieres usar un plugin?
Si no sabes o por el motivo que sea no quieres añadir directamente el código HTML a los campos de formulario, existe un plugin para Gravity Forms con el que puedes hacer esto mismo en lugar de añadir código. Gravity Forms Image Choices es un plugin premium de uno de los desarrolladores certificados de Gravity .
Con este plugin vamos a poder incluir nuestras imágenes sin problemas en los campos Casilla de verificación o Botón de radio, incluso nos permite activar la opción de caja de luz para que nuestros usuarios puedan ver mejor la imagen si lo desean. Este plugin también es compatible con los campos de otros plugins para Gravity Forms como Polls, Surveys, y Quiz, así como con los campos de Producto de opción de Casillas de verificación o Botones de radio.
Conclusiones
Efectivamente, mostrar imágenes en un formulario puede mejorar significativamente la estética y la experiencia del usuario, así que yo recomiendo tomarte el tiempo de añadir imágenes a tus formularios, no tanto si es un simple formulario de contacto donde no se suelen poner muchos campos, pero si en formularios más complejos donde ya requiramos más interactividad con el usuario.
Ya ves que con el plugin Gravity Forms tienes varias opciones para hacerlo y solo tienes que elegir la que más te interese a ti, no tiene ninguna complicación elijas en método que elijas.
