Saltar al contenido
Closer Marketing

La guía completa para crear formularios en WordPress

En cualquier sitio web, crear contenido de calidad es tan importante como comunicarse con su audiencia y comprender sus necesidades. Hay un elemento web que ayudará a sus visitantes a conectarse con usted: formulariosEn este artículo, voy a compartir los beneficios y características de uno de los mejores complementos de WordPress que existen: Gravity Forms.

Si su solicitud es pequeña y no desea gastar dinero, le recomiendo que visite nuestro artículo. Formulario de contacto 7Hemos explicado en detalle cómo funciona. No podemos esperar una panacea para la forma, pero proporciona la funcionalidad básica para darle forma a su proyecto.

¿Qué forma de gravedad?

Gravity Forms es un complemento avanzado de WordPress para crear y administrar formularios para su sitio web.No tiene análogos en términos de funcionalidad, simplicidad y facilidad de uso. Por supuesto, las mejores cosas no siempre son gratuitas, por lo que tendremos que gastar algo de dinero en una de las licencias para acceder a este excelente complemento de WordPress.

Las licencias están bien separadas. Si es una pequeña empresa o necesita acceso total a esta tecnología en todos los proyectos, solo tiene que pagar lo suficiente.

Como puede ver, es para la licencia «Licencia básica“Casi no hay restricciones: no hay restricciones en el formulario, incluso si no tiene la misma prioridad que una licencia superior, aún obtiene soporte técnico.

Como puede ver, el paquete más simple ya está listo.

Beneficios de la gravedad

Si aún no ha decidido utilizar este complemento de formulario de pago o no está seguro de si Gravity Forms mejorará su experiencia actual con otros complementos, esta es su parte. Empecemos:

  • Simple y poderoso

    El editor de arrastrar y soltar simple y fácil de usar te enamorará Desde el primer segundo. Le brinda una interfaz de usuario muy simple, por lo que Formulario de funciones disponible con solo unos pocos clicsEsto no significa que puedas dedicar un poco más de tiempo y tomar la forma de tus sueños.

  • Amplia selección de campos

    Parte de su sencillez Ubicado en la barra lateral con muchos campos predefinidosEsto le permite crear formularios muy fácilmente y dedicar más tiempo a diseñarlos y personalizarlos correctamente.

  • Protección contra el spam

    Gravity Forms le ofrece un motor anti-spam muy poderoso, ya sea a través de Código de verificación o cebo antispam
    Explicaremos estas funciones más adelante.

  • Integración mediante complemento

    Esta parte depende de la licencia que haya firmado, porque cuanto más alta sea, más extensiones estarán disponibles para su formulario. Mencionaré algunos de ellos aquí, por ejemplo Paypal, cinta En la gestión de pagos Después de chimpancé Como herramienta de marketing por correo electrónico o Encuesta Haz una encuesta agradable.

Gravity Forms es práctico y versátil. Pero si lo usa, lo encontrará. ¡Vamos a trabajar!

Cómo instalar Gravity Forms

Instalar Gravity Forms es muy fácil, aunque esto no suele ser lo que solemos hacer en el repositorio de WordPress como lo hace este plugin. Alta calidadGravedad de la planta secundaria Debes hacer lo siguiente:

  1. Descargue el complemento Gravity Forms del sitio web oficial.Primero Debes tener una cuenta en la página oficial del formulario de gravedad. Por supuesto que hay Compró una de sus licencias Visite la descarga del instalador del complemento.Cómo descargar una tabla de gravedad
  2. Descargar archivos.Una vez que haya descargado el instalador, deberá Abra su panel de WordPress y luego en la pestaña Complementos Realiza esta instalación «manual».
    Próximos pasos: Cargar complemento -> seleccionar archivo Y debe seleccionar el complemento con el nombre de estilo «gravityforms_2.4.11.zip» en el navegador de archivos y luego hacer clic en el botón nuevo Instalar ahoraAgregar complemento Gravity Forms
    Después de un tiempo, lo instalará.
  3. Activa el complemento.Sin embargo, el complemento no se activa automáticamente después de la instalación. Tienes que activar eso En la pestaña Enchufar
    Cómo activar el complementoEs tan fácil como encontrar formas de gravedad Haga clic en el botón de activación
  4. Verifique su licencia de Gravity Forms.Al final solo queda entrar, para ello debes ir a una nueva pestaña llamada. andar formulario Y encuentra el submenú melodíaActivar licencia de productoIngresa el código de licencia en el campo correspondiente y, si todo es correcto, se le presentará un mensaje que indica que es válido y que puede usar Gravity Forms.
  5. Actualice el complemento.Como pauta general, antes de comenzar, ya sea para algunas funciones nuevas o, lo más importante, para las correcciones de errores descubiertas: Necesitas actualizar regularmente Gravity Forms y cualquier otro complemento que instale en WordPress.

WordPress de Gravity Forms: Cómo configurar

Al igual que con cualquier complemento, debe asegurarse de que todo esté configurado correctamente para que Gravity Forms funcione de manera óptima.

Encuentra este parámetro Vaya a la barra lateral izquierda de WordPress.… verá una nueva sección llamada formulario Cuando se muestra, puede elegir entre las siguientes opciones melodía

Configuración del complemento

Entonces déjame mostrarte Ajustes de gravedad óptimos En el momento de escribir. Le sugiero que haga lo siguiente:

  • Insertar CSS: Esta es una excelente manera de agregar código CSS a su formulario. Si comprende este lenguaje de marcado y desea personalizar el formulario, habilítelo.
  • Utilice HTML5: Al igual que CSS, se puede utilizar para agregar código HTML personalizado a un formulario. Recomiendo mantenerlo activo ya que siempre agregará algunos detalles al HTML con el tiempo.
  • Modo libre de conflictos: Dado que otros complementos y temas pueden tener problemas, esta opción existe porque interfiere con el código de Gravity Forms. Por lo tanto, intente activar este campo en caso de errores.
  • Divisa: Aquí debe seleccionar la moneda que desea utilizar.
  • Actualización automática: Aquí puede decidir si se deben activar las actualizaciones automáticas. Si lo olvidas fácilmente, te sugiero que lo hagas automáticamente. A no ser que, es mejor actualizar manualmente con regularidad.
  • Menú de la barra de herramientas: Esto le permite mostrar u ocultar el menú de la barra de herramientas. Es mejor mantenerse activo ya que esto le ayudará a trabajar más rápido.
  • anote: El registro le permite depurar y ver posibles errores en la tabla de gravedad. Cuando los recursos se están agotando, recomendamos desactivarlo, ya que ralentiza todo el sistema.

De esta manera, puede personalizar reCAPTCHA más tarde (si corresponde). Todo lo que tiene que hacer es completar los campos obligatorios y luego personalizarlos para que pueda usarlos en el formulario.

Configuración del código de confirmación


Cómo usar la forma de la gravedad

Antes de comenzar y crear su primer formulario, le recomiendo que lea esta sección. Lo guiaré a través de la configuración interna del formulario, los campos que puede usar y cómo personalizar esos campos.

Configuración de formulario

Para acceder a estas opciones deberá ingresar un formulario especial y en el menú superior tendrá las siguientes opciones.

Para editar

Debe estar familiarizado con esta pestaña, ya que dedicará la mayor parte de su tiempo a diseñar la estructura del formulario. Como usaré esta herramienta más adelante para crear un pequeño ejemplo, no entraré en detalles ahora.

melodía

