Gravity Forms es uno de los plugins más potentes (por no decir el que más) para crear formularios en WordPress, y en esta entrada te voy a explicar cómo funciona y qué puedes hacer con él.

 

Uno de los elementos más usados en una web son los formularios, ya sean simples formularios de contacto o formularios más avanzados para pedir todo tipo de datos.

Existen multitud de plugins en WordPress que te facilitan la creación de estos formularios, algunos gratis y otros de pago. El más conocido es Contact Form 7, un plugin gratuito bastante versátil. Si lo que quieres es crear un simple formulario de contacto, te puede servir y no hace falta que te gastes dinero.

Pero hay ocasiones en las que necesitas hacer algo más complejo que un simple formulario de contacto, y Contact Form 7 se puede quedar corto.

En esos casos, una de las mejores opciones es el plugin premium Gravity Forms, que viene con multitud de elementos que puedes agregar a tus formularios, como campos de texto, casillas de selección, selectores de fecha y hora, campos para subir archivos, para comprar productos, etc.

¿Quieres lo mejor para tu web y tu proyecto online?

Pues será mejor que eches un ojo a las mejores herramientas de creación y diseño web.

Luego no digas que no te lo advertí...

Una de las grandes ventajas de este plugin es que tiene montones de add-ons para ampliar las funcionalidades del mismo, como por ejemplo, add-ons de PayPal y Stripe para poder aceptar pagos fácilmente, integraciones con algunas plataformas de email marketing y CRM’s, para realizar encuestas, etc.

Sigue leyendo para saber cómo funciona y qué elementos puedes agregar a tus formularios.

Cómo crear un formulario con Gravity Forms

Cuando instalas el plugin gravityforms se crea una pestaña nueva en la barra de administración de WordPress.

Una de las cosas buenas que tiene Gravity forms es que está en español, ya que es un plugin multilingual que ha sido traducido a varios idiomas.

Para crear uno nuevo tienes que dirigirte a esa pestaña llamada “Formularios” y hacer clic en “Nuevo formulario”.

Te aparecerá una ventana en la que tienes que ponerle un título y opcionalmente una descripción que solo verás tú.

 

gravity forms

 

Al hacer clic en “Crear formulario” te llevará a la ventana de creación del mismo, que tiene un aspecto como en la siguiente imagen:

 

gravityforms

 

En la parte de la izquierda te explica los pasos que debes seguir para crear un formulario. Está bastante bien explicado, pero una vez empieces a crearlo estos pasos desaparecerán y si quieres volver a consultarlos tendrás que crear un nuevo formulario.

En la parte de la derecha están los campos que puedes añadir al formulario, ordenados por tipos (estándar, avanzados, de entrada y de precio).

Como bien explicado está, el siguiente paso para empezar a crearlo es hacer clic en cualquier campo que quieras insertar, aunque también puedes arrastrarlo con el ratón.

Desaparecerá la explicación de la izquierda y se convertirá en el apartado de edición del formulario. Por ejemplo, hago clic en el campo “Línea de texto”.

 

gravity forms woocommerce

 

Como ves, aparece el campo en la parte izquierda. Para añadir un nuevo elemento al formulario, haz clic en otro campo o arrástralo hacia el lugar donde quieras situarlo.

No tienes límite de campos, puedes añadir los que quieras a tus formularios, y en cualquier momento puedes ver cómo te está quedando haciendo clic en el botón “Previsualizar”.

Pero eso sí, para ver la previsualización antes tienes que hacer clic en “Actualizar” para que se vean reflejados los cambios.

Campos disponibles

Esta es la lista de todos los campos disponibles en Gravity Forms y una pequeña explicación de para qué sirve cada uno de ellos:

Campos estándar

  • Línea de texto: es el típico campo de texto para recoger datos como el nombre, apellidos, población, etc.
  • Párrafo: también típico campo donde el usuario puede escribir más texto que en la simple línea, utilizado comúnmente para que puedan escribir comentarios desarrollados.
  • Desplegable: al hacer clic aparecen varias opciones que previamente has definido y solo pueden elegir una.
  • Selector: un cuadro con varias opciones entre las que el usuario puede seleccionar una o más.
  • Número: es como una línea de texto pero que únicamente permite introducir números.
  • Casillas: crea opciones entre las que el usuario puede marcar una o más activando la casilla correspondiente.
  • Botones selección: crea opciones y el usuario solo puede marcar una de ellas, si marca primero una y luego marca otra diferente, se desmarca la primera automáticamente.
  • Oculto: se trata de un campo al que le pones una etiqueta, pero el usuario no lo ve porque no se muestra en el formulario. Cuando recibes los datos del formulario, entre ellos está esa etiqueta que le has puesto al campo. Se utiliza por ejemplo para saber desde qué página ha rellenado el usuario el formulario.
  • HTML: inserta un código HTML personalizado que tú escribes.
  • Sección: es simplemente una línea que sirve para separar una sección del formulario de otra.
  • Página: sirve para “dividir” el formulario en varias páginas o pasos. Cuando el usuario rellene los campos de la primera página, hará clic en un botón para pasar a la segunda fase del formulario, donde habrá más campos para rellenar.

Campos avanzados

  • Nombre: es un “pack” de campos destinados a que el usuario introduzca su nombre. Puedes elegir si mostrar o no los campos “prefijo”, “nombre”, “segundo nombre”, “apellidos” y “sufijo”.
  • Fecha: aparece un calendario para que el usuario elija una fecha.
  • Hora: son campos específicos para que el usuario introduzca una hora determinada.
  • Teléfono: es un campo para introducir y validar un número de teléfono, aunque está pensado para los números norteamericanos y con el resto de números no valida una mierda nada.
  • Dirección: inserta un conjunto de campos destinados a introducir una dirección postal: dirección, ciudad, provincia, país, etc. Puedes elegir qué campos mostrar u ocultar.
  • Web: campo destinado a introducir la URL de la web del usuario y que valida si la ha introducido correctamente o no.
  • Email: campo destinado a introducir el correo electrónico y que valida su correcto formato.
  • Subida de archivo: permite que el usuario suba uno o varios archivos, pudiendo restringir la subida por formato o peso del archivo
  • CAPTCHA: añade un CAPTCHA (confirmación anti-bots) de Google a tu formulario. Para utilizarlo tienes que registrarte en la URL que te dan y conectar el plugin Gravity Forms mediante una API.
  • Lista: permite solicitar varios datos a un usuario, que podrá ir rellenando a modo de lista.

Campos de entrada

Los campos que aparecen en este apartado corresponden a los elementos que tiene un post en WordPress:

Título, cuerpo, extracto, etiquetas, categoría, imagen entrada y campo personal.

Todos estos campos sirven para que cualquier persona pueda crear un borrador de una entrada simplemente rellenando el formulario.

Es decir, gracias a Gravity Forms, cualquier usuario de tu web podrá crear publicaciones en el blog o simplemente aportar ideas para que luego tú las publiques.

Campos de precio

Estos campos permiten calcular el precio de un producto utilizando varias variables.

  • Producto: puedes poner varios productos junto con el precio de cada uno de ellos y que el usuario elija el que quiera.
  • Cantidad: campo para que el usuario elija el número de unidades que desea.
  • Opción: con este campo puedes añadir opciones adicionales y la variación de precio que supondría. Por ejemplo, si el producto es una camiseta, puedes poner como opciones varios colores, siendo la camiseta de color azul X€ más cara que las del resto de colores.
  • Envío: en este campo introduces el precio que tiene el envío. Puedes poner varias opciones con precios diferentes.
  • Total: este campo se actualiza con el precio total según el usuario vaya eligiendo las opciones del resto de campos.

Ya sabes cómo insertar campos en Gravity Forms y para qué sirve cada uno de ellos, ahora vamos a ver cómo configurar sus opciones.

Cómo configurar los campos de un formulario

Gravity Forms permite configurar varios aspectos de cada uno de los campos. Para ello, hay que hacer clic en cualquier parte del mismo y se despliegan las opciones disponibles.

Una vez más, están ordenadas por categorías: General, Apariencia y Avanzado.

 

gravity forms addons

 

Si pasas el ratón por el interrogante que hay al lado de cada una de las opciones te explica bastante bien para qué sirve, pero voy a explicarlos por encima y a ver algunos ejemplos de manera más visual.

General

  • Etiqueta del campo: escribe aquí lo que quieres que introduzca o seleccione el usuario (ej: nombre, apellidos, dirección, sexo, fecha de nacimiento, etc).

 

gravity forms plugin

 

  • Descripción: puedes poner una pequeña descripción que acompañe al campo, se mostrará en la parte inferior.

 

gravityform

 

  • Máscara de entrada: sirve para guiar al usuario a la hora de introducir fechas, códigos postales, teléfonos (una vez más, está pensado para teléfonos norteamericanos).

 

gravity forms stripe

 

  • Caracteres máximos: limita los caracteres que el usuario puede escribir en el campo, y lleva la cuenta de los caracteres introducidos.

 

gravity forms paypal

 

  • Reglas: puedes marcar el campo como requerido para que el usuario no pueda enviar el formulario sin haberlo rellenado antes (se mostrará un asterisco al lado de la etiqueta) o marcarlo para que no pueda introducir un dato que ya esté almacenado en la base de datos (ideal para que no se registren dos personas con el mismo nombre de usuario, por ejemplo).

Apariencia

  • Marcador de contenido: muestra un texto dentro del campo que desaparecerá en cuanto el usuario haga clic encima y empiece a escribir.

 

gravity forms mailchimp

 

  • Ubicación de la descripción: puedes cambiar la ubicación de la descripción y ponerla encima del campo.
  • Mensaje de validación personalizado: puedes cambiar el mensaje de error que se muestra debajo del campo al enviar el formulario en el caso de que el usuario lo haya introducido mal.

 

gravity forms pdf

 

  • Clase CSS personalizada: en el caso de que quieras personalizar el campo con algún estilo CSS, tienes que escribir aquí la clase CSS.
  • Tamaño campo: tienes tres opciones para mostrar el tamaño del campo: pequeño, mediana o grande.

Avanzado

  • Etiqueta de administración del campo: si quieres que en la zona de administración aparezca otro nombre del campo diferente al que has puesto en la etiqueta, tienes que escribirlo aquí.
  • Valor predeterminado: puedes escribir un valor o elegir una de las opciones que vienen y el campo se mostrará al usuario ya rellenado con ese valor, aunque lo podrá eliminar o editar.
  • Habilitar entrada de contraseña: si activas esta opción, aparecerán los típicos puntos para ocultar el texto que escriba el usuario.
  • Visibilidad: puedes elegir entre que esté siempre visible, que esté oculto a la vista del usuario o que solo sea visible al administrar entradas enviadas.
  • Permitir al campo rellenarse dinámicamente: opción avanzada para que el campo se vaya autocompletando el texto gracias a unos parámetros que hayas indicado previamente.
  • Activar lógica condicional: esta es una interesante opción que permite mostrar o no un campo en función de lo que haya introducido el usuario en algún campo anterior. Más adelante veremos cómo funciona con mayor profundidad.

Cómo mostrar los formularios de Gravity Forms

Tienes dos maneras de insertar los formularios del plugin Gravity Forms en tus entradas y páginas.

La primera manera es haciendo uso del botón “Añadir formulario” que aparece en la pantalla de edición:

 

gravity forms tutorial

 

Al hacer clic en el botón, aparece una ventana en la que tienes que elegir el formulario que quieres insertar.

 

gravity forms examples

 

También puedes elegir si mostrar el título y la descripción del formulario. Haz clic en “Insertar formulario” y aparecerá un shortcode en el cuerpo de la entrada o página. Al hacer clic en “Vista previa” ya podrás ver el formulario en la página.

Otra opción para insertar un formulario es crear manualmente tú mismo el shortcode, que tiene que tener esta estructura:

Lo único que tienes que hacer es cambiar el “id” por el del formulario que quieres insertar, y en el caso de que quieras mostrar el título o la descripción, cambiar el “false” por “true”.

Hay otra opción para insertar los formularios mediante llamadas a funciones, pero es más avanzado porque hay que tocar archivos del tema que estés utilizando.

Si quieres más info de cómo se hace puedes ver esta página.

Conclusión

Como ves, Gravity Forms es un completísimo plugin para crear formularios de todo tipo en tu WordPress, que además cuenta con una gran variedad de addons para mejorar su funcionalidad.

Después de probarlo puedo afirmar de que es una auténtica pasada y una de las mejores opciones para recoger datos de tus usuarios.

Como ya te he dicho al principio y también habrás deducido tú, para crear un simple formulario de contacto no es necesario que te hagas con Gravity Forms, pero para todo lo demás, es una apuesta segura.

Si tienes alguna pregunta acerca de este plugin, te animo a dejarla en los comentarios y te contestaré encantado.

Y si quieres contar tu experiencia con Gravity Forms, también será bienvenida 😉

 

Imagen del artículo: teinstud / Freepik