Cómo crear un formulario de cotización con el módulo de formulario de contacto de Divi

Un formulario de cotización (también conocido como formulario de solicitud de cotización) es una gran solución para las pequeñas empresas que buscan captar clientes potenciales calificados sin la molestia de contestar teléfonos. Un buen formulario de cotización puede resolver los huevos podridos que no están listos para su servicio haciendo las preguntas de calificación correctas. También puede ayudar a identificar las necesidades de un cliente para que pueda preparar una respuesta / oferta efectiva y cerrar la venta una vez que los reciba por teléfono.

Hay varios complementos de formularios excelentes que están dedicados al procesamiento de formularios. Pero si está buscando una solución simple y efectiva para su sitio Divi, el Módulo de formulario de contacto actualizado de Divi es justo lo que necesita.

Hoy, lo guiaré a través del proceso de creación de un formulario de cotización simple pero poderoso utilizando la lógica condicional para calificar mejor a los clientes potenciales. También agregaré algunas características de diseño avanzadas utilizando CSS personalizado que harán que el formulario sea aún más limpio y legible.

Empecemos.

Implementando el diseño con Divi

Creación de la sección de encabezado de pantalla completa

El formulario de cotización se puede agregar a cualquier página, pero para este ejemplo, voy a usar una página dedicada solo para el formulario de cotización.

Para dar la bienvenida al visitante, estoy usando un encabezado de pantalla completa que obliga al usuario a hacer clic en el botón o desplazarse para ver el formulario. Esta es una característica interesante que crea una experiencia más personal y le da al usuario la idea de desplazarse y hacer clic antes de ver el formulario. En algunos casos, parece un poco poco atractivo y abrumador cuando llego a una página con nada más que un formulario largo para completar. Esto es opcional, por supuesto, y definitivamente lo probaría para ver si se convierte mejor sin el encabezado de pantalla completa.

Con Visual Builder, agregue una sección de ancho completo y un módulo de encabezado de ancho completo en la parte superior de su página.

Actualice la configuración del encabezado de ancho completo de la siguiente manera:

Opciones de contenido

Título: [ingrese el título; trate de ser más personal en lugar de un título aburrido como "Formulario de cotización"]
Texto del subtítulo: [ingrese el texto del subtítulo]

Texto del botón # 1: [ingrese el texto del botón; algo como "enséñame" o "hagamos esto"]
URL del botón # 1: #quote (esto se usará para la ID de CSS de anclaje que se desplazará a la sección que contiene el formulario a continuación)
URL de la imagen del logotipo: [ingrese la imagen del logotipo]
Superposición de fondo: rgba (0,0,0,0.7)
Imagen de fondo: [sube tu imagen de fondo de 1920 x 1080]

Opciones de diseño

Orientación del texto y el logotipo: Centro
Hacer pantalla completa: SÍ
Mostrar botón de desplazamiento hacia abajo: SÍ
Icono: [elegir icono]
Color del icono de desplazamiento hacia abajo: # 999999
Color del texto: claro
Fuente del título: Ubuntu
Tamaño de fuente del título: 36px
Fuente de subtítulo: Ubuntu
Tamaño de fuente del subtítulo: 22px
Utilice estilos personalizados para el botón uno: SÍ
Tamaño del texto del botón uno: 20px
Color del texto del botón uno: #ffffff
Color de fondo del botón uno: # e09900;
Color del borde del botón uno: # e09900
Espaciado de una letra del botón: 1px
Fuente del botón uno: Ubuntu

Guardar ajustes

Construyendo el formulario de cotización

Ahora, para el formulario de cotización, usaremos el módulo de formulario de contacto de Divi. Primero necesitamos agregar una sección regular con una fila de ancho completo (1 columna). Luego agregue un módulo de formulario de contacto a la fila.

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

Opciones de contenido

Título: [defina un título para su formulario de contacto o agregue instrucciones adicionales]
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]
Habilitar URL de redireccionamiento: SÍ (esto es opcional pero una buena idea)
URL de redireccionamiento: [ingrese la URL de redireccionamiento a una página de agradecimiento personalizada]

Opciones de diseño

Fuente del título: Ubuntu
Tamaño de fuente del título: 30px
Espaciado de letras de título: 1px
Fuente de campo de formulario: Ubuntu
Tamaño de fuente del campo de formulario: 24px
Color del texto del campo del formulario: # e09900
Radio del borde de entrada: 5px
Usar borde: SÍ
Color del borde: # 999999
Ancho del borde: 1 px
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 24px
Color del texto del botón: #ffffff
Color de fondo del botón: # e09900;
Color del borde del botón: # e09900
Espacio entre letras del botón: 1px
Fuente del botón: Ubuntu

Opciones avanzadas (CSS personalizado)

Campo Captcha:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Texto Captcha:

Font-size: 24px

Guardar ajustes

Agregar los campos del formulario de cotización

No es lo que tiene su configuración en su lugar, es hora de agregar nuestros elementos de formulario. De forma predeterminada, el formulario contiene los campos "nombre", "correo electrónico" y "mensaje". Puede eliminar "mensaje".

Campo de la empresa

En el campo "correo electrónico", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : empresa
Título : ¿Cuál es el nombre de su empresa?
Campo obligatorio : SI

Campo de servicio

En el campo "empresa", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : servicio
Título : ¿Cómo podemos ayudarte hoy?
Tipo : botones de radio
Opciones :

• Producción de sitios web
• Desarrollo de aplicaciones
• Dirección artística
• Creación de video

Campo obligatorio : SI

Campo del propósito del arte

En el campo "servicio", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : art_purpose
Título : ¿Qué tipo de dirección de arte necesitas?
Tipo : botones de radio
Opciones :

• Diseño gráfico
• Publicidad
• Marca
• embalaje

Campo obligatorio : SI
Habilitar lógica condicional
Relación : CUALQUIER
Reglas : ¿Cómo podemos ayudarte hoy? > Iguales> Dirección de arte

Nota : Esta lógica muestra este campo cada vez que un usuario selecciona "Dirección de arte" de la pregunta anterior.

Campo de propósito web

En el campo "art_purpose", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : web_purpose
Título : ¿Qué tipo de sitio web necesitas?
Tipo : botones de radio
Opciones :

• Comercio electrónico
• Blog
• Aplicación Web
• Página de destino

Campo obligatorio : SI
Habilitar lógica condicional
Relación : CUALQUIER
Reglas : ¿Cómo podemos ayudarte hoy? > Equals> Producción de sitios web

Nota : Esta lógica muestra este campo cada vez que un usuario selecciona "Producción web" de la pregunta anterior.

Campo de video

En el campo "web_purpose", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : video
Título : ¿En qué dispositivo quieres que se muestre el video?
Tipo : botones de radio
Opciones :

• Teléfono móvil
• Tableta
• Monitor o TV
• Proyector

Campo obligatorio : SI
Habilitar lógica condicional
Relación : CUALQUIER
Reglas : ¿Cómo podemos ayudarte hoy? > Igual que> Creación de video

Nota : Esta lógica muestra este campo cada vez que un usuario selecciona "Creación de video" de la pregunta anterior.

Campo de plataforma de la aplicación

Debajo del campo "video", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : app_platform
Título : ¿En qué plataforma quieres que se desarrolle la aplicación?
Tipo : botones de radio
Opciones :

• iOS
• Androide
• Ventanas
• Mora

Campo obligatorio : SI
Habilitar lógica condicional
Relación : CUALQUIER
Reglas : ¿Cómo podemos ayudarte hoy? > Equals> Desarrollo de aplicaciones

Nota : Esta lógica muestra este campo cada vez que un usuario selecciona "Desarrollo de aplicaciones" de la pregunta anterior.

Campo de presupuesto

En el campo "app_platform", agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:

ID de campo : presupuesto
Título : Si tiene un presupuesto en mente, háganoslo saber.
Tipo : botones de radio
Opciones :

• Menos de $ 1k
• Alrededor de $ 5k
• Más de $ 10,000

Campo obligatorio : NO
Habilitar lógica condicional
Relación : CUALQUIER
Reglas :
¿Cómo podemos ayudarlo hoy? > Equals> Desarrollo de aplicaciones
¿Cómo podemos ayudarlo hoy? > Igual que> Creación de video
¿Cómo podemos ayudarlo hoy? > Equals> Producción de sitios web
¿Cómo podemos ayudarlo hoy? > Iguales> Dirección de arte

Guardar ajustes

Agregue el ID de Anchor CSS

Regrese y edite la Configuración de la sección para la sección que contiene el formulario. En la pestaña Avanzado, ingrese el ID de CSS "cotización".

Esto corresponderá a la URL del botón en el encabezado de ancho completo, de modo que el botón se desplazará a la sección cuando se haga clic en él.

Establecer un ancho personalizado para la columna del formulario de cotización

A continuación, vaya a Configuración de fila para la fila que contiene el formulario de cotización y actualice las Opciones de diseño de la siguiente manera:

Usar ancho personalizado: SÍ
Ancho personalizado: 556px

Personalizaciones de diseño adicionales

Para este formulario de cotización, estamos usando botones de radio, una vez que se hace clic en un botón de radio / círculo, el color del relleno del círculo corresponde al color de acento del tema de su sitio en Personalizador de temas> Configuración general> Configuración de diseño>

Si no desea cambiar el color de acento de su tema en todo el sitio para el color de relleno del botón de opción, vaya a Configuración de página e ingrese el siguiente CSS personalizado en la pestaña CSS:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Además, puede agregar el siguiente CSS para personalizar el texto del título de las preguntas que contienen botones de opción:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Por último, puede agregar un borde con estilo a las listas de botones de opción para que coincida con el estilo del formulario con el siguiente CSS:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

Eso es todo.

Mira el resultado final:

Pensamientos finales

Este formulario de cotización es un ejemplo simplificado de lo que puede hacer con el formulario de cotización. Para su propio formulario de cotización, es posible que desee agregar un campo adicional como "Número de teléfono" para que pueda devolver la llamada a sus clientes potenciales. También puede utilizar una lógica más condicional para obtener información más específica sobre las necesidades del cliente.

Como dije al principio del artículo, existen complementos más avanzados. Hay empresas enteras que se especializan en soluciones sólidas de formularios de contacto por una razón. Espero que esta publicación haya sido útil para mostrar cómo el Módulo de formulario de contacto es más que capaz de manejar la mayoría de sus necesidades de formulario de contacto estándar.