Verá varias opciones aquí, así que las revisaré paso a paso.

  • Configuración general: Configuración básica en el formulario.Tabla de configuración general
    Calificación: Encabezado del formulario.
    describir: Breve descripción del formulario.
    Posición de la etiqueta: Se muestra la posición del marcador.
    Describe el lugar: Se muestra la posición de la descripción.
    Posición de la subetiqueta: Se muestra la posición de la pestaña adicional.
    Nombre de la clase CSS: Para usar una clase CSS, agregue el nombre de la clase o separe las clases con espacios.
    Tipo de clave: Esta opción le permite decidir si desea utilizar botones de texto o imágenes. Le sugiero que use botones de texto y configure estilos CSS para ellos. Evite agregar demasiado contenido a su sitio web.
    Lógica de estado del botón: Le permite mostrar u ocultar botones de acuerdo con un conjunto de condiciones o reglas.
    Guardar y continuar: Si necesita usar un enlace temporal para guardar el formulario para uso futuro, debe habilitar esta opción (si el formulario que se creará es muy largo, se recomienda).
    Limite el número de entradas: Este campo limita la cantidad de elementos que el usuario puede enviar en él.
    Horario: Con esta opción puede activar el formulario en cualquier momento que desee.
    Obligar al usuario a conectarse: Si solo desea iniciar sesión para ver el formulario.
    Cebo anti-spam: Si no usa reCaptcha o no desea personalizarlo, debe habilitar esta opción. aquí Explicamos cómo funciona el cebo anti-spam.
    Transición de animación: Cuando desea animar cuando la lógica condicional hace que el cuadro aparezca o desaparezca
  • confirmar: Esta es la parte en la que puede personalizar el mensaje o la respuesta que recibirá el usuario cuando complete el formulario, ya sea texto, una página o una redirección de URL. Es muy típico que cuando el usuario completa un formulario de suscripción, sea redirigido a la página de inicio de sesión, donde agradece al usuario por su tiempo.
  • informar: La notificación es el correo electrónico predeterminado que se envía a la dirección de correo electrónico del administrador de WordPress. Aquí puede cambiar la dirección de correo electrónico predeterminada (si no desea que el administrador la reciba), la estructura y el contenido del correo electrónico de notificación.
  • Informacion personal: Parámetros de datos personalizados.
    Configuración de datos personalesDirección IP: Si desea guardar la dirección IP desde la que se envió el formulario, debe activar este campo.
    Política de retención de datos: Esta opción le permite eliminar automáticamente ciertas entradas personalizadas de una manera específica de forma regular.
    Activar exportación y eliminación de datos personales: Si activa esta casilla de verificación, WordPress lo tendrá en cuenta al exportar los datos personales ingresados ​​en este formulario.
    Además, es posible que tenga más pestañas o que aparezcan cuando agregue el complemento, ya que aquí es donde puede personalizar su interacción con el formulario.

tarjetas

Puede utilizar estos registros para realizar un seguimiento del envío de formularios relacionados para que pueda administrarlos fácilmente. Incluso si vincula Gravity Forms a MailChimp u otras herramientas de marketing por correo electrónico, estos registros se almacenarán aquí de la misma manera si no los desactiva.

avance

Botón típico para obtener una vista previa de un formulario sin guardarlo o usarlo en una página específica.

Tipo de campo

A continuación, enumeraré todos los campos disponibles que puede usar en el formulario y explicaré brevemente la función de cada campo.

Campo estándar

Los campos y las utilidades básicas son obligatorios para cualquier formulario, independientemente del tipo.

  • Cadena de texto: Se utiliza para consultar a los usuarios sobre información diversa, como el nombre y la edad.
  • Menú desplegable: En este campo tienes varias opciones para elegir, solo debes elegir una de ellas.
  • Número: Este campo requiere un número.
  • Botón de selección: Tiene la misma función que un menú desplegable, pero en este caso aparece como un botón y debes resaltarlo en él.
  • Código HTML: Para usar contenido más personalizado, puede ingresar su propio código HTML aquí.
  • Página de separación: Esto es útil si desea que su formulario se complete en varios pasos. Si hay un error o un campo obligatorio que no se completa, le impedirá continuar en el formulario.
  • Unidad de volumen: Funciona de manera similar a las cadenas de texto, pero en este caso el cuadro de texto se agranda y el usuario puede escribir más cómodamente.
  • Votantes: Implementa la misma función que el menú desplegable, pero en este caso puede elegir múltiples opciones.
  • Casilla de verificación: Como tenemos botones de selección para seleccionar uno de ellos, tiene varios campos para seleccionar varios.
  • oculto: Este campo es muy útil cuando tiene muchos formularios en su proyecto. Este campo es completamente invisible para el usuario, pero cuando el usuario termine de enviarlo, se agregará para ver qué formulario ha completado.
  • Parte: Separador simple para encabezados y partes de mesas de escritura.

Campo extendido

Estos son campos básicos, pero tienen alguna otra funcionalidad adicional, como: B. un formato de entrada o la encapsulación de varios campos en un formulario.

  • Apellido: Este es un conjunto de campos predefinidos que puede ingresar.
  • Hora: Un campo especial para ingresar la hora.
  • Dirección: Se solicitan varios campos relacionados con la ciudad, la provincia, el país, etc.
  • Envíe un correo electrónico a la dirección: Campo de entrada de correo electrónico.
  • Clave de verificación: Esta es una excelente manera de agregar seguridad a su formulario para evitar el spam de bot.
  • Fecha: Usando el calendario desplegable puede seleccionar la fecha.
  • Teléfono: El campo está diseñado para ingresar múltiples llamadas. Te advierto, debes cambiar el tipo de teléfono en las propiedades de este campo El internacional
  • Sitio web: Complete los campos de la URL.
  • Descargar archivos: Aquí puede cargar uno o más archivos.
  • prepararse: Puede personalizar la lista de campos a completar según sus necesidades.

caja de entrada

El propósito de esta sección es permitir a los usuarios publicar mensajes usando estos campos. Él puede enviarle un borrador del artículo o publicarlo él mismo. Los campos son los siguientes:

  • Calificación: Este será el título de la publicación.
  • Abstracto: Contiene parte del mensaje.
  • Categoría: Este campo contiene un menú desplegable que permite al usuario elegir entre diferentes opciones según sus necesidades.
  • Campos Personalizados: El tipo de campo que desea. Tienes que cambiarlo en esta configuración.
  • Cuerpo: Publica contenido.
  • Etiqueta: Las etiquetas de publicación utilizan estas etiquetas para definir el propósito de la publicación.
  • Imagen de entrada: Esto permite a los usuarios cargar archivos como Excelente foto Desde la entrada.

Campo de precio

Si necesita un formulario que enlace a una tienda en línea, esta sección es para usted.

  • Producto: Aquí puede ver sus productos y los precios asociados.
  • Opciones: En este campo puede agregar variaciones al producto: color, talla, etc.
  • Todo: Este campo muestra el costo total de los productos del usuario. Se basa en la información contenida en el propio formulario.
  • Número: Deje que el usuario elija cuántas unidades del producto necesita.
  • Transporte: Se utiliza para transporte público, el producto le cuesta al usuario el precio.

Establecer campo

Después de explicar cada campo y el propósito de cada campo, le presentaré brevemente cómo configurarlo. Cada uno tiene sus propias opciones de personalización, por lo que no explicaré todas estas opciones, pero usaré la personalización de cadenas de texto como guía.

Configuración de campo para forma de gravedad


Generalmente

Esta es la primera pestaña que se encuentra al abrir la configuración de cualquier campo. Aquí puede cambiar las funciones y la configuración general.

  • Nombre del curso: Este parámetro corresponde al nombre que se muestra encima del campo personalizado. Por ejemplo, si quisiera crear un formulario de suscripción aquí, podría agregar: Correo electrónico Correo electrónicoDe esta forma, los usuarios saben que necesitan poner allí su dirección de correo electrónico.
  • describir: Esta es la descripción del campo que se está editando. Aparece a continuación.
  • Pantalla de entrada: Con estas máscaras puedes cambiar el comportamiento del campo para que solo acepte ciertos formatos. Por ejemplo: número de teléfono de X dígitos, fecha e incluso formato personalizado. Esta es una excelente manera de guiar a los usuarios para asegurarse de que no cometan errores al completar formularios.
  • Número máximo de caracteres: Este es el número máximo de caracteres que puede ingresar el usuario.
  • Obligación causante: Esto hace que los campos apropiados sean obligatorios y evita que los usuarios recorran el formulario hasta que hayan completado esa información.
  • Sin duplicados: No permite comparar valores duplicados con la base de datos (muy adecuado para nombres de usuario o correos electrónicos durante el proceso de registro).

Apariencia

Segunda pestaña disponible. En este caso, puede ajustar detalles visuales como la configuración y el tamaño del campo a la posición de visualización del campo.

  • Etiqueta de contenido: Escriba texto gris en el cuadro como manual de usuario. Si el usuario ingresa a este campo, estará oculto.
  • Visibilidad de la etiqueta de campo: Puede elegir si desea mostrar etiquetas de campo.
  • Describe el lugar: Se utiliza para cambiar la posición de visualización de la descripción del campo.
  • Mensaje de confirmacion: Si los campos no se rellenan correctamente, verá este mensaje.
  • Clase CSS personalizada: Se utiliza para personalizar campos relacionados con estilos CSS.
  • Tamaño del campo: Le permite cambiar el tamaño del campo.

progresivo

Finalmente, si está buscando un formulario simple, aquí es donde puede cambiar los parámetros más complejos e innecesarios. Sin embargo, si quieres mejorar el final, te recomiendo jugar este papel.

  • Enlace al control in situ: Se utiliza para cambiar el nombre de la etiqueta que aparece en el área de control del campo.
  • Defecto: Esto le permite proporcionar a los usuarios valores predeterminados.
  • Activar la entrada de contraseña: Si es un campo de contraseña, o si solo desea ocultarlo, debe marcar esta casilla para que aparezcan varios puntos en lugar de texto.
  • Visibilidad: Mostrar u ocultar campos.
  • Permitir la finalización dinámica de este campo: Esta opción nos permite completar el campo con información recopilada previamente y ahorrar tiempo a los usuarios.
  • Lógica de la condición de activación: Hay dificultades adicionales con este parámetro, así que discutiré Lógica condicional

Crea una forma en forma de gravedad

La creación del formulario es muy fácil e intuitiva. Algunas de las ideas familiares Arrastra y suelta que te permite crear formas rápidamente de una manera muy intuitiva.Cuando comienza a ingresar y editar campos, la propia tabla de gravedad lo guía a través del primer paso.

Arrastrar y soltar

No voy a entrar en demasiados detalles aquí porque es muy simple y Gravity Forms es responsable de una explicación clara y concisa, y continuaré haciendo cosas más complejas.

Personalizar CSS

Gravity Forms le permite utilizar clases CSS en sus campos. Esto le brinda formas ilimitadas de personalizar su formulario. Puede encontrar esta opción en las siguientes ubicaciones: Cualquier clase CSS personalizada con un menú desplegable y apariencia de campo.

Configuración de clases CSS

Para facilitar esta tarea, La Guía del usuario de Gravity Forms contiene clases CSS predefinidas. Toda la información que necesitas para usarla correctamente sin conocimientos de CSS: coloca los campos en 3 columnas, una debajo de la otra y así sucesivamente. ¡Echemos un vistazo a esto!

A continuación, te daré un ejemplo práctico para que comprendas cómo funcionan estos cursos. En este ejemplo, el formulario consta de dos campos de texto: nombre y apellido.

Forma de gravedad CSS

El objetivo es que aparezcan en la misma línea, uno a la izquierda y otro a la derecha. Necesita utilizar la siguiente clase CSS Ready:

  • Para el campo de nombre: gf_left_half
  • Para el campo de apellido: gf_right_half

Después de agregar estos parámetros, todo lo que tiene que hacer es recordar actualizar el formulario y estará listo para comenzar. hacer clic avance

Forma de gravedad CSS

Código corto en forma de gravedad. ¿Cómo inserto mi mesa?

Después de crear y adaptar el formulario, pueden ocurrir los siguientes problemas: ¿Cómo agrego mi formulario a mi WordPress?

La respuesta es simple y breve. Un shortcode es una forma fácil para que Gravity Forms renderice formularios en una página.Ahora te mostraré cómo usarlo. Mira la siguiente línea:

Encuentra tu ID de formularioEs tan simple como abrir la mesa en la que desea encontrar el ID. Junto al título naranja, Se muestra el número deseado.

Forma de gravedad de código corto

Complementos para Gravity Forms

Puede vincular a numerosas extensiones de Gravity Forms. Gracias a ellos, puede ampliar las funciones de los formularios y hacerlos más atractivos y convenientes tanto para los usuarios como para los administradores.

A continuación, le proporcionaré algunos ejemplos de complementos de Gravity Forms para diferentes funciones y tipos.

MailChimp y formularios de gravedad

agarrar inmediato Si siempre desea proporcionar lo que busca su audiencia, una de las cosas más importantes es administrar eficazmente su lista de suscriptores. El complemento MailChimp para Gravity Forms le permite recopilar información en cualquier forma.

Complemento Mailchimp Gravity Form

Entre las muchas otras utilidades que nos brinda este complemento, puedo destacar la lógica condicional que le permite crear listas específicas para audiencias específicas. En cuanto a MailChimp, también me gustaría enfatizar que puede extraer cualquier campo que desee de un formulario y obtener esa información como un campo personalizado en MailChimp.

Formulario Stripe / Paypal y Gravity

El pago en línea es una prioridad absoluta. Por esta razón me veo en la obligación de mencionar estos dos estupendos plugins que te permiten personalizar los pagos vía Stripe (tarjeta de crédito) o Paypal, así como introducir nuevos campos en tu formulario para que estén 100% integrados.

Paypal Stripe Addon Shapes of Gravity

Tenga en cuenta que todo el proceso es simple y educativo para que no pierda dinero.

Formas Woocommerce y Gravity

Lo primero que debe saber es que este complemento no se integra con su propio sistema de extensión Gravity Forms como Stripe o MailChimp. Este complemento es exclusivo de WordPress.

Formulario de gravedad del complemento de Woocommerce

Simple y no requiere configuración. Siempre que cree un formulario con los campos de precio apropiados (producto, precio, etc.), aparecerá automáticamente un menú desplegable en nuestro producto WooCommerce para que pueda ingresar y configurar su producto como desee.

Herramientas que debe conocer sobre las formas de la gravedad

En esta sección voy a nombrar y explicar algunas de las herramientas de Gravity Forms que nos ayudan mucho a crear mejores formas.

Lógica condicional

Esta utilidad se puede utilizar para agregar vitalidad a sus formularios con Gravity Forms. El usuario cree que este formulario fue creado especialmente para ellos. Es muy importante. Aquí te explico esta sencilla herramienta que te dará una sensación de automatización y personalización.

En la configuración avanzada de cualquier campo encontrará la opción «Activar lógica de condición».

Lógica condicional formal de la gravedad

Establecer estas condiciones es muy fácil e intuitivo como puedes ver en la imagen. Puede mostrar u ocultar campos según lo que desee que los usuarios completen o no completen, Es tiempo real para los usuarios.

Si es más antiguo en los parámetros generales del formulario, active esta opción Transición animadaMostrar u ocultar el campo de condición se vuelve más fluido y atractivo para los usuarios.

Notificación condicional

Hablando de notificaciones, si un usuario completa específicamente uno o más campos, puede recibir notificaciones por correo electrónico. De esa manera, es posible que pueda procesar esta información de manera más específica.Lo único que tienes que hacer para esto es En la pestaña Configuración – Notificación – Editar – Activar lógica de condición, active las siguientes opciones.

Señuelo / Antispam

Una vez que comprenda esta función, querrá habilitarla en todas las formas. Esta es una opción muy útil que puede hacer que la experiencia del usuario sea más saludable y rápida. Elimina esos desagradables CAPTCHA A menudo vuelve loco a alguien.

Para activar el cebo anti-spam, debe Abra el formulario de problemas y la configuración general Lo encontrarás.

Forma de gravedad de cebo antispam

El método de trabajo con esta utilidad es muy simple. Agregar campos ocultos al formulario Entonces, cuando un usuario normal completa un campo, no puede completar dicho campo porque no puede verlo. Por otro lado, si un bot quiere enviarte spam, es visible a nivel de código. Entonces, Este campo oculto queda registrado y el sistema reconoce que se trata de una entrega ilegal.

finalmente

Gravity Forms es una de las herramientas de formularios más poderosas que existen. Actual. Espero que, gracias a toda la información que te he proporcionado en este artículo, entiendas por qué la mayoría de la comunidad eligió este complemento.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *