5 formas únicas de diseñar el módulo de formulario de contacto de Divi

Los formularios de contacto son una parte vital de muchos sitios web. Su objetivo principal es ser intuitivo y ayudar a los visitantes a ponerse en contacto fácilmente. Pero eso no significa que todos los formularios de contacto deban verse de una manera determinada y predefinida. Puede combinar fácilmente una experiencia intuitiva con un hermoso diseño. Eso es exactamente lo que haremos en esta publicación. Vamos a compartir 5 diseños de módulo de formulario de contacto de Divi únicos que puede crear utilizando solo las opciones integradas de Divi.

¡Hagámoslo!

Vista previa de los diseños del módulo de formulario de contacto Divi

Escritorio

Comencemos echando un vistazo a los diseños del módulo de formulario de contacto de Divi en el escritorio.

Móvil

Y así es como se ven los diseños del módulo de formulario de contacto Divi en tamaños de pantalla más pequeños:

5 formas únicas de diseñar el módulo de formulario de contacto de Divi

Suscríbete a nuestro canal de Youtube

Creación del formulario de contacto n. ° 1

Agregar nueva sección

Fondo degradado

¡Comencemos con el primer ejemplo! Agregue una nueva sección, vaya a la configuración de fondo y agregue un fondo degradado.

• Color 1: # 4c00ff
• Color 2: # ffd400
• Tipo de degradado: radial
• Dirección radial: abajo a la izquierda
• Posición inicial: 34%
• Posición final: 34%

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados.

• Relleno superior: 200 px
• Acolchado inferior: 200px

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columnas:

Color de fondo de la columna 1

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado de columna 1.

• Color de fondo de la columna 1: rgba (255,255,255,0.55)

Imagen de fondo de la columna 1

Agrega también una imagen de fondo a la primera columna.

• Repetición de la imagen de fondo de la columna 1: Sin repetición
• Columna 1 Mezcla de imagen de fondo: pantalla

Color de fondo de la columna 2

Y un color de fondo blanco para la segunda columna.

• Color de fondo de la columna 2: #ffffff

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Ecualizar alturas de columna: Sí

Espaciado

Elimine también todo el relleno personalizado predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Radio del borde de la columna

Agregue un radio de borde a ambas columnas en la pestaña avanzada.

border-radius: 10px;

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar los distintos módulos! Agregue un módulo de texto a la primera columna con algún contenido de su elección.

Configuración de texto

Luego, vaya a la configuración de texto y realice algunos cambios.

• Fuente de texto: Satisfacer
• Color del texto: # 333333
• Tamaño del texto: 100px
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

Agregue también algunos valores de relleno personalizados.

• Relleno superior: 600px
• Acolchado inferior: 100px

Sombra de la caja

Para agregar profundidad al diseño, use una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de la caja: -16px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de imagen a la columna 2

Subir imagen PNG

Continúe agregando un módulo de imagen a la segunda columna. Cargue una imagen PNG de su elección.

Dimensionamiento

Cambie la configuración de tamaño de este módulo.

• Ancho: 25% (escritorio), 50% (tableta), 60% (teléfono)
• Alineación del módulo: centro

Espaciado

Cree una superposición utilizando un margen superior negativo.

• Margen superior: -60%

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido

Justo debajo del Módulo de imagen, agregue un Módulo de texto con algo de contenido.

Configuración de texto

Cambie la configuración de texto de este módulo.

• Fuente de texto: Satisfacer
• Color del texto: # 333333
• Tamaño del texto: 44px
• Orientación del texto: centro

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Agregue otro módulo de texto a continuación.

Configuración de texto

Cambie también la configuración de texto de este módulo.

• Fuente de texto: Arial
• Color del texto: # ffd400
• Tamaño del texto: 18px
• Espaciado de letras de texto: 2px
• Orientación del texto: centro

Espaciado

A continuación, agregue un poco de margen inferior.

• Margen inferior: 100 px

Agregar módulo de formulario de contacto a la columna 2

Habilite la opción 'Hacer ancho completo' en el campo Nombre y correo electrónico

El último módulo necesario es el módulo de formulario de contacto. Antes de hacer cualquier otra cosa, abra los campos de nombre y correo electrónico y cambie el diseño.

• Hacer ancho completo: sí

Agregar campo de asunto

Para crear este diseño, agregamos otro campo para el tema.

Elementos

Desactive la opción de captcha a continuación.

• Pantalla Captcha: No

Configuración de texto de campo de formulario

Realice algunos cambios en la configuración del texto del campo de formulario de este módulo de formulario de contacto.

• Color de fondo del campo de formulario: rgba (255,255,255,0)
• Fuente del campo de formulario: Arial
• Peso de fuente del campo de formulario: Ligero
• Tamaño del texto del campo del formulario: 16px
• Espacio entre letras del campo del formulario: 2px

Configuración de botones

También estamos modificando la apariencia del botón.

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: # ffd400
• Ancho del borde del botón: 0px
• Espacio entre letras del botón: 2px
• Fuente del botón: Arial
• Estilo de fuente: subrayado
• Color de subrayado: # 4c00ff

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado inferior: 100px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Y agregue un borde inferior sutil a cada uno de los campos.

• Ancho del borde inferior: 2px
• Color del borde inferior: #efefef

Espaciado de campo individual

Por último, pero no menos importante, agregue un margen inferior a cada uno de los campos individuales, excepto al del mensaje.

• Margen inferior: 20px

Creación del formulario de contacto n. ° 2

Agregar nueva sección

Fondo degradado

¡Pasemos al siguiente ejemplo! Agrega una nueva sección con un fondo degradado.

• Color 1: # 562fef
• Color 2: #ffffff
• Tipo de degradado: lineal
• Posición inicial: 50%
• Posición final: 50%

Espaciado

Agregue algunos valores de relleno personalizados a la configuración de espaciado de esta sección.

• Relleno superior: 200 px
• Acolchado inferior: 200px

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la fila.

• Color de fondo: #ffffff

Fondo degradado de la columna 2

Agregue un fondo degradado a la segunda columna de la siguiente fila.

• Color 1: # 9932ff
• Color 2: # 562fef
• Columna 2 Tipo de degradado: lineal
• Dirección del gradiente de la columna 2: 160 grados

Dimensionamiento

Cambie también la configuración de tamaño de la fila.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Luego, agregue algunos valores de espaciado personalizados.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 1: 100 px
• Relleno inferior de la columna 1: 50px
• Columna 1 Relleno a la izquierda: 50px
• Columna 1 Relleno derecho: 50px
• Relleno superior de la columna 2: 100 px
• Relleno inferior de la columna 2: 100 px
• Columna 2 Relleno izquierdo: 50px
• Columna 2 Relleno derecho: 50px

Frontera

Agrega '20px' a cada uno de los bordes de la fila.

Sombra de la caja

Por último, agregue una sombra de cuadro sutil a la fila.

• Fuerza de desenfoque de sombra de caja: 45px
• Fuerza de propagación de la sombra de caja: -11px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar los módulos! Comience con un módulo de texto en la primera columna.

Configuración de texto

Cambie la configuración de texto de este módulo.

• Peso de la fuente del texto: Ultra Bold
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 562fef
• Suze de texto: 100px (escritorio), 80px (tableta), 60px (teléfono)
• Espaciado de letras de texto: -10px
• Altura de la línea de texto: 1em

Espaciado

Agregue un poco de margen inferior también.

• Margen inferior: 50 px

Agregar módulo de formulario de contacto a la columna 1

Elementos

El segundo módulo que necesitaremos en la primera columna es un módulo de formulario de contacto. Una vez que haya agregado el módulo, desactive la opción 'Mostrar Captcha'.

• Pantalla Captcha: No

Configuración de texto de campo de formulario

A continuación, cambie el color de fondo del campo de formulario.

• Color de fondo del campo de formulario: #ffffff

Configuración de botones

Juega también con la configuración de los botones para crear un botón de icono en lugar de uno que contenga texto.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 73px
• Color del texto de la parte inferior: rgba (0,0,0,0)
• Color de fondo del botón de desplazamiento: rgba (255,255,255,0)
• Ancho del borde del botón: 0px
• Color del icono del botón: # 9932ff
• Mostrar solo el icono al pasar el mouse para el botón: No

Sombra de la caja

Por último, agregue una sombra de cuadro sutil a cada uno de los campos.

• Fuerza de desenfoque de sombra de caja: 36px
• Fuerza de desenfoque de sombra de caja: -14px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de texto a la columna 2

Agregar contenido

El primer módulo que necesitaremos en la segunda columna es otro módulo de texto.

Configuración de texto

Una vez que haya agregado el contenido, cambie la configuración de texto de este módulo.

• Peso de la fuente del texto: Ultra Bold
• Color del texto: #ffffff
• Tamaño del texto: 23px
• Espaciado de letras de texto: -1px

Agregue el módulo Blurb n. ° 1 a la columna 2

Agregar contenido

El segundo módulo que necesitaremos es un módulo Blurb. Continúe e ingrese alguna información de contacto.

Seleccionar icono

Luego, elija un icono que coincida.

Configuración de iconos

Cambie la configuración de este icono.

• Color del icono: #ffffff
• Colocación del icono: izquierda

Configuración del texto del título

Continúe realizando algunos cambios en la configuración del texto del título a continuación.

• Tamaño del texto del título: 15px
• Espaciado de letras de título: -0.5px

Espaciado

Y agregue un margen superior.

• Margen superior: 120 px

Clonar módulo Blurb dos veces

Una vez que haya terminado de modificar el primer módulo de Blurb, puede continuar y clonar el módulo dos veces.

Cambiar el contenido y el icono de ambos duplicados

Cambie el contenido y los íconos de ambos duplicados para compartir diferentes tipos de información de contacto con los visitantes.

Cambiar el espaciado de ambos duplicados

También es necesario modificar el margen superior de ambos duplicados.

• Margen superior: 30 px

Creación del formulario de contacto n. ° 3

Agregar nueva sección

Color de fondo

¡Vamos al tercer ejemplo! Agregue una nueva sección con el siguiente color de fondo:

• Color de fondo: # 3491CE

Espaciado

Continúe agregando algunos valores de relleno personalizados en la configuración de espaciado.

• Relleno superior: 200 px
• Acolchado inferior: 200px

Agregar fila n. ° 1

Estructura de la columna

Luego, agregue una nueva fila usando la siguiente estructura de columnas:

Agregar módulo de texto

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos agregar a la primera columna es un módulo de texto. Ingrese algún contenido de su elección.

Configuración de texto

Luego, cambie la configuración del texto.

• Peso de la fuente del texto: Ultra Bold
• Color del texto: rgba (255,255,255,0.24)
• Tamaño del texto: 100 px (escritorio), 86 px (tableta), 60 px (teléfono)
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

Agregue también un margen inferior negativo.

• Margen inferior: -100px

Agregar fila n. ° 2

Estructura de la columna

La segunda fila que necesitamos para completar este ejemplo contiene la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado.

• Color 1: # 11CE84
• Color 2: # 10C77F
• Tipo de degradado: lineal
• Dirección del gradiente: 160 grados
• Posición inicial: 50%
• Posición final: 50%

Dimensionamiento

Cambie también la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Relleno superior: 150 px
• Acolchado inferior: 100px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Luego, vaya a la configuración del borde y agregue '20px' a cada una de las esquinas. Utilice también un borde inferior.

• Ancho del borde inferior: 10px
• Color del borde inferior: # 1ba35a

Sombra de la caja

Complete la configuración de la fila agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -24px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de formulario de contacto a la columna 1

Habilite la opción 'Hacer ancho completo' en el campo Nombre y correo electrónico

El primer módulo que necesitamos en la primera columna de la fila es un módulo de formulario de contacto. Abra el campo de nombre y correo electrónico y cambie la configuración de diseño.

• Hacer ancho completo: sí

Elementos

Desactive el captcha a continuación.

• Pantalla Captcha: No

Configuración de botones

Y cambia la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: #ffffff
• Color 1: # 3AA0E3
• Color 2: # 3491CE
• Tipo de degradado: lineal
• Dirección del gradiente: 155 grados
• Posición inicial: 50%
• Posición final: 50%
• Ancho del borde del botón: 0px
• Radio del borde del botón: 10px
• Fuerza de propagación de la sombra de caja: -2px
• Color de sombra: # 0a60af

Frontera

También estamos agregando '5px' de esquinas redondeadas a cada uno de los campos.

Agregar módulo de texto a la columna 2

Agregar contenido

En la segunda columna, el primer módulo que necesitaremos es un módulo de texto. Adelante, ingrese algún contenido.

Color de fondo

Luego, cambie el color de fondo.

• Color de fondo: rgba (255,255,255,0.13)

Configuración de texto

Juega también con la configuración del texto.

• Peso de la fuente del texto: Ligero
• Color del texto: #ffffff
• Tamaño del texto: 15px
• Espaciado de letras de texto: -0.5px

Espaciado

Y agregue un poco de acolchado personalizado para darle espacio al módulo para respirar.

• Acolchado superior: 12px
• Acolchado inferior: 12px
• Relleno izquierdo: 10px
• Relleno derecho: 10px

Frontera

También estamos agregando '20px' a las esquinas superior izquierda e inferior izquierda. Además de eso, agregaremos un borde izquierdo.

• Ancho del borde izquierdo: 34px
• Color del borde izquierdo: # edf000

Visibilidad

Para que este diseño coincida con los diferentes tamaños de pantalla, vamos a deshabilitar el módulo de texto en el teléfono y la tableta.

Clonar el módulo de texto dos veces

Una vez que haya terminado de modificar el primer módulo de texto, continúe y clone el módulo dos veces.

Cambiar el contenido de ambos duplicados

Cambie el contenido de ambos duplicados por otro.

Cambiar el espaciado de ambos duplicados

Y agregue un margen superior para crear espacio entre cada uno de los módulos.

• Margen superior: 20px

Cambiar el borde de ambos duplicados

Por último, pero no menos importante, cambie el color del borde izquierdo de cada uno de los duplicados individualmente.

• Color 1: # 00faff
• Color 2: # 00f76f

Creación del formulario de contacto n. ° 4

Agregar nueva sección

Color de fondo

¡Vamos al cuarto ejemplo! Agregue una nueva sección usando el siguiente color de fondo:

• Color de fondo: #FFBABD

Espaciado

Elimine el relleno predeterminado de esta sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado.

• Color 1: #ffffff
• Color 2: rgba (41,196,169,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 38%
• Posición final: 38%

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y agregue un poco de relleno personalizado.

• Relleno superior: 160 px
• Acolchado inferior: 160px

Agregar módulo de texto

Agregar contenido

El primer módulo que necesitamos es un módulo de texto. Adelante, ingrese algún contenido.

Configuración de texto

Cambie la configuración de texto en consecuencia:

• Fuente del texto: Abril Fatface
• Color del texto: # 640076
• Tamaño del texto: 45 px (escritorio), 34 px (tableta), 20 px (teléfono)
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

A continuación, agregue algunos valores de espaciado personalizados.

• Margen superior: 300 px
• Relleno superior: 50px
• Acolchado inferior: 50px

Agregar módulo de formulario de contacto

Habilite la opción 'Hacer ancho completo' en el campo Nombre y correo electrónico

El segundo y último módulo que necesitamos es un módulo de formulario de contacto. Abra los campos de nombre y correo electrónico y cambie la configuración de diseño.

• Hacer ancho completo: sí

Elementos

Luego, desactive la opción captcha en la configuración de elementos.

• Pantalla Captcha: No

Configuración de texto de campo de formulario

Realice también algunos cambios en la configuración del texto del campo del formulario.

• Color de fondo del campo de formulario: # fff6f6
• Color del texto del campo de formulario: # ff7c7c

Configuración de botones

Cambie el botón en un botón de icono usando la siguiente configuración:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 88px
• Color del texto del botón: rgba (255,255,255,0)
• Color de fondo del botón de desplazamiento: rgba (255,255,255,0)
• Ancho del borde del botón: 0px
• Color del icono del botón: # e60085
• Mostrar solo el ícono al pasar el mouse por el botón: Sí

Dimensionamiento

Y juegue con los valores de tamaño para que el diseño coincida con todos los tamaños de pantalla.

• Ancho: 42% (escritorio), 50% (tableta), 77% (teléfono)
• Alineación del módulo: centro

Espaciado

Continúe agregando algunos valores de espaciado personalizados al módulo.

• Margen inferior: 200 px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Y agregue '10px' a cada una de las esquinas.

Margen de botón

Por último, pero no menos importante, presione el botón de icono a la derecha utilizando la siguiente línea de código CSS en la pestaña avanzada:

margin-right: -100px;

Creación del formulario de contacto n. ° 5

Agregar nueva sección

Fondo degradado

¡Vamos al último ejemplo! Agregue una nueva sección con el siguiente fondo degradado:

• Color 1: # 4bf2d0
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: izquierda
• Posición inicial: 36%
• Posición final: 36%

Espaciado

Luego, vaya a la configuración de espaciado y agregue un relleno personalizado.

• Relleno superior: 250 px
• Acolchado inferior: 250px

Agregar nueva fila

Estructura de la columna

Una vez que haya terminado de modificar la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo.

• Color de fondo: #ffffff

Color de fondo de la columna 1

Agregue otro color de fondo a la primera columna.

• Color de fondo de la columna 1: # f9f9f9

Dimensionamiento

Luego, cambie la configuración de tamaño de la fila.

• Usar ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 1730px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Y agregue algunos valores de espaciado personalizados para que coincidan con todos los tamaños de pantalla.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 1: 200 px (escritorio), 0 px (tableta y teléfono)
• Relleno inferior de la columna 1: 150 px (escritorio), 0 px (tableta y teléfono)
• Columna 1 Relleno a la izquierda: 50px
• Columna 1 Relleno derecho: 50px
• Relleno superior de la columna 2: 200 px (escritorio), 100 px (tableta y teléfono)
• Relleno inferior de la columna 2: 150 px, 100 px (tableta y teléfono)

Sombra de la caja

Lo último que deberá hacer en la configuración de la fila es agregar una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 56px
• Fuerza de propagación de la sombra de caja: -17px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la primera columna.

Configuración de texto

Una vez que haya agregado el contenido, vaya a la configuración de texto y realice algunos cambios.

• Fuente de texto: Cambay
• Color del texto: # 000000
• Tamaño del texto: 26px
• Espaciado de letras de texto: -0.5px
• Orientación del texto: Derecha

Espaciado

Agregue un poco de margen superior también.

• Margen superior: 60 px

Visibilidad

Y oculta el módulo tanto en el teléfono como en la tableta.

Clonar el módulo de texto dos veces

Cambiar el contenido de ambos duplicados

Una vez que haya terminado de modificar el primer módulo de texto, continúe y clone el módulo dos veces. Cambie el contenido de ambos duplicados.

Cambiar el espaciado de ambos duplicados

Modifique también el margen superior de ambos duplicados.

• Margen superior: 80 px

Agregar módulo de formulario de contacto a la columna 2

Habilite la opción 'Hacer ancho completo' en el campo Nombre y correo electrónico

El único módulo que necesitamos en la segunda columna es un módulo de formulario de contacto. Abra los campos de nombre y correo electrónico y cambie la configuración de diseño.

• Hacer ancho completo: sí

Elementos

Desactive la opción de captcha a continuación.

• Pantalla Captcha: Sí

Configuración de texto de campo de formulario

Luego, vaya a la configuración de texto del campo del formulario y realice algunas modificaciones.

• Color de fondo del campo de formulario: rgba (255,255,255,0)
• Fuente del campo de formulario: Cambay

Configuración de botones

Y cree un botón único usando la siguiente configuración de botones:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 64 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Color del texto del botón: # 000000
• Color 1: # 4bf2d0
• Color 2: rgba (41,196,169,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 25%
• Posición final: 25%
• Ancho del borde del botón: 0px
• Mostrar solo botón al pasar el mouse por botón: No

Espaciado

Agregue también un margen superior a este módulo.

• Margen superior: 50px

Frontera

Y use un borde inferior sutil para cada uno de los campos.

• Ancho del borde inferior: 0.5px
• Color del borde inferior: # 000000

Espaciado de campo individual

Por último, pero no menos importante, agregue el siguiente margen inferior a cada uno de los campos individualmente y ¡listo!

• Margen inferior: 50 px

Avance

Escritorio

Ahora que hemos seguido todos los pasos, echemos un vistazo final a los diseños del módulo de formulario de contacto de Divi en el escritorio.

Móvil

Y esto es lo que puede esperar de los diseños del módulo de formulario de contacto Divi en tamaños de pantalla más pequeños:

Pensamientos finales

En esta publicación, hemos compartido 5 hermosos diseños de módulos de formulario de contacto de Divi que puede usar y modificar fácilmente para cualquier sitio web que cree. Los formularios de contacto son una parte vital de muchos sitios web, por lo que es importante asegurarse de que su diseño convenza a sus visitantes para que se pongan en contacto. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!