Gravity Forms: una mirada detallada a la edición personal

Gravity Forms de Rocket Genius es una poderosa herramienta para crear formularios simples o avanzados para WordPress. Cuando se trata de los mejores complementos de formularios de WordPress , Gravity Forms ha sido un claro líder durante años. Es un complemento premium que le permite crear y administrar fácilmente formularios, incluso agregar condiciones y estilo, crear varias páginas, limitar entradas y programar cuándo se activan los formularios, todo sin tener que tocar una sola línea de código. Además de todo eso, es intuitivo de usar.

En este artículo, veremos la edición personal de Gravity Forms , veremos sus características principales y veremos un formulario de ejemplo. Las imágenes de los ejemplos se tomaron de Unsplash.com.

  • Haga clic aquí para visitar el sitio web de GF:  Formas de gravedad
Instalación

Para instalar el complemento , cárguelo (seleccione Complementos en el tablero, haga clic en Agregar nuevo y luego seleccione Cargar) y luego actívelo. Una vez que el complemento esté activado, deberá pegar su clave de licencia y elegir algunas configuraciones. Una vez que el complemento esté instalado, verá Formularios agregados al menú de su tablero. Seleccione Formularios y luego vaya a Configuración para terminar de configurar Gravity Forms.

Clave de licencia

Pegue su clave de licencia en el campo y seleccione Siguiente. Gravity Forms no funcionará sin la clave de licencia.

Actualizaciones de fondo

Aquí puede optar por permitir que Gravity Forms se actualice automáticamente (esta es la configuración predeterminada y se recomienda) o puede realizar las actualizaciones manualmente. Recomiendo mantener la configuración predeterminada y seleccionar Siguiente.

Ajustes globales

La primera configuración en la configuración global es su moneda . La moneda se utiliza en los campos de precios y en los cálculos de precios de sus formularios. Hay 25 monedas para elegir.

El siguiente es el modo sin conflicto . Esto está desactivada por defecto. Habilite esto si hay algún conflicto con sus otros complementos o con Divi o temas secundarios. Esto evitará que se impriman estilos y scripts en sus páginas de administración de Gravity Forms.

El menú de la barra de herramientas mostrará el menú de formularios dentro de la barra de herramientas superior. Mostrará los últimos 10 formularios que ha abierto. Está activado de forma predeterminada.

La integración de Akismet utiliza Akismet para proteger sus formularios de las entradas de spam. Esto también está activado de forma predeterminada.

Recomiendo seleccionar su moneda y dejar el resto configurado por defecto. Pulse Siguiente para finalizar la instalación. Puede cambiar esta configuración en cualquier momento en el menú de configuración.

Nueva forma

Seleccione Nuevo formulario (en Formularios en el menú del tablero) y obtendrá una ventana emergente donde puede nombrar su formulario y darle una descripción.

A continuación, verá una pantalla con campos y un tutorial rápido que muestra cómo crear un formulario. Las instrucciones incluyen:

  1. Seleccione un tipo de campo
  2. Haga clic para agregar un campo
  3. Editar opciones de campo
  4. Arrastre para organizar los campos
  5. Guarda tu formulario

En la parte superior, verá el nombre del formulario en el que está trabajando junto a una flecha hacia abajo. La flecha hacia abajo abre una ventana modal con un cuadro de búsqueda y una lista de sus formularios. Aquí puede cambiar fácilmente entre formularios.

Debajo hay una franja de menú que incluye Editar, Configuración (para formularios, confirmaciones y notificaciones), Entradas y Vista previa. Esto le permite navegar a través de la configuración de su formulario actual. Veámoslos en detalle.

Editar

Todos los campos para crear los formularios se encuentran en el lado derecho de la pantalla. Prácticamente todas las configuraciones tienen un signo de interrogación que revela información sobre cómo usar esa función. Los campos se dividen en cuatro categorías:

  • Estándar (11 campos)
  • Avanzado (10 campos)
  • Publicar (7 campos)
  • Precios (5 campos)

Abra las categorías para ver los campos a elegir. Para crear el formulario, comience a hacer clic en los campos que desea agregar a su formulario. No importa el orden porque puedes arrastrarlos y soltarlos en el orden que quieras.

Después de hacer clic en los campos, verá que aparecen en su lienzo. Aquí podrás personalizar cada campo.

Al seleccionar los campos, se abre su configuración. La configuración contiene tres pestañas: General, Apariencia y Avanzado. La configuración es diferente para cada tipo de campo. Puede duplicar cualquier campo.

La configuración general incluye etiquetas, descripciones, una máscara de entrada, número máximo de caracteres, reglas, opciones, formato de número, rangos, cálculos, tipo de botón, texto de botón, etc.

La configuración de apariencia incluye campos de clase CSS, marcadores de posición, ubicaciones de descripción, mensajes personalizados, tamaños de campo, habilitación de interfaces de usuario, permitir que los campos se completen dinámicamente, etc.

La configuración avanzada incluye etiquetas, valores predeterminados, visibilidad, permite que el campo se complete dinámicamente, habilita la lógica condicional, la lógica condicional del siguiente botón, habilita el editor de texto enriquecido, etc.

Ajustes

Los ajustes incluyen Ajustes de formulario, Confirmación y Notificaciones. Aquí hay una mirada más cercana a cada uno.

Configuración de formulario

La configuración del formulario incluye:

  • Conceptos básicos: título y descripción
  • Diseño: etiqueta, descripción, ubicación de la subetiqueta y clase CSS
  • Botón: elija texto o imagen, ingrese el texto del botón y habilite la lógica condicional
  • Guardar y continuar: habilite la función Guardar y continuar
  • Restricciones: limite la cantidad de entradas, programe el período de tiempo en que el formulario está activo y requiera que los usuarios inicien sesión
  • Opciones de formulario: honeypot antispam (alternativa reCAPTHCA) y transiciones animadas

Confirmaciones

Cree la confirmación que se muestra después de que el usuario envía el formulario. Si no personaliza su propia confirmación, utilizará la predeterminada.

Notificaciones

Cree la notificación y decida a quién se envía. Puede dejar esto vacío si desea enviarlos al administrador de forma predeterminada.

Crear un formulario

Para este ejemplo, quería crear un formulario de RSVP para un evento. El formulario permitirá al lector ingresar su nombre y seleccionar si asistirá o no al evento. De lo contrario, el formulario utilizará lógica condicional para que no se muestren otros campos. Si van a asistir, se mostrarán otros campos donde pueden hacer selecciones de alimentos. Después de que hayan hecho sus selecciones, el formulario calculará el precio y les dará un total. He seleccionado ciertos campos según sea necesario y he dado valores de marcador de posición como ejemplos para el usuario. Los campos se nombran usando etiquetas descriptivas que son fáciles de entender para el usuario.

Este formulario incluye varios elementos lógicos condicionales. Solo preguntará cuántos hay en su grupo si asiste, y solo preguntará por opciones de comida si está cenando.

Las opciones de alimentos son campos de productos. Solo se mostrarán si el usuario selecciona que cenará. El campo Total utiliza los campos numéricos que se encuentran arriba para calcular un total. No seleccioné los campos para que los use. Solo seleccioné usar las entradas anteriores y hace el resto. El campo Total también usa lógica condicional, por lo que solo se mostrará si el usuario está cenando.

Avance

El formulario funcionó como se esperaba en el primer intento. La lógica condicional reveló la siguiente sección mientras tomaba mis decisiones. Esta vista previa no incluye ninguno de los estilos que puedo agregar, pero muestra cómo funciona todo. Si quisiera un formulario con varias páginas, simplemente agregaría un campo de página.

Formularios

El menú Formularios muestra su lista de formularios. Aquí puede elegir editar, ajustar la configuración, ver las entradas, obtener una vista previa del formulario, duplicar el formulario y eliminarlo. También puede verlos y ordenarlos por título, ID, entradas, vistas y porcentaje de conversión. También puede acceder a esta configuración desde el menú de WordPress en la parte superior de la pantalla. Cada formulario tiene sus propios elementos de menú desplegable donde puede elegir. También puede crear un nuevo formulario haciendo clic en Nuevo formulario. Te redirigirá al creador del formulario.

Agregar formularios a páginas y publicaciones

Se agrega un nuevo botón al editor visual que abrirá su lista de formularios. Esto también aparece en los módulos de texto dentro de Divi Builder.

Seleccione para agregar un formulario y obtendrá una ventana emergente modal con un cuadro desplegable y varias opciones. Elija el formulario que desea agregar y haga clic en Insertar formulario. También puede hacer algunas otras selecciones aquí, incluida la visualización del título y la descripción del formulario y permitir que AJAX envíe el formulario. Una opción avanzada le permite especificar el índice de tabulación inicial para los campos. Una vez que inserte el formulario, se colocará un código abreviado dentro de su contenido.

Aquí hay un vistazo a la forma estándar sin ningún estilo.

Aquí está el formulario usando un fondo oscuro dentro de la sección Divi. El texto del módulo se ilumina.

Este ejemplo utiliza una imagen en el fondo de la sección. Es una fila de dos columnas con el formulario en la columna de la derecha y la columna de la izquierda está vacía. Creé un fondo blanco para la columna de la derecha con una opacidad del 80 % y un relleno de 50 en todos los lados. El texto se establece en oscuro. Esto funciona muy bien para eventos como bodas, reuniones familiares, reuniones, fiestas, etc.

Confirmación

Una vez que el usuario ingresa su información y presiona el botón Enviar, recibe un mensaje que confirma que ha recibido su entrada. Puede personalizar este mensaje, pero he usado la configuración predeterminada. Obtendrá los resultados en su correo electrónico (o el correo electrónico que especificó en la configuración).

Entradas

Entradas le da una lista de cada entrada para cada formulario. Puede verlos, marcarlos como leídos o como spam y eliminarlos. Las columnas son los campos del formulario. Puede elegir qué campos mostrar.

Ver la entrada le brinda toda la información en una página de estilo de hoja de cálculo. Puede editar, marcar como spam, reenviar la notificación e incluso imprimirla. También puede tomar notas y enviar la nota como un correo electrónico.

Importación y exportación

Puede importar formularios y exportar sus formularios y entradas. Los formularios se exportan como un archivo JSON. Importar y exportar formularios es sencillo, pero hay más en la exportación de entradas. Primero, elija el formulario, luego seleccione todos los campos que desea incluir. Luego establezca la lógica condicional y establezca rangos de fechas si es necesario. La lógica condicional le permite elegir todos los campos o campos individuales que contienen un cierto valor o es un cierto valor. Puedes añadir tantas condiciones como quieras. Las entradas se exportan como archivos CSV.

Estilismo

Por defecto, Gravity Forms está diseñado para verse bien con casi cualquier tema. Pero parte de lo que hace que tanto WordPress como Gravity Forms sean geniales es su flexibilidad. Y ese sigue siendo el caso cuando se trata de estilo. Si el aspecto predeterminado de Gravity Forms no es el que usted preferiría, han hecho que CSS pueda orientar todos los elementos para obtener exactamente el aspecto que está buscando.

Clases de CSS personalizadas

Otra forma de diseñar los formularios es mediante el uso de una clase CSS personalizada. Varias listas de clases preparadas están disponibles en la documentación. Copie y pegue la clase CSS en la configuración de Apariencia para cada campo. Otro lugar donde puede agregar la clase CSS es en Configuración, Configuración de formulario y Clase CSS.

Estos son algunos de los tipos de clases de CSS proporcionados en la documentación.

Clases preparadas para CSS

Las clases listas afectan el diseño. Con Ready Classes puede agregar varias columnas, crear un formulario en línea fluido, mostrar listas, crear un formulario horizontal, crear texto de desplazamiento, crear secciones, etc.

Ejemplos de orientación de CSS

La documentación también incluye muchos ejemplos de CSS para crear estilos. Cada detalle de cada campo se puede diseñar utilizando estas muestras de orientación. Entonces, si desea un fondo de color diferente dentro del campo, un color diferente para una determinada fuente o desea que un campo tenga un borde, puede hacerlo con estos ejemplos. Simplemente cópielos y péguelos, y luego modifíquelos según sus necesidades.

Licencia, Precio, Actualizaciones, Soporte

Hay tres precios dependiendo del tipo de licencia que quieras:

El desarrollador cuesta $ 199 por año y se puede usar en sitios web ilimitados, funciona con múltiples sitios e incluye complementos básicos y avanzados.

El negocio cuesta $ 99 por año. Se puede usar con 3 sitios web e incluye complementos básicos.

Personal cuesta $ 39 por año y se puede usar en 1 sitio web. No incluye complementos.

  • Haga clic aquí para ver las opciones en el sitio web de GF:  Gravity Forms

Las actualizaciones y el soporte son por 12 meses. El soporte se proporciona a través de un sistema de tickets. La licencia Business y Personal incluye el sistema de tickets estándar, mientras que la licencia Developer incluye un sistema de tickets prioritario.

Extensiones

Hay 35 extensiones para dar más funcionalidad a sus formularios. Por ejemplo, con un complemento de CRM, puede usar formularios de gravedad como un complemento de CRM para integrar un CRM con su sitio. O, con el complemento de Mailchimp, puede funcionar como un complemento de boletín informativo para crear un formulario de suscripción por correo electrónico. Su acceso a ellos se basa en la licencia que elija.

La licencia Business incluye:

  • Campaña activa
  • AWeber
  • Monitor de campaña
  • alcance inteligente
  • emma
  • Obtener una respuesta
  • Yo contacto
  • mimi loca
  • MailChimp

La licencia de desarrollador incluye todas las extensiones de la licencia comercial y agrega:

  • CRM ágil
  • neto
  • Libro de lotes
  • Brisa
  • Hoguera
  • Cápsula CRM
  • cupones
  • buzón
  • FreshBooks
  • ayuda scout
  • Alto
  • HipChat
  • Entradas parciales
  • Paypal
  • Pagos de PayPal Pro
  • Centro
  • Prueba
  • Firma
  • Flojo
  • Raya
  • Encuesta
  • Trello
  • Twilio
  • registro de usuario
  • Zapier
  • CRM de Zoho

Documentación

La documentación se proporciona en el sitio web. El menú del tablero incluye Ayuda que tiene enlaces a la documentación del usuario, desarrollador y diseñador. Los enlaces lo llevan directamente al tema que desea. También incluye un enlace a la página de preguntas frecuentes. El sitio web incluye guías de usuario y una base de conocimientos. Se puede buscar documentación en línea. Me pareció fácil de navegar y tenía todo lo que buscaba.

Pensamientos finales

Gravity Forms es un potente creador de formularios con muchas funciones. Los formularios me parecieron fáciles e intuitivos de crear. El ejemplo que creé para RSVP (incluida la lógica condicional) se creó sin mirar la documentación.

No tiene formularios prefabricados para que pueda comenzar, pero los formularios son fáciles de crear. El estilo podría ser más simple, pero con la documentación puede copiar, pegar y modificar los estilos para crear un formulario que coincida con su marca o necesidades. La licencia Personal puede crear la mayoría de formularios que la mayoría necesitará. Las extensiones mejoran enormemente los tipos de formularios que puede crear.

La facilidad de crear formularios eligiendo los campos, arrastrándolos y soltándolos donde desee, agregando condiciones, programando, realizando cálculos de precios, limitando entradas por formulario, personalizando las confirmaciones por formulario y recibiendo esas entradas en cualquier correo electrónico que especifique hace que Gravity Forma una excelente opción para los usuarios de WordPress de todos los niveles.

¿Has probado Gravity Forms? ¡Háganos saber su experiencia en los comentarios a continuación!

Imagen destacada de Oleh Markov / shutterstock.com