TUTORIAL Gravity Forms para crear formularios en WordPress

​

Este apartado, lo usaremos para configurar las claves que nos genera al utilizar el servicio gratuito de Google reCAPTCHA, y después poder utilizar campos reCAPTCHA en nuestros formularios para poder evitar así el pesado spam. Pero si no vamos a utilizar en formularios ningún campo reCAPTCHA, no necesitaremos configurar esta sección, y la dejaremos vacía.

Al pulsar sobre el botón de crear formulario, nos aparece una pantalla con un tutorial donde nos indica en 5 pasos cómo tendremos que hacer para crearlo.

Como es tontería que ponga yo por aquí de nuevo los 5 pasos, lo que vamos a centrarnos a continuación en este tutorial es, en explicar por encima cada campo que podemos añadir al formulario, los cuales están agrupados en 4 grupos de campos:

• Campos estándar
• Campos avanzados
• Campos de entrada
• Campos de precio

Existen 3 tipos de pestañas cuando seleccionamos un campo y lo añadimos al nuevo formulario que estemos creando:

• Etiqueta de administración del campo: esta opción sirve para cambiar el nombre del campo cuando estamos administrándolo, por ejemplo a través de las entradas recibidas en dicho campo o para la lógica condicional que veremos a continuación.

• Valor predeterminado: esta opción nos pre-rellena el campo por nosotros con el valor que le pongamos. Es útil a veces para campos en los que queramos que tenga un valor inicial o común, y así el usuario no tener que molestarse en introducirlo. ¡Cuidado no confundirlo con la opción de "marcador de contenido" de la pestaña apariencia!, ya que en aquel caso no pre-rellena el campo con un valor sino que nos aparece un mensaje en forma de "pista" para que lo rellenemos. En cambio aquí sí que aparece ya rellenado con el valor que le hayamos puesto.
• Habilitar entrada de contraseña: esta opción si la marcamos convierte nuestro campo en la típica caja de texto que al escribir nos muestra puntitos negros en lugar del texto que escribimos. Especialmente reservada para campos dedicados a la introducción de contraseñas.
• Visibilidad: esta opción nos permite configurar la visibilidad de nuestro campo en 3 estados: visible, oculto (el campo está oculto cuando se ve el formulario. Útil cuando necesitas la funcionalidad de este campo pero no quieres que el usurario pueda verlo) y administrativo (sólo es visible al administrar entradas enviadas. El campo no es visible o funcional cuando se ve el formulario). 
• Permitir al campo rellenarse dinámicamente: esta opción serviría para rellenar el campo a través de un parámetro que escribimos en la caja de texto que nos abre. Este parámetro después lo utilizaremos por medio de query strings, shortcode y/o hooks. 
• Activar lógica condicional: esta opción nos otorga poder crear una serie de reglas basadas en los valores de otro campo para mostrarlo u ocultarlo. Por ejemplo si el valor que metemos en el primer campo es mayor o igual que cierta cifra, o si comienza por una letra, etc.

También nos aparece un menú en la parte superior, con diversas opciones sobre el formulario:

Este campo suele ser uno de lo más usados y comunes en los formularios y nos sirve para introducir cualquier texto corto que queramos introducir en nuestro formulario. Ejemplos comunes: nombre, primer apellido, segundo apellido, teléfono, email,...

Estos ejemplo comunes, como veremos más adelante también podremos ponerlos con el grupo de campos avanzados, ya que estarán especialmente diseñados para cada uso específico, lo que pasa es que a veces es preferible hacerlo de manera individual, o sin las reglas que nos ofrecen los campos avanzados, y por ello lo haremos con este tipo de campo.

Veamos un ejemplo de este campo línea de texto:

El campo párrafo nos sirve para poder escribir un texto más amplio que los que podamos introducir con un campo de línea de texto. Es el típico campo para escribir el mensaje como hacemos en un correo electrónico o para detallar algo debido a que nos permite la introducción de más cantidad de caracteres.

Las opciones que trae son muy similares a las de un campo de línea de texto, exceptuando la ausencia de máscara de entrada y una nueva opción para limitar el nº de caracteres máximos que pueda contener el campo.

El campo desplegable es el que comúnmente solemos utilizar en los formularios para elegir una opción determinada de un listado (provincias, países, edades,...).

Con el botón añadir por lotes / Opciones predefinidas nos ahorraremos el tener que ir añadiendo cada opción de los desplegables más comunes y utilizados como pueden ser: Países, Edades, Géneros, Meses,...

El campo selector es idéntico a un campo desplegable, con la única diferencia de que en este podemos elegir más de una opción a la vez (pulsando la tecla CTRL). En cambio en un campo desplegable, únicamente podemos elegir una opción. También se diferencia en que no trae la opción "Sin duplicados" que sí trae el campo desplegable.

El campo número nos servirá para cualquier dato que tenga que ser de tipo numérico, y sus opciones de configuración nos otorgan la facilidad de poder usarlo en diferentes formatos de número, limitándolo a un rango específico que le indiquemos o dinámicamente a través de un cálculo matemático.

Este campo es muy similar en configuración a un campo selector, incorporando una nueva opción llamada "Seleccionar todo" por si quisiéramos ofrecer al usuario en el formulario esa posibilidad de seleccionarse todas las casillas.

Este campo también es del estilo a los campos selector y casillas en cuanto a configuración, incorporando la nueva opción llamada "Habilitar opción 'Otra'", para añadir un campo de texto como opción final, para casos en los que el usuario no encontrase su opción dentro del listado. La gran diferencia de este tipo de campo frente a los campos selector y casillas es, que estos botones nos sirven para que en nuestro formulario únicamente podamos elegir una opción de todas las listadas.

Este campo nos puede ser muy útil a veces para recopilar datos ocultos cuando un usuario rellena y envía un formulario. Por ejemplo, podríamos necesitar la fecha actual en la que se envía el formulario, o recopilar la dirección IP del usuario, etc. Esto lo haremos en la pestaña avanzada del campo, que es la que más usaremos dado que la pestaña general no la tendremos que utilizar casi nada porque únicamente trae una opción para configuración de la etiqueta del campo. En la opción de valor predeterminado de la mencionada pestaña avanzada, lo podremos configurar.

El campo HTML es un campo que usaremos para incluir cualquier código en lenguaje HTML que necesitemos, como por ejemplo una capa personalizada con un determinado mensaje para avisar al usuario de algo antes de rellenar el formulario, o algún script de analytics, etc.

El campo sección nos servirá para organizar nuestros campos dentro de un formulario, colocando un título o cabecera al empiece de cada grupo de campos. Por ejemplo, nuestro formulario podría tener primeramente un grupo de campos para la introducción de datos personales del usuario. Entonces primeramente pondremos un campo sección con la etiqueta Datos Personales, para identificarlos con ese título. Después, podríamos tener otro grupo de campos distintos, cuya sección podríamos llamar Otros Datos, etc.

El campo página sirve para organizar y dividir nuestro formulario en varias páginas. Al añadir el campo, nos muestra 3 tipos de opciones para configurar:

• COMIENZO PAGINACIÓN
• SALTO DE PÁGINA
• FINAL PAGINACIÓN

La opción Comienzo Paginación, nos saldrá automáticamente al inicio de todos los campos que hayamos añadido al formulario. Nos servirá para configurar diversas opciones de la paginación, como indicar si queremos que muestre una barra de progreso o pasos para facilitarnos conocer por dónde nos encontramos cuando estamos rellenando el formulario, un color para dicha barra, un nombre a cada página, etc.

La opción Salto de Página, servirá para indicar dónde queremos que finalice una página entre todos los campos que hayamos añadido al formulario. Tienes que tener en cuenta que si has añadido este campo página al final de todos los campos que hayas ido añadiendo, al previsualizar el formulario te saldrá un mensaje de aviso, indicándote que tienes que realizar el salto de página entre los campos que tengas:

Para ello, por tanto, tienes que arrastrar el campo Página la primera vez que lo añadas o después ya la opción de Salto de Página, a una zona de nuestro formulario que esté entre otros campos ya añadidos, para así proceder a realizar el salto de página que necesitamos.

Una vez arrastrado y colocado en su sitio correspondiente, esta opción de Salto de Página, lo que nos mostrará para configurar son los típicos botones de Siguiente y Anterior para pasar de una página a otra:

La opción Final Paginación, se nos colocará automáticamente al final de todos los campos añadidos, y en ella configuraremos el texto que tendrá el botón final de página, para poder retroceder a la página anterior: