En este post vamos a ver qué características tiene y cómo funciona el conocido plugin de formulario para wordpress Gravity Forms.

Este es un plugin de pago que tiene tres posibles planes de contratación:

1.- Licencia personal (personal license): El precio es de 39$ y con esta licencia el plugin solo lo podemos utilizar en un solo sitio web. El precio también incluye 1 año de actualizaciones y soporte. Pasado el año ya no podremos actualizar el plugin a no ser que renovemos la licencia.

 

DESCUENTO PLANTILLA DIVI
 


 

 

2.- Licencia Empresa (business license): El precio de esta licencia es de 99$ y permite utilizar el plugin en 3 sitios web. 1 año de soporte y actualizaciones.

3.- Licencia Desarrollador (Developer License): El precio de esta licencia es de 199$ y permite la utilización del plugin en todos los sitios web que queramos (no hay limitación). 1 año de soporte y actualizaciones.

 

Los precios actuales de renovación de licencia (siempre que se hagan en los 60 días posteriores al fin de la vieja licencia) son: Licencia desarrollador 99,50 $, Licencia Empresa 49,50 $ y licencia personal: 29,25$.

 

IR A GRAVITY FORMS

 

 

INDICE DEL POST

1.- Características de los formularios de Gravity Form

2.- Crear una nuevo formulario con Gravity Forms

3.- Añadir un campo al formulario Gravity Forms

4.- Gestionar y configurar campos del formulario

5.- Tipos de campos del formulario Gravity Forms

6.- Previsualizar e insertar el formulario

7.- Formulario en diferentes etapas o páginas

8.- Configuración general del formulario

 

 

1.- CARACTERÍSTICAS DE LOS FORMULARIOS DE GRAVITY FORM

 

Vamos a ver ahora algunas características generales de diferentes aspectos que ofrecen los formularios realizados con el plugin Gravity Forms para WordPress:

 

a.- Formulario en pasos o etapas: una de las principales características de los formularios realizados con el plugin para wordpress gravity forms es que podemos crear un formulario en diferentes páginas. Es decir que para completarlo el usuario tendrá que pasar por varios pasos o recorrer varias etapas.

b.- Títulos de sección: podemos crear títulos para cada una de las páginas del formulario (en caso de que lo queramos en varias páginas o etapas)

c.- Formulario con barra de progreso: con gravity forms podemos crear formularios en los cuales se muestre una barra de progreso con el porcentaje de formulario completado por el usuario (solo para formularios en varias páginas).

d.- Presupuesto online: el formulario para wordpress Gravity forms permite crear una presupuesto online en tiempo real. El visitante irá seleccionado opciones y productos y automáticamente le aparecerá el importe total del presupuesto.

e.- Múltiples campos: los formularios realizados con el plugin Gravity de WordPress permiten incluir múltiples campos como: campos tradicionales de formulario, campos avanzados, cálculo de precios, campos condicionales.

f.- Sistema arrastra y suelta: el formulario se construye de una manera muy intuitiva utilizando el conocido sistema de arrastrar bloques y soltarlos (drag and drop). El mismo sistema utilizado por los page builders de WordPress

h.- Botón enviar: permite añadir una imagen para el botón de finalizar el formulario.

i.- Página de confirmación: podemos crear un texto que aparecerá al usuario cuando envíe el formulario, podemos elegir una página de wordpress para que sea la que aparezca al enviar el formulario o podemos indicar una url específica.

j.- Campos para crear una entrada de blog wordpress: podemos crear un formulario que al rellenarlo generará de manera automática una nueva entrada de blog.

k.- Campo de adjuntar archivo: el formulario tiene un campo que permite añadir un botón que permite a la persona que está rellenado el formulario adjuntar un archivo (imagen, pdf, archivo comprimido, etc.)

 

 

2.- CREAR UN NUEVO FORMULARIO CON GRAVITY FORMS

 

Tras realizar la compra del plugin Gravity Forms y la instalación del mismo procederemos a crear un nuevo formulario. Para ello iremos a “Formularios > Nuevo formulario”, nos aparecerá una ventana emergente en la que tendremos que rellenar el título y descripción del formulario. Después pulsaremos el botón: “Crear Formulario”.

 

Crear un formulario para wordrpess con Gravity forms

Crear un formulario con Gravity forms

 

 

3.- AÑADIR UN CAMPO AL FORMULARIO GRAVITY FORMS

 

Para añadir un campo al formulario simplemente tendrás que hacer clic con el botón izquierdo sobre uno de los elementos que aparecer en la parte derecha de la interfece, arrástralo hacia la parte izquierda de la pantalla y soltarlos en su posición.

En la siguiente imagen puedes ver como arrastramos el campo “línea de texto” de la parte derecha de la pantalla a la izquierda.

 

Cómo añadir campos a gravity forms

Añadir campos al formulario Gravity

 

 

4.- GESTIONAR Y CONFIGURAR CAMPOS DEL FORMULARIO

 

Tras añadir un campo al formulario podemos desplegarlo para personalizarlo, duplicarlo o eliminarlo.

En la parte superior derecha del bloque tenemos tres iconos:

 

a.- Punta de flecha: sirve para desplegar y plegar las opciones de configuración del campo que hemos añadido al formulario.

b.- Duplicar: el icono de “dos hojas” sirve para duplicar el campo del formulario.

c.- Aspa: el icono del aspa sirve para eliminar el campo

 

como duplicar, configurar o eliminar un campo de gravity forms

Gestión de campos del formulario

 

En cuanto a la configuración del campo tienes tres pestañas: General, apariencia y avanzado

Si pones el ratón sobre el icono interrogación que hay en cada opción te aparecerá un pop-up explicándote en Español para qué sirve dicha opción (bastante bien explicado).

 

configurar campo del formulario

Pestañas de configuración de un campo del formulario e información de ayuda

 

 

5.- TIPOS DE CAMPOS DEL FORMULARIO GRAVITY FORM

 

Podemos añadir al formulario realizado con Gravity Forms y WordPress una infinidad de diferentes campos:

 

 

5.1.- CAMPOS ESTANDAR

 

Línea de texto: campo de formulario para introducir un texto

Desplegable: campo desplegable de formulario para seleccionar una opción

Número: campo numérico (sólo números) de formulario

Botones de selección: conocidos como “radio buttons” o botones de radio. El usuario solo puede elegir una opción.

HTML: campo de formulario permite introducir código html

Página: marca el límite entre los campos de una página del formulario y los campos de otra página.

Párrafo: campo de formulario Gravity forms para añadir una área de texto.

Selector: sirve para seleccionar una entre varias opciones. Las opciones aparecen en un área de texto (una por fila)

Casillas: más conocido como un check box. Las opciones aparecen precedidas por un pequeño cuadrado. Podemos seleccionar más de una opción.

Oculto: este campo no lo ve el usuario que está rellenado el formulario, pero nosotros si recibiremos la información que aquí se incluya.

Sección: las secciones sirven para poner los títulos de cada uno de los pasos o etapas del formulario.

 

campos estándar de formulario wordpress con gravity

Campos estándar para añadir al formulario

 

 

5.2.- CAMPOS AVANZADOS

 

Ahora vamos a ver una serie de campos más especializados.

Nombre: campo para introducir nombre y apellidos

Hora: campo de formulario específico para introducir hora y minutos

Dirección: con este se generarán campos para dirección, ciudad, código postal, provincia y país

Email: este campo de formulario comprobará que sea un email válido

CAPTCHA: para introducir un captcha es necesario crear una API de google

Fecha: campo que mostrará un calendario para seleccionar una fecha.

Teléfono: campo teléfono

Web: campo para introducir una url

Subida de archivo: este campo es muy interesante ya que permite añadir un botón para que la persona que está rellenando el formulario pueda adjuntar un archivo.

Lista: este campo permite a la persona que está rellenado el formulario introducir una lista de respuestas.

 

campos de formulario específicos de gravity forms

Campos de formulario avanzados de Gravity forms

 

 

5.3.- CAMPOS DE ENTRADA

 

Estos campos permiten generar una entrada de blog de wordpress

Título de la entrada: título que tendrá la entrada de blog. En este elemento se configurarán muchas opciones generales de la entrada

Extracto: pequeño extracto de contenido de la entrada de blog

Categoría: en este campo del formulario de gravity forms aparecerá un selector para elegir la categoría a la que pertenecerá la entrada de blog

Campo personalizado: campos personalizados añadidos a una entrada de blog estándar.

Cuerpo: contenido de la entrada de blog

Etiquetas: etiquetas (tags) de la entrada

Imagen entrada: en este campo del formulario aparecerá un botón para que la persona que está rellenado el formulario pueda añadir la imagen destacada del post.

 

campos para crear entrada de blog con formulario

Campos de formulario para entrada de blog

 

5.4.- CAMPOS DE PRECIO

 

Los campos de precio nos van a permitir crear una presupuesto online.

Producto: con este campo podemos añadir un producto con un precio fijo (o a definir por el usuario).

Opción: permite añadir diferentes opciones con diferentes precios asociadas a un producto.

Cantidad: permite al usuario establecer el número de unidades de un producto

Envío: permite establecer unos precios constantes por gastos de envío.

Total: este campo ofrecerá el importe total del presupuesto de manera automática cuando el cliente rellene los campos.

 

campos para presupuesto online con wordpress

Campos de formulario para crear un presupuesto online con Gravity forms y wordpress

 

 

6.- PREVISUALIZAR E INSERTAR EL FORMULARIO

 

Puedes previsualizar el formulario en cualquier momento haciendo clic en el botón con el icono del ojo que aparece en la parte superior con el texto “Previsualizar”.

Para insertar un formulario realizado con Gravity form en una entrada de blog o una pagina simplemente tendrás que hacer clic en el botón “Añadir formulario” que te aparecerá en el editor de wordpress. Al hacer clic te aparecerá una ventana emergente donde tendrás que elegir el formulario que quieres insertar entro los diferentes formularios creados, echo esto tendrás que hacer clic en el botón “Insertar formulario”.

 

insertar formulario Gravity en pagina o entrada wordpress

Cómo insertar el formulario en una entrada o página de wordpress

 

Si utilizas la plantilla Divi, que es mi plantilla favorita para wordpress. Podrás insertar el formulario en un módulo de texto de una sección estándar o una sección de ancho completo de la misma forma que he comentado antes.

 

 

7.- FORMULARIO EN DIFERENTES ETAPAS O PÁGINAS

 

Para crear una formulario separado en varias páginas. Es decir que haya que ir pasando diferentes pasos o etapas tendrás que hacer uso de los campos:

Página: introduce este campo después del último campo de formulario de cada página o etapa. Este campo separará una página de otra. Dividir el formulario en varias páginas activará de manera automática la barra de progreso.

Sección: utiliza este campo al principio de cada página para poner el título de cada página del formulario.

 

 

8.- CONFIGURACIÓN GENERAL DEL FORMULARIO

 

En la parte superior del formulario tienes uno iconos de engranaje con el texto “Ajustes”. Desde aquí podrás establecer una serie de opciones generales de configuración:

Ajustes de formulario: desde aquí establecerás donde aparecerá el texto los campos (las etiquetas), el texto del botón final del formulario (también se puede añadir una imagen) y alguna opción más.

Confirmaciones: desde este apartado podrás personalizar el mensaje de envío con éxito del formulario, enlazar a una página de wordpress o establecer una url personalizada.

Notificaciones: desde aquí crearemos y personalizaremos como serán los emails que la aplicación nos enviará cuando se rellene el formulario.