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!
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!