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. Puedes verlo aquí.
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ú.
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:
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”.
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.
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).
- Descripción: puedes poner una pequeña descripción que acompañe al campo, se mostrará en la parte inferior.
- 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).
- Caracteres máximos: limita los caracteres que el usuario puede escribir en el campo, y lleva la cuenta de los caracteres introducidos.
- 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.
- 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.
- 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:
Al hacer clic en el botón, aparece una ventana en la que tienes que elegir el formulario que quieres insertar.
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:
[gravityfor id="8" title="false" description="false"]
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
Hola, estoy creando un formulario para reserva de taxis y necesito saber si un dia es domingo para incrementar su precio un 10%, algo asi como IF THEN XXX MOVE VALUE. ¿es posible con gravity?. Gracias
Hola Phillip,
Poder se puede, pero es más complicado de lo que nos gustaría. Lo estuve mirando hace poco para poder calcular el porcentaje del IVA, que viene a ser lo mismo que lo que quieres hacer tú, aunque no lo llegué a implementar.
Échale un ojo a esta página: https://docs.gravityforms.com/gravity-forms-pricing-adding-tax/
Aquí te explican cómo hacerlo, haz clic también en el enlace de «External Resources», donde lo explican paso a paso.
Un saludo.
Hola, cree una web desde cero con mis conocimientos técnicos algo antiguos, pero leyendo encontré tu magnifica guía. Se agradece! Consulta, en ves de que el usuario envié lo que llena en el formulario y se proceda a guardar, para su posterior edición por parte del mismo usuario?
Gracias
Buenas vibras!
Hola Giorgio,
Me alegro de que te sirva de ayuda mi web.
Respecto a tu pregunta, lo puedes hacer desde los ajustes del formulario. Tienes que activar la opción «Guardar y continuar» y poner el texto que quieras que le aparezca al usuario para guardar el formulario.
Un saludo.
Hola
Por favor, me gustaría saber si este plugin hace cosas similares a lo que describo a continuación:
Ejemplo:
El usuario de mi web contesta a un formulario en el que se le pide su fecha de nacimiento, después su altura , después su peso y finalmente la ciudad en la que vive
Una vez ha acabado de contestar, en la web aparece un mensaje que le dice que dados esos datos puede ser socio de la asociación.
Un millón de gracias!!
Hola Luisa,
Sí que se podría hacer lo que dices con Gravity Forms, utilizando la lógica condicional de los ajustes de confirmaciones.
Un saludo.
Muchas gracias!!!
Tengo una consulta que no se por donde entrar, tengo todo un formulario montado con gravity, pero al momento de ir a las entradas (entries) y querer hacer clic para seleccionar qué columnas mostrar, me aparece la pagina principal del admin de wordpress, sabes a que se deba esto? es decir no me aparecen los campos del formulario para poder seleccionarlos.
Hola Daniel,
No sé por qué te pasa eso, nunca me ha pasado. Siento no poder ayudarte.
Un saludo.
Alguien conoce la pocima para poder ocultar el campos «Precio Producto» en Gravity PDF?
Saludos Sergio!!
Hola Leonarda,
No he utilizado Gravity PDF y no sé si hay alguna opción para ocultarlo, pero con CSS no creo que tengas problema para hacerlo.
Un saludo.
Hola. Gracias por el articulo, es muy completo. Tengo una duda, a ver si me la puede aclarar alguien… ¿Es posible usar un formulario de GF para subir comentarios a una página?. Me gustaría que se pudieran subir comentarios a una pagina de wordpress y poder subir, opcionalmente, fotografias. Estos comentarios completos me gustaría poder verlos en la página (con un slider o similar), y las fotos, solo las fotos, también en otro.
No encuentro un plugin de comentarios que me deje hace esto, y se me ha ocurrido que, quizás con Gravity Forms se pudiese hacer algo así.
Gracias.
Hola Tomas,
Con Gravity Forms diría que no se puede hacer lo que comentas. Y se me hace difícil encontrar un plugin de comentarios que lo haga, sobre todo lo que mostrar por un lado los comentarios y por otro lado las imágenes.
Quizá utilizando custom posts se podría conseguir, pero habría que estudiarlo.
Un saludo.
Gracias Sergio. He hecho varias pruebas con GF y con otros plugins y no he podido hacer lo que buscaba. Al final he usado un plugin de «testimonios», que, retocando algo el formulario de entrada, me deja subir un comentario anónimo con una foto (solo una) y poder visualizarlo en un slider, una página, etc. Gracias por mirarlo y ayudar. Saludos.
Hola Sergio,
Estoy creando un formulario de Registro único y completo.
Tengo instalado :
– ToolSet + extensiones
– Gravity Form
– Gravity Forms User Registration
– Gravity Forms + Custom Post Types
– User Roles and Capabilities
He creado 2 CPTs ( AUTONOMOS y EMPRESAS) con sus campos personalizados.
He creado 2 tipos de usuarios (AUTONOMOS y EMPRESAS)
FORMULARIO: Usuario, contraseña, email y un desplegable para elegir el tipo de usuario
Hasta aquí todo genial ya que tengo creados los usuario de gravity forms y con condicionales adjudico el tipo de usuario que se elija (AUTONOMO o EMPRESA) al rol de usuario.
Me gustaría añadir varios campos de TITULO DE ENTRADA al formulario con la condicional – según el tipo de usuario que elija ( AUTONOMO o EMPRESA, poder añadir diferentes títulos de los CPT (AUTONOMOS y EMPRESAS) para así completar el registro en un solo paso, pero no me deja hacerlo, solo puedo hacerlo con uno al que asigne en el TITULO DE ENTRADA.
¿ Como podría añadir el titulo de entrada y demás campos personalizados de mis CPT en un único formulario con la condicional según el tipo de usuario que elija?
Hola Raul,
Pues diría que tal y como lo estás haciendo, con condicionales. Si el usuario elegido es empresas, que aparezca un campo, y si es autónomos, que aparezca otro campo.
Si no te deja hacerlo así, me temo que no es algo que se pueda solucionar fácilmente por aquí.
Un saludo.
Buen día!
Muy completa tu explicación
Estoy necesitando crear un formulario para que el administrador del sitio pueda cargar datos de alumnos egresados de una institución educativa
Por ejemplo, nombre, email, Teléfono y una foto
Ademas de la carga también necesito poder mostrar ese listado en algún lugar de la pagina ordenado por abecedario
Podrías darme una mano?
gracias!!
Hola Hugo,
Hay un plugin para mostrar los resultados como comentas, se llama GravityView, échale un ojo, y de paso échate unas risas con el vídeo de presentación que tienen, porque no tiene desperdicio.
Un saludo.
Buenos días…
Necesito implementar un formulario bastante complejo con muchos y variados campos con una colocación muy particular. En realidad es un formulario en formato Pdf y quiero ver la posibilidad de poder hacerlo con este plugin.
La gran pega es que el diseño es muy particular y no se puede desvirtuar su imagen. Tengo una plantilla en Pdf de como quiero que quede y podría hacértela llegar para que pudieras valorar si esto se podría hacer con este plugin.
Un saludo
Hola Luis,
Envíame un mensaje a través de contacto, a ver si te puedo ayudar, pero Gravity Forms viene con un diseño predeterminado y si lo quieres cambiar, hay que tirar de CSS para dejarlo a tu gusto.
Un saludo.
Hola. Queria saber si hay alguna manera de que el formulario quede guardado en la pagina de cada usuario. Para poder ver las elecciones qie hizieron en su momento. O mostrat las entradas del formulario en algun perfil aitomaticamente
Hola,
No me consta que haya opción para hacer lo que comentas, y tampoco conozco ninguna extensión para ello. Puedes preguntar a los creadores del plugin por si ellos te pueden ayudar con eso.
Un saludo.
Hola, estoy usando gravity forms con la extension de stripe, pero cuando realizan un pago me interesa que se guarde la tarjeta en la cuenta de stripe (crea cliente) igual que hace el plugin de stripe, hay alguna manera de activar esta opcion?
Gracias!
Hola Javi,
No estoy seguro de que se pueda, buscando por la web de Gravity Forms no he encontrado nada sobre ello, pero para salir de dudas, puedes preguntar a su soporte.
Un saludo.
hola. publico un formulario con gravity form y lo puedo ver como administrador pero no como visitante del sitio. que puede pasar?
Hola Eduardo,
No sé qué puede pasar sin investigarlo, no me ha ocurrido nunca. Si quieres que le eche un ojo, envíame un mensaje para mandarte presupuesto.
Un saludo.
Hola, he creado un formulario en Gravity Forms dentro de wordpress, y aunque activo las notificaciones, no lo recibo. Puede ser que falte algún plugin o me puedes dar una idea de lo que está mal?
Hola Aurora,
No deberías necesitar nada más para recibir las notifiaciones de Gravity Forms, y es bastante complicado decirte qué puede estar mal sin ver el problema, sorry.
Un saludo.
Hola amigo estoy creando un formulario donde tengo que ingresar la ciudad donde se encuentra la oficina hasta la ciudad donde se entregara el envio , clculando el peso y la cantidad de paquetes como podria hacer para calcular en base a km de ciudad a ciudad sin que me salga el valor de los kilometros.
Es posible con Gravity Forms poner el campo teléfono limitado a un formato y nº de caracteres de tal forma que si alguien pone un nº menos o más se lo indique? Gracias
Hola,
Sí, busca en este mismo artículo donde hablo de «máscara de entrada».
Un saludo.