Cómo crear un formulario de contacto en línea con Divi

La sección de héroe (o arriba del pliegue) de la página de inicio es una propiedad inmobiliaria de primera. Y como la mayoría de los desarrolladores inmobiliarios, desea maximizar su espacio. Ahí es donde un formulario de contacto en línea resulta útil. Un formulario en línea es básicamente un formulario en el que todos sus campos o controles permanecen uno al lado del otro, en línea y alineados a la izquierda. Este diseño compacto es ideal para aumentar las conversiones en una página de inicio o una página de destino.

Hoy les mostraré cómo crear un formulario de contacto en línea para su sitio web usando el Visual Builder de Divi. El trabajo necesario para lograr esto se trata realmente de ajustar tanto el ancho como la alineación de los campos del formulario. Para lograr esto, aprovecharemos las características de diseño del módulo de contacto y agregaremos algunos CSS personalizados dentro de la pestaña Avanzado.

Si es nuevo en Divi, no deje que la pestaña Avanzado le impida abordar este tutorial. He hecho todo lo posible para que las cosas sean sencillas y claras.

Disfrutar.

Aquí hay un ejemplo de cómo se verá el formulario de contacto en línea

El concepto y la inspiración

Si alguna vez tuvo que comprar un seguro de automóvil o buscar una nueva casa en línea, probablemente haya visto un formulario en línea que es deliberadamente compacto con campos de entrada mínimos para que usted (el usuario) esté más inclinado a hacer rodar la pelota en un nueva cotización. Así que quería crear un formulario de contacto en línea simple que hiciera algo similar para los usuarios de Divi. Aunque este formulario de contacto no podrá hacer cosas como generar una cotización o abrir una lista de casas, sí se ajusta a las necesidades de los dueños de negocios o blogueros que desean brindar una manera fácil para que los clientes o usuarios se comuniquen con ellos.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Comenzamos agregando una Sección Regular con una fila de estructura de una sola columna.

Dado que el resto de nuestros elementos será difícil de ver en un fondo blanco, sigamos adelante y agreguemos el color de fondo a nuestra sección yendo a Configuración de la sección y actualizando lo siguiente:

Opciones de contenido

Color de fondo: # 006ea5

Guardar ajustes

Ahora podemos agregar nuestro Módulo de formulario de contacto a la fila.

Actualice la configuración del formulario de contacto de la siguiente manera:

Opciones de contenido

Enviar texto del botón: "Obtener cotización"
Correo electrónico: [Ingrese la dirección de correo electrónico a la que deben enviarse los mensajes]
Pantalla Captcha: NO
Color de fondo del formulario: rgba (255,255,255,0)

Opciones de diseño

Fuente del campo de formulario: Lato
Tamaño de fuente del campo de formulario: 24px
Color del texto del campo de formulario: #ffffff
Radio del borde de entrada: 3px
Usar borde: SÍ
Color del borde: #ffffff
Ancho del borde: 1 px
Tamaño del texto del botón: escritorio de 24 px, tableta de 20 px, teléfono inteligente de 20 px
Color del texto del botón: # 0c71c3
Color de fondo del botón: # f4f11f
Ancho del borde del botón: 3px
Radio del borde del botón: 3

Guardar ajustes

Regrese a la pestaña Contenido y elimine el campo del mensaje haciendo clic en el icono de la papelera a la derecha de la barra de campo. Luego, agregue un nuevo campo haciendo clic en el botón del círculo gris con el signo más blanco ubicado debajo de las barras de los campos individuales. Este será el campo Teléfono.

Actualice la configuración de campo de la siguiente manera:

Opciones de contenido

ID de campo: "Teléfono"
Título: Teléfono

Opciones de diseño

Hacer ancho completo: NO
Símbolos permitidos: solo números (0-9)

Opciones avanzadas

Ingrese el siguiente CSS personalizado dentro del cuadro Elemento principal :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Guardar ajustes

Ahora regrese a la pestaña Contenido de la Configuración del formulario de contacto y duplique el campo Teléfono que acaba de crear y conviértalo en un campo Código postal.

Actualice la configuración de campo de la siguiente manera:

Opciones de contenido

ID de campo: "Zip"
Título: Código postal

Opciones avanzadas

Ingrese el siguiente CSS personalizado dentro del cuadro Elemento principal :

Max-width: 17%;
Margin-top: -1.5%;

Guardar ajustes

Hasta ahora hemos ajustado el ancho y la alineación de nuestros campos de teléfono y código postal. Ahora debemos hacer lo mismo con los campos Nombre y Correo electrónico.

Vaya a la configuración del campo Nombre y actualice las Opciones avanzadas con el siguiente CSS personalizado dentro del cuadro Elemento principal :

Max-width: 20%;
Margin-top: -1.5%;

Guardar ajustes

A continuación, vaya a la configuración del campo Correo electrónico y actualice las Opciones avanzadas con el siguiente CSS personalizado dentro del cuadro Elemento principal :

Max-width: 20%;
Margin-top: -1.5%;

Guardar ajustes

Nota importante: observe que el CSS personalizado que se usa para cada uno de los campos tiene una propiedad de ancho máximo establecida en un cierto porcentaje. Este porcentaje dicta qué tan amplios estarán relacionados sus campos con el ancho de su área de contenido. Por ejemplo, el área de contenido predeterminada de Divi es 1080 px, por lo que el campo de nombre es el 20% de 1080 px. Es importante saber esto si desea crear más espacio para su formulario en línea. Todo lo que necesita hacer es ajustar el valor porcentual de la propiedad de ancho máximo según sea necesario.

Casi terminado. Ahora todo lo que tenemos que hacer es limpiar el espacio de la sección y la fila que contiene el formulario. Vaya a Configuración de la sección , en la pestaña Diseño , y actualice lo siguiente:

Relleno personalizado: 12px superior, 14px inferior

Guardar ajustes

Ahora vaya a Configuración de filas , en la pestaña Diseño , y actualice lo siguiente:

Relleno personalizado: 48 px arriba, 0 px derecha, 0 px abajo, 0 px izquierda

Guardar ajustes

Haciéndolo receptivo

Debido a que se trata de un formulario horizontal, los campos del formulario deberán ajustarse en dispositivos móviles. Para solucionar este problema, todo lo que se necesita es un pequeño fragmento de CSS personalizado. Vaya a Configuración de página , en la pestaña Avanzado , y lo siguiente en el cuadro CSS personalizado :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Así es como responde el formulario a los diferentes tamaños de pantalla.

Creación de un formulario de contacto en línea de tres campos

Ahora que ha creado un formulario en línea con cuatro campos, puede convertirlo fácilmente en un campo de tres formularios actualizando algunas opciones. Estos son los pasos:

1. Edite el formulario en línea que acaba de crear o duplique el formulario.
2. Eliminar campo de código postal (ahora solo tiene tres campos)
3. Actualice la configuración del campo del teléfono (o lo que sea el tercer campo), en la pestaña Avanzado, con el siguiente CSS personalizado en el

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Actualice la configuración del campo de correo electrónico (o lo que sea el segundo campo), en la pestaña Avanzado, con el siguiente CSS personalizado en el cuadro Elemento principal:

   max-width: 25%;
   margin-top: -1.5%;

5. Actualice la Configuración del campo de nombre (o lo que sea el primer campo), en la pestaña Avanzado, con el siguiente CSS personalizado en el cuadro Elemento principal:

   max-width: 25%;
   margin-top: -1.5%;

Nota: Observe que la propiedad de ancho máximo para cada uno de los campos ahora es del 25% para aumentar el ancho de los campos.

Creación de un formulario de contacto en línea de dos campos

También puede convertir su formulario en línea en un formulario de dos campos actualizando algunas opciones. Estos son los pasos:

1. Edite el formulario en línea que acaba de crear o duplique el formulario.
2. Elimine el campo del código postal y el campo del teléfono para que solo tenga dos campos (nombre y correo electrónico)
3. Actualice la Configuración del campo de nombre (o lo que sea el primer campo), en la pestaña Avanzado, con el siguiente CSS personalizado en el cuadro Elemento principal:

   max-width: 37%;
   margin-top: -1.5%;

4. Actualice la configuración del campo de correo electrónico (o lo que sea el segundo campo), en la pestaña Avanzado, con el siguiente CSS personalizado en el cuadro Elemento principal:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Agregar otros tipos de campos

Este tutorial es principalmente para tipos de campo de entrada regulares, pero puede cambiarlo fácilmente a un tipo de campo diferente. Por ejemplo, si desea utilizar un tipo de campo desplegable de selección, puede aplicar el mismo estilo que utilizó para los otros campos. Sin embargo, deberá agregar un color de fondo (# 006ea5) a ese campo en particular para que pueda ver las opciones.

Así es como se vería un campo desplegable ...

Pensamientos finales

En mi experiencia, los formularios de contacto en línea pueden ser una herramienta poderosa para su negocio. Hay complementos más avanzados con opciones más robustas listas para usar, pero si otro complemento no es lo tuyo y una solución más simple tiene sentido, pruébalo. Espero que te guste.

Esperamos tener noticias tuyas en los comentarios.