Crear formulario Divi. Una propuesta de diseño diferente

Vamos a ver cómo crear un formulario que se superpone en un footer de color. Aprovecharemos para repasar la clase box-shadow para añadir sombras a contenidos de nuestra web. En este caso vamos a aplicar una sombra al formulario que queda muy chuli.

Bajo estas líneas puedes ver el aspecto final que va a tener nuestro formulario de contacto una vez finalicemos este tutorial.

La estructura de la sección

Nuestra única sección (imagen inferior, azul) estará compuesta por dos filas (en verde). La fila superior presenta dos columnas que contiene los módulos (color gris), la primera columna contiene tres módulos de texto y la segunda columna, la de la derecha, el formulario de contacto.

La segunda fila, la inferior, contiene el footer de color, en nuestro caso verde. Es de 3 columnas y tenemos:

• La columna 1 contiene dos módulos de texto.
• En la segunda columna tenemos un separador arriba y módulo de texto abajo.
• Columna 3: Igual que la columna 2.

No vamos a explicar paso a paso como crear cada uno de los módulos, porque vas a poder verlo en el video-tutorial incluido al final del post.

Creamos nueva página, le ponemos un nombre y pulsamos el botón “Usar el constructor Divi”.

Nos cambia la vista a la del constructor Divi. Pulsamos en insertar columnas, aparece la pantalla para seleccionar las columnas y seleccionamos dos columnas 1/2-1/2. Después vamos creando los módulos de texto en la columna de la izquierda y el de formulario de contacto en la columna de la derecha.

A continuación vamos a ver qué configuraciones debemos usar para conseguir nuestro objetivo.

AJUSTES DE LA SECCIÓN

En este ejercicio no necesitamos modificar nada de nuestra sección, así que lo dejamos como está.

Contenido de la fila superior

Primera columna

• Primer módulo de texto: Añade el texto, color de texto oscuro, orientación: izquierda. En ajustes avanzados de diseño, le he puesto un tamaño de 14 px.

• Segundo módulo de texto: “Lorem ipsum…”. Oscuro, justificado a la izquierda, tamaño 13 px, texto altura de línea 1.6 em.
• Tercer módulo de texto: El teléfono y el email. Tiene los mismos ajustes que el módulo anterior.

Segunda columna

Aquí ponemos el formulario de contacto. Por defecto, nos va a poner los campos nombre y email en la misma línea y la opción Mostrar Captcha activada. Desactivamos esta última opción en los ajustes generales del módulo.

Ahora entramos en cada uno de los ajustes de los campos de formulario (imagen superior) y asegúrate de tener marcada la opción hacer anchura completa (como en la imagen inferior). De esta forma, cada campo del formulario ocupará una línea.

En los ajustes avanzados de cada campo marcamos usar borde, color #64a81c, anchura del borde 1 px y guardamos.

Ahora, en Ajustes avanzados de diseño del módulo de formulario (sin entrar en cada campo de formulario), ponemos el título de la fuente en 16 px, mayúscula y negrita. El tamaño del texto de los campos de formulario los he puesto 12 px y activamos la casilla Utilizar estilos de texto personalizados para cambiar algunas opciones en el botón enviar: Botón tamaño de texto 13 px, botón color de texto, blanco. Botón color de fondo: #64a81c. El resto lo he dejado por defecto, pero si quieres, puedes experimentar con las distintas opciones.

Para terminar con la configuración del módulo de formulario de contacto, abrimos la pestaña CSS personalizado y el campo que pone Elemento principal añadimos el siguiente código:

padding: 40px;
box-shadow: 0 0 20px rgba(0,0,0,.2);
background: #ffffff !important;
position: relative !important;
z-index: 1;

• La primera línea (padding) determina el espacio alrededor del formulario.
• La segunda aplica una sombra al módulo, puedes variar los valores para ajustarlo a tus preferencias.
• La tercera línea es el color de fondo del formulario (blanco).
• Las dos últimas líneas permiten la superposición del formulario sobre la fila inferior de color verde.

Con esto hemos terminado con el formulario, ahora abrimos los ajustes de la fila y configuramos de la siguiente manera:

AJUSTES FILA SUPERIOR

En Ajustes generales no debemos hacer nada, pulsamos entonces en Ajustes avanzados de diseño y ponemos el Color de fondo en gris (#e5e5e5). Después modificamos el relleno personalizado de cada columna con los parámetros que puedes ver en la imagen de abajo. Es una buena idea hacerlo en la vista Constructor visual para que vayas viendo los cambios que se producen en el momento.

Con esto hemos terminado con la primera fila. Por lo tanto, vamos ahora con la fila inferior

CONTENIDO DE LA FILA INFERIOR

Primera columna

• Primer módulo de texto: Añade el texto, color de texto claro, orientación: izquierda.

En ajustes avanzados de diseño, le he puesto un tamaño de 14 px.

• Segundo módulo de texto: “Lorem ipsum…”. Claro, justificado a la izquierda, tamaño 13 px, texto altura de línea 1.6 em.

Segunda Columna

• Módulo separador. Ajustes generales >> No mostrar separador y altura: 30 px.
• Modulo de texto: “Lorem ipsum…”. Claro, justificado a la izquierda, tamaño 13 px, texto altura de línea 1.6 em.

Tercera Columna

• Módulo separador. Ajustes generales >> No mostrar separador y altura: 30 px.
• Modulo de texto: “Lorem ipsum…”. Claro, justificado a la izquierda, tamaño 13 px, texto altura de línea 1.6 em.

Finalmente configuramos la fila.

AJUSTES FILA INFERIOR

Pulsamos el botón de configuración de fila y en Ajustes generales >> Relleno personalizado ponemos: Superior: 0px, Derecha 0px, Base 60px e izquierda 0px.

Ahora, en Ajustes avanzados de diseño, introducimos en el Margen personalizado superior un valor de -120px (no olvides que es un valor negativo) y ponemos el fondo de la fila a verde introduciendo el siguiente parámetro: #64a81c.

En la misma pantalla, desplázate más abajo y cambia los valores Relleno Izquierda de los campos columna 1,2 y 3 al 6%, 3% y 3% respectivamente. Los demás déjalos como están.

Si todo ha ido bien, habrás creado el formulario como has visto en la primera imagen del tutorial.

Tenemos un tutorial que explica como añadir animación a nuestros campos de formulario. Pulsa AQUÍ si quieres verlo

No olvides compartir si te ha gustado, por favor.

Si te has atascado puedes seguir la práctica propuesta en el videotutorial: