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 este post. Vamos a compartir 5 diseños únicos de módulos de formularios de contacto de Divi que puede crear utilizando únicamente las opciones integradas de Divi.

¡Hagámoslo!

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

Escritorio

Comencemos por echar un vistazo a los diseños del módulo de formulario de contacto 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

Crear formulario de contacto #1

Agregar nueva sección

Fondo degradado

¡Empecemos 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 gradiente: Radial
  • Dirección radial: inferior 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: 200px
  • Relleno inferior: 200px

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columna:

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

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

  • Columna 1 Imagen de fondo Repetir: No repetir
  • Columna 1 Mezcla de imagen de fondo: Pantalla

Color de fondo de la columna 2

Y un color de fondo blanco a la segunda columna.

  • Color de fondo de la columna 2: #ffffff

Dimensionamiento

Cambie la configuración de tamaño a continuación.

  • Igualar alturas de columna: Sí

Espaciado

Elimine también todo el relleno personalizado predeterminado.

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

Radio del borde de la columna

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

01
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 del texto: Satisfacer
  • Color del texto: #333333
  • Tamaño del texto: 100px
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Espaciado

Agregue también algunos valores de relleno personalizados.

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

Sombra de la caja

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

  • Fuerza de desenfoque de sombra de cuadro: 80px
  • Fuerza de propagación de la sombra del cuadro: -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 #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 #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 del texto: Arial
  • Color del texto: #ffd400
  • Tamaño del texto: 18px
  • Espaciado entre letras de texto: 2px
  • Orientación del texto: Centro

Espaciado

Agregue un poco de margen inferior a continuación.

  • Margen inferior: 100px

Agregue el 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, hemos agregado 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 de 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 la fuente del campo de formulario: ligero
  • Tamaño del texto del campo de formulario: 16px
  • Espaciado entre letras del campo de 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
  • Espaciado entre letras de botones: 2px
  • Fuente del botón: Arial
  • Estilo de fuente: Subrayado
  • Color de subrayado: #4c00ff

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

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

Borde

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

Crear formulario de contacto #2

Agregar nueva sección

fondo degradado

¡Vamos al siguiente ejemplo! Agregue una nueva sección con un fondo degradado.

  • Color 1: #562fef
  • Color 2: #ffffff
  • Tipo de gradiente: 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: 200px
  • Relleno inferior: 200px

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columna:

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 fila siguiente.

  • Color 1: #9932ff
  • Color 2: #562fef
  • Columna 2 Tipo de gradiente: 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 del canalón: 1
  • Igualar alturas de columna: Sí

Espaciado

Luego, agregue algunos valores de espaciado personalizados.

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

Borde

Agregue ’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 cuadro: 45px
  • Fuerza de propagación de la sombra del cuadro: -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 fuente de texto: ultra negrita
  • Estilo de fuente de texto: Mayúsculas
  • Color del texto: #562fef
  • Texto Suze: 100px (Escritorio), 80px (Tableta), 60px (Teléfono)
  • Espaciado entre letras de texto: -10px
  • Altura de línea de texto: 1em

Espaciado

Agregue un poco de margen inferior también.

  • Margen inferior: 50px

Agregue el 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, deshabilite la opción ‘Mostrar Captcha’.

  • Pantalla Captcha: No

Configuración de texto de campo de formulario

Cambie el color de fondo del campo de formulario a continuación.

  • Color de fondo del campo de formulario: #ffffff

Configuración de botones

Juega 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 de texto inferior: rgba(0,0,0,0)
  • Color de fondo del botón flotante: rgba(255,255,255,0)
  • Ancho del borde del botón: 0px
  • Color del icono del botón: #9932ff
  • Solo mostrar icono al pasar el mouse sobre el botón: No

Sombra de la caja

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

  • Fuerza de desenfoque de sombra de cuadro: 36px
  • Fuerza de desenfoque de sombra de cuadro: -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 fuente de texto: ultra negrita
  • Color del texto: #ffffff
  • Tamaño del texto: 23px
  • Espaciado entre letras de texto: -1px

Agregue el Módulo de Blurb #1 a la Columna 2

Agregar contenido

El segundo módulo que necesitaremos es un módulo de 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
  • Ubicación del icono: Izquierda

Configuración del texto del título

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

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

Espaciado

Y agregue un poco de margen superior.

  • Margen superior: 120px

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 ícono 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

El margen superior de ambos duplicados también debe modificarse.

  • Margen superior: 30px

Crear formulario de contacto #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: 200px
  • Relleno inferior: 200px

Añadir Fila #1

Estructura de la columna

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

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. Introduzca algún contenido de su elección.

Configuración de texto

Luego, cambie la configuración de texto.

  • Peso de fuente de texto: ultra negrita
  • 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 línea de texto: 1em
  • Orientación del texto: Centro

Espaciado

Agregue también un margen inferior negativo.

  • Margen inferior: -100px

Añadir Fila #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 la fila y agregue un fondo degradado.

  • Color 1: #11CE84
  • Color 2: #10C77F
  • Tipo de gradiente: 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 del canalón: 1
  • Igualar alturas de columna: Sí

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

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

Borde

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

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

Sombra de la caja

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

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

Agregue el 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 gradiente: 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 del cuadro: -2px
  • Color de sombra: #0a60af

Borde

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. Continúe e ingrese algo de contenido.

Color de fondo

Luego, cambia el color de fondo.

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

Configuración de texto

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

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

Espaciado

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

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

Borde

También agregaremos ’20px’ en 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, desactivaremos el módulo de texto en el teléfono y la tableta.

Clonar 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 a otra cosa.

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 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: #00ff
  • Color 2: #00f76f

Crear formulario de contacto #4

Agregar nueva sección

Color de fondo

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

  • Color de fondo: #FFBABD

Espaciado

Elimina el relleno predeterminado de esta sección.

  • Relleno superior: 0px
  • Relleno 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 la fila y agregue un fondo degradado.

  • Color 1: #ffffff
  • Color 2: rgba(41.196.169,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 38%
  • Posición final: 38%

Dimensionamiento

Cambie la configuración de tamaño a continuación.

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

Espaciado

Y agregue un poco de relleno personalizado.

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

Agregar módulo de texto

Agregar contenido

El primer módulo que necesitamos es un módulo de texto. Continúe e ingrese algo de 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 línea de texto: 1em
  • Orientación del texto: Centro

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

  • Margen superior: 300px
  • Relleno superior: 50px
  • Relleno 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, deshabilite 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 de 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 a 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 flotante: rgba(255,255,255,0)
  • Ancho del borde del botón: 0px
  • Color del icono del botón: #e60085
  • Solo mostrar icono 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: 200px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

Borde

Y agrega ’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 usando la siguiente línea de código CSS en la pestaña avanzada:

01
margin-right: -100px;

Crear formulario de contacto #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 gradiente: 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: 250px
  • Relleno 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 la 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 del canalón: 1
  • Igualar 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
  • Relleno 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 izquierdo: 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 cuadro: 56px
  • Fuerza de propagación de la sombra del cuadro: -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 del texto: Cambay
  • Color del texto: #000000
  • Tamaño del texto: 26px
  • Espaciado entre letras de texto: -0.5px
  • Orientación del texto: Derecha

Espaciado

Agregue un poco de margen superior también.

  • Margen superior: 60px

Visibilidad

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

Clonar 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. Cambia el contenido de ambos duplicados.

Cambiar el espaciado de ambos duplicados

Modifique también el margen superior de ambos duplicados.

  • Margen superior: 80px

Agregue el 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 de 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 crea un botón único usando la siguiente configuración de botón:

  • 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 gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 25%
  • Posición final: 25%
  • Ancho del borde del botón: 0px
  • Mostrar solo el botón al pasar el mouse sobre el botón: No

Espaciado

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

  • Margen superior: 50px

Borde

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: 50px

Avance

Escritorio

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

Móvil

Y esto es lo que puede esperar de los diseños de módulos de formularios de contacto de 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 formularios de contacto 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 de ponerse en contacto. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!