Un formulario de cotización (también conocido como formulario de solicitud de cotización) es una excelente solución para las pequeñas empresas que buscan obtener 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 al hacer 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 llame por teléfono.
Hay una serie de excelentes complementos de formularios de WordPress 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 lógica condicional para calificar mejor a los clientes potenciales. También agregaré algunas funciones de diseño avanzadas utilizando CSS personalizado que harán que el formulario sea aún más limpio y legible.
Empecemos.
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, 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 genial que crea una experiencia más personal y anima al usuario a 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.
Usando 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; intente 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 así como “muéstrame” o “Hagamos esto”]
URL del botón n.° 1: #cita (esto se usará para el 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]
Fondo Superposición: rgba(0,0,0,0.7)
Imagen de fondo: [cargue su imagen de fondo de 1920 x 1080]
Opciones de diseño
Orientación del texto y logotipo: Centro
Crear pantalla completa: SÍ
Mostrar botón de desplazamiento hacia abajo: SÍ
Icono: [elegir icono]
Desplazar hacia abajo Color del icono: #999999
Color del texto: Luz
Fuente del título: Ubuntu
Tamaño de la fuente del título: 36px
Fuente del subtítulo: Ubuntu
Tamaño de la fuente del subtítulo: 22px
Usar 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 entre letras del botón uno: 1px
Fuente del botón uno: Ubuntu
Guardar ajustes
Construyendo el formulario de cotización
Ahora, para el formulario de cotización, vamos a utilizar el módulo de formulario de contacto de Divi. Primero, debemos 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]
Texto del botón Enviar: Obtener cotización
Correo electrónico: [ingrese la dirección de correo electrónico donde se deben enviar los mensajes]
Habilitar URL de redireccionamiento: SÍ (esto es opcional pero es una buena idea)
URL de redireccionamiento : [ingrese la URL de redirección a una página de agradecimiento personalizada]
Opciones de diseño
Fuente del título: Ubuntu
Tamaño de la fuente del título: 30 px
Espaciado entre letras del título: 1 px
Fuente del campo de formulario: Ubuntu
Tamaño de la fuente del campo de formulario: 24 px
Color del texto del campo de formulario: #e09900
Radio del borde de entrada: 5 px
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
Espaciado entre letras del botón: 1px
Fuente del botón: Ubuntu
Opciones avanzadas (CSS personalizado)
Campo Captcha:
|
01
02
03
|
Font-size: 24px;Max-width: 60px;Padding: 16px 14px 14px; |
Texto captcha:
|
01
|
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 Requerido : 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 :
Título del servicio : ¿Cómo podemos ayudarlo hoy?
Tipo : botones de radio
Opciones :
- Producción de sitios web
- Desarrollo de aplicaciones
- Dirección artística
- Creación de videos
Campo Requerido : SI
Campo de propósito artístico
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 : SÍ
Habilitar
relación lógica condicional : CUALQUIER
Regla : ¿Cómo podemos ayudarlo 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 finalidad 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 necesita?
Tipo : botones de radio
Opciones :
- comercio electrónico
- Blog
- Aplicación Web
- Página de destino
Campo obligatorio : SÍ
Habilitar
relación lógica condicional : CUALQUIER
Regla : ¿Cómo podemos ayudarlo 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 vídeo
En el campo «propósito_web», agregue un nuevo campo y actualice la configuración en Opciones de contenido de la siguiente manera:
ID de campo :
Título del video : ¿En qué dispositivo desea que se muestre el video?
Tipo : botones de radio
Opciones :
- Teléfono móvil
- Tableta
- monitor o televisor
- Proyector
Campo obligatorio : SÍ
Habilitar
relación lógica condicional : CUALQUIER
Regla : ¿Cómo podemos ayudarlo hoy? > Iguales > Creación de videos
Nota : esta lógica muestra este campo cada vez que un usuario selecciona «Creación de video» en la pregunta anterior.
Campo de la plataforma de la aplicación
En el 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 desea que se desarrolle la aplicación?
Tipo : botones de radio
Opciones :
- iOS
- Androide
- ventanas
- Mora
Campo obligatorio : SÍ
Habilitar
relación lógica condicional : CUALQUIER
Regla : ¿Cómo podemos ayudarlo hoy? > Iguales > Desarrollo de aplicaciones
Nota : esta lógica muestra este campo cada vez que un usuario selecciona «Desarrollo de aplicaciones» en 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 $ 10k
Campo obligatorio : NO
Habilitar
relación lógica condicional : CUALQUIERA
Reglas :
¿Cómo podemos ayudarlo hoy? > Equals > Desarrollo de aplicaciones
¿Cómo podemos ayudarte hoy? > Equals > Creación de videos
¿Cómo podemos ayudarte hoy? > Equals > Producción de sitios web
¿Cómo podemos ayudarlo hoy? > Iguales > Dirección de Arte
Guardar ajustes
Agregue el ID de CSS de anclaje
Regrese y edite la Configuración de la sección para la sección que contiene el formulario. En la pestaña Avanzado, ingrese la «cita» de ID de CSS.
Esto corresponderá a la URL del botón en el encabezado de ancho completo para que el botón se desplace a la sección cuando se haga clic.
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: 556 px
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 énfasis del tema de su sitio en Personalizador de tema > 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:
|
01
|
.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:
|
01
|
.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:
|
01
|
.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 podría usar una lógica más condicional para obtener información más específica sobre las necesidades del cliente.
Como dije al comienzo del artículo, existen complementos más avanzados. Hay empresas enteras que se especializan en soluciones robustas 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.