Divi Gravity Forms es un complemento para Divi Builder que le permite personalizar su Gravity Form desde Divi Builder. El complemento agrega un nuevo módulo a Divi Builder con opciones para cambiar el diseño de cada aspecto del formulario. Si es usuario de Gravity Form, este complemento lo ayudará a integrar Divi y Gravity Forms y le permitirá cambiar el diseño del formulario como lo haría con cualquier otro elemento en su página Divi. En este artículo, veremos la configuración que viene con el módulo Divi Gravity Forms y le mostraremos cómo puede personalizar su formulario dentro de Divi Builder.
¡Empecemos!
Primero, deberá tener instalado y activado el complemento Gravity Forms en su sitio web.
Divi Gravity Forms se puede instalar como cualquier otro complemento de WordPress . Abra la página de complementos en el panel de control de WordPress y haga clic en Agregar nuevo. Haga clic en Cargar complemento en la parte superior, luego seleccione el archivo de complemento .zip de su computadora.
Una vez que el complemento esté instalado, actívelo.
Formas de gravedad Divi
El complemento Divi Gravity Forms le permite agregar y personalizar el Gravity Form directamente dentro de Divi Builder. Para comenzar, primero deberá crear el formulario dentro de la página de configuración de Gravity Forms. Una vez que haya establecido la estructura básica y la función de su formulario de contacto, puede pasar a Divi Builder para personalizar el diseño.
Abra su página en Divi Builder y haga clic en el ícono gris más para insertar un nuevo módulo. Seleccione el módulo Gravity Form de la lista.
Configuración de contenido
Abra la configuración del módulo Gravity Form en la pestaña de contenido. Además de las secciones predeterminadas Fondo y Etiqueta de administrador, el módulo viene con una nueva sección llamada Parámetros de código abreviado.
Parámetros de código abreviado
Seleccione el formulario de gravedad que le gustaría mostrar en el menú desplegable ID de formulario. Una vez seleccionado, su formulario aparecerá en la página.
Dentro de la configuración de los parámetros del shortcode, también puede optar por mostrar u ocultar el título y la descripción y habilitar o deshabilitar Ajax. Además, puede especificar el índice de tabulación inicial para los campos de formulario y especificar valores de campo predeterminados.
Configuración de diseño
La mayor parte de la configuración de personalización de Divi Gravity Forms se encuentra en la pestaña Diseño. Estas configuraciones le brindan una gran flexibilidad con la apariencia de su formulario y puede cambiar el diseño de casi todos los aspectos de su formulario. Echemos un vistazo a las diferentes configuraciones de diseño que puede usar.
Títulos de formulario
Primero está la configuración del título del formulario.
Puede cambiar el relleno del margen del título, la configuración de la fuente, la alineación, el color, el tamaño, el espaciado, la altura de la línea y la sombra.
Descripción del formulario
La configuración de la descripción del formulario es la misma que la configuración del título del formulario. Aquí está la descripción del formulario con fuente personalizada, color de texto, tamaño de texto y altura de línea.
Envoltorio de campo
La configuración del envoltorio de campo le permite cambiar el margen y el relleno de los campos. En este ejemplo, reduje el margen superior para que los campos se colocaran más juntos.
Etiqueta
En la pestaña de etiquetas, tiene todas las opciones de personalización de texto predeterminadas. Personalicé la fuente de la etiqueta y cambié el color del texto a verde.
Subetiqueta
La configuración de la etiqueta secundaria también presenta las opciones de diseño de texto predeterminadas. En este ejemplo, las etiquetas secundarias son las etiquetas de texto «Primero» y «Último» debajo de los campos de nombre. Personalicé la fuente de la subetiqueta.
campo Descripción
El ejemplo de descripción de campo se encuentra arriba del campo Pregunta larga. Aquí disminuí el relleno superior para acercar el texto a la etiqueta y cambié la fuente.
Envoltura de entrada
La configuración del envoltorio de entrada le permite cambiar el margen o el relleno alrededor del cuadro de entrada. En este ejemplo, reduje el margen superior, acercando el cuadro de entrada a la etiqueta y la descripción.
Entrada general
La sección de configuración general de entrada es donde puede personalizar completamente el diseño del cuadro de entrada. Puede modificar el color de fondo, agregar esquinas redondeadas, cambiar el borde y personalizar completamente la configuración de la fuente de entrada.
Aquí agregué esquinas redondeadas, cambié el color de fondo de entrada, cambié el color del borde y cambié la fuente del texto.
Texto/área de texto
En la configuración de texto/área de texto, puede cambiar el margen, el relleno o agregar una sombra de cuadro a los campos.
Seleccionar
La sección de selección tiene la misma configuración que la sección de texto/área de texto. Puede personalizar el margen, el relleno y la sombra del cuadro para sus campos seleccionados.
Casilla de verificación/Opción de texto de radio
Aquí puede cambiar el margen y el relleno, y personalizar la fuente para la opción de casilla de verificación/texto de radio. Personalicé la fuente en este ejemplo.
Introducir texto de marcador de posición
Puede personalizar la configuración de fuente para el texto de marcador de posición de entrada aquí. Cambié la fuente a Montserrat.
Texto de columna de campo de lista
La misma configuración aquí que la sección de texto del campo de entrada. Una vez más, personalicé la fuente para el texto de la columna del campo de lista.
Contenedor de campo de sección
La configuración del envoltorio de campo de sección le permite cambiar el margen, el relleno y el color inferior del borde. Agregué una sección a mi formulario y agregué un margen superior y cambié el color inferior del borde.
Título del campo de la sección
Para personalizar el título del campo de la sección, modifiqué aquí la fuente, el peso de la fuente, el estilo de la fuente, el color del texto y el espacio entre letras.
Sección Campo Descripción
En este ejemplo, agregué una descripción a la sección y modifiqué la fuente. También agregué un poco de relleno inferior para agregar espacio entre la descripción y la línea.
Casilla de verificación de consentimiento
La configuración de diseño para la casilla de verificación de consentimiento le permite modificar la configuración de margen, relleno y fuente. Aquí modifiqué la fuente.
Descripción del consentimiento
Lo mismo con la configuración de descripción de consentimiento, puede modificar el margen y el relleno y personalizar la fuente. En este ejemplo, cambié la fuente.
Desplegable de fecha y campo de fecha
Aquí puede cambiar el margen derecho.
Campo de tiempo
En la configuración del campo de tiempo, puede personalizar el margen izquierdo desplegable AM/PM y el ancho mínimo del campo de tiempo (HH/MM).
Asterisco
En la configuración de asterisco, puede cambiar el color de la fuente.
Leyenda de texto de asterisco
Usando la configuración de leyenda de texto de asterisco, puede personalizar la fuente, el tamaño, el espaciado y más de la leyenda de texto de asterisco. En este ejemplo, modifiqué la fuente.
Encabezado de error de validación
Aquí puede personalizar el color de fondo, el margen y el relleno, y el diseño de la fuente para el encabezado del error de validación. Aquí está el encabezado de error de validación personalizado, con relleno modificado, una fuente diferente y un tamaño de fuente más grande.
Error de validación de campo
Y aquí puede personalizar el error de validación del campo de la misma manera que el encabezado del error de validación. Agregué algo de relleno en la parte superior, inferior e izquierda, y modifiqué la fuente. Aquí está el resultado en la parte delantera.
Pie de página
Con esta configuración, puede cambiar el margen y el relleno del pie de página.
Título de la barra de progreso
Aquí puede modificar el margen y el relleno de la barra de progreso, así como el diseño de la fuente.
Barra de progreso
En la configuración de la barra de progreso, puede modificar el color de la barra de progreso y el color del texto. Cambié el color de la barra de progreso a verde.
Botón
A continuación, la configuración del botón le permite aplicar estilos personalizados al botón de envío del formulario. También puede cambiar la alineación de los botones. Aquí cambié el color del texto, el fondo, la fuente, el peso de la fuente, el radio del borde y el espacio entre letras para darle estilo al botón.
Mensaje de confirmacion
En la configuración del mensaje de confirmación, puede modificar cómo aparece el mensaje de confirmación después de enviar el formulario. Cambié el color de fondo, la fuente y el color del texto en este ejemplo.
Y aquí está el mensaje de confirmación.
Gf_left_half: clase preparada para CSS y Gf_left_third y gf_middle_third: clase preparada para CSS
Puede aplicar estas clases de CSS a un campo de Gravity Forms para crear diseños más avanzados. Estas configuraciones de diseño le permiten personalizar el relleno adecuado para los campos con estas clases de CSS.
Espaciado
La configuración de espaciado le permite personalizar el margen y el relleno de todo el formulario. Aquí agregué un poco de relleno interno a los 4 lados de mi formulario.
Borde
En la configuración del borde, puede agregar un borde a su formulario, cambiar el color y el tamaño del borde, agregar esquinas redondeadas y más. Para este ejemplo, agregué un borde con esquinas redondeadas al formulario.
Sombra de la caja
Puede agregar una sombra de cuadro a su formulario con esta configuración.
filtros
La configuración de filtros le permite modificar el color de su diseño agregando un filtro.
Transformar
Finalmente, la configuración de transformación le permite modificar la ubicación del formulario en la página.
Ajustes avanzados
Pasando a la pestaña avanzada, verá que se enumeran las secciones avanzadas predeterminadas.
Si selecciona la pestaña CSS personalizado, puede agregar CSS personalizado a los diferentes elementos del formulario de gravedad, incluido el título, la descripción, la etiqueta, el campo de texto, el campo de selección, la casilla de verificación/campo de radio, la etiqueta de la casilla de verificación de consentimiento, el encabezado del error de validación, el botón , y mucho más.
Esto le permite personalizar completamente su formulario, incluso más allá de las opciones que Divi Gravity Forms agrega a Divi Builder.
Ejemplo de formas de gravedad Divi
Aquí está el resultado final del Gravity Form personalizado con Divi Gravity Forms.
Página 1
Página 2
Mensaje de confirmacion
Mensaje de error de validación
Comprar formas de gravedad Divi
Divi Gravity Forms está disponible en Divi Marketplace . Cuesta $ 69 por uso ilimitado del sitio web y 1 año de soporte y actualizaciones. El precio también incluye una garantía de devolución de dinero de 30 días.
Pensamientos finales
Divi Gravity Forms facilita el diseño completo de su formulario dentro de Divi Builder. El complemento actualiza automáticamente su formulario después de cada cambio que realiza para que pueda ver la vista previa más actualizada, directamente dentro de Divi Builder. Si eres un usuario de Gravity Forms que diseña sitios web con Divi, esta puede ser la herramienta perfecta para ayudarte a diseñar y personalizar tus formularios con la facilidad y comodidad de Divi Builder.
¡Nos encantaría saber de usted! ¿Has probado Divi Gravity Forms? ¡Háganos saber lo que piensa al respecto en los comentarios!