El formulario de contacto de Divi es un módulo muy versátil que le permite recopilar información y correspondencia de los visitantes de su sitio web. Al utilizar la configuración de lógica condicional integrada en el módulo de formulario de contacto de Divi, puede crear fácilmente formularios complejos y dinámicos para su sitio web. Esta característica le permite revelar campos adicionales según las respuestas dadas para los campos anteriores en su formulario de contacto para que pueda recopilar información adicional o presentar preguntas de seguimiento que solo pueden ser relevantes según una respuesta anterior. Por ejemplo, puede tener una casilla de verificación para indicar interés en los servicios que brinda. Si la casilla de verificación está seleccionada, puede revelar un menú desplegable para que los usuarios seleccionen el tipo de servicio que desean o para brindarle información adicional. Usando la lógica condicional,
Hay tantos casos de uso para agregar lógica condicional al formulario, sin importar qué tipo de sitio web tenga, y puede ayudar a mejorar la experiencia general del usuario en su sitio. En este tutorial, le mostraremos cómo revelar un menú desplegable de opciones después de marcar una casilla en su formulario de contacto de Divi . ¡Empecemos!
Aquí hay una vista previa de lo que diseñaremos.
Lo que necesitas para empezar
Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.
Ahora, ¡estás listo para comenzar!
Cómo revelar un menú desplegable de opciones después de marcar una casilla en su formulario de contacto Divi
Crear una nueva página con un diseño prefabricado
Comencemos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de inicio de Home Baker del paquete de diseño de Home Baker .
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.
Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.
A continuación, busque y seleccione el diseño de la página de inicio de Home Baker.
Seleccione Usar este diseño para agregar el diseño a su página.
Ahora estamos listos para construir nuestro diseño.
Agregar el formulario de contacto
Desplácese hasta «¡Acepto pedidos personalizados!» sección del diseño del panadero casero. Agregaremos un formulario de contacto a esta sección. Primero, elimine el botón «Contácteme» ubicado debajo del texto del encabezado.
A continuación, inserte un módulo de formulario de contacto debajo del texto del encabezado.
Necesitamos ajustar nuestro diseño para que todos los campos ocupen todo el ancho del formulario. Abra la configuración del módulo de formulario de contacto, luego abra la configuración para el campo Nombre.
Vaya a la pestaña Diseño y abra la configuración de Diseño. Haga que el campo Nombre sea de ancho completo.
- Hacer ancho completo: Sí
Repetiremos los mismos pasos para el campo Dirección de correo electrónico. Abra la configuración del campo de correo electrónico, luego abra la configuración de diseño en la pestaña Diseño y establezca el campo en ancho completo.
- Hacer ancho completo: Sí
A continuación, ajustemos nuestra configuración de Protección contra correo no deseado en la pestaña Contenido de la configuración del formulario de contacto. Para este formulario, voy a utilizar el servicio de protección ReCaptcha.
- Utilice un servicio de protección contra correo no deseado: Sí
- Proveedor de servicios: ReCaptcha
Agregue un menú desplegable de opciones reveladoras al formulario
Ahora podemos agregar nuestro menú desplegable de opciones de revelación. Para este ejemplo, agregaremos una casilla de verificación al formulario que preguntará si los usuarios están interesados en un pedido personalizado de productos horneados. Si marcan la casilla, aparecerá un campo desplegable donde el usuario seleccionará el tipo de producto horneado que le interesa ordenar. Empecemos.
Primero, agregue un nuevo campo al formulario.
Abra la nueva configuración de campo y agregue el siguiente contenido en la configuración de Texto.
- ID de campo: Interesado
- Título: ¿Interesado en un pedido personalizado?
A continuación, en las opciones de campo, configure lo siguiente:
- Tipo: casillas de verificación
- Opciones: Sí
- Campo Requerido: No
Regrese a la configuración del formulario de contacto y agregue otro campo nuevo. Este será nuestro menú desplegable de opciones reveladas donde los clientes seleccionan el tipo de producto horneado que desean ordenar.
Abra las nuevas opciones de campo y agregue el siguiente ID y título de campo:
- ID de campo: qué tipo
- Título: ¿Qué tipo de productos horneados?
A continuación, abra las Opciones de campo y establezca el tipo de campo en Seleccionar menú desplegable. Luego, agregue las opciones.
- Tipo: Seleccionar menú desplegable
- Opciones:
- panes
- Tortas
- Magdalenas
- pasteles
- Otro
- Campo Requerido: No
Ahora muévase a la sección Lógica condicional y habilite la configuración de lógica condicional. Luego, configure la regla para mostrar el campo según la casilla de verificación anterior.
- Habilitar: Sí
- Reglas: Interesado Igual Sí
Esta regla configura el formulario de modo que si se selecciona la casilla de verificación «Sí» anterior, aparecerá el campo «Qué tipo de productos horneados». Si la casilla de verificación no está seleccionada, el campo de tipo permanecerá oculto.
Personaliza el diseño del formulario de contacto
Ahora que nuestro formulario de contacto y la lógica condicional están configurados, podemos personalizar el diseño del formulario para que se ajuste mejor al diseño de la página.
Abra la configuración del formulario de contacto y vaya a la pestaña de diseño. En las opciones de campo, personalice la configuración de la siguiente manera.
- Color de fondo de los campos: #FFFFFF
- Color del texto de los campos: #906d5e
A continuación, establezca el relleno del campo y personalice la configuración de la fuente.
- Relleno superior de campos: 16px
- Fondo de relleno de campos: 16px
- Relleno de campos a la izquierda: 20px
- Relleno de campos a la derecha: 20px
- Fuente de los campos: Lato
- Peso de la fuente de los campos: Negrita
- Estilo de fuente de los campos: en mayúsculas (TT)
- Espaciado de letras de campos: 0.1em
Ahora vaya a la configuración de los botones y personalice los estilos de los botones de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #3b261e
- Fondo del botón: #dcc087
A continuación, personalice el borde del botón y la configuración de la fuente.
- Color del borde del botón: #dcc087
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 0,1 em
- Fuente del botón: Lato
- Peso de la fuente del botón: Pesado
- Estilo de fuente del botón: en mayúsculas (TT)
Luego, modifique el margen del botón y el relleno de la siguiente manera:
- Margen superior del botón: 10px
- Relleno de botones superior: 16px
- Parte inferior del relleno del botón: 16px
- Relleno de botones a la izquierda: 32 px
- Relleno de botones a la derecha: 32 px
Finalmente, modificaremos la configuración de los bordes para agregar bordes alrededor de las entradas del formulario.
- Ancho del borde de las entradas: 1px
- Color del borde de entrada: #3b261e
Resultado final
Eso completa el diseño completo del formulario de contacto. Echemos un vistazo al formulario en acción con el menú desplegable de opciones reveladoras.
Pensamientos finales
La lógica condicional es fácil de implementar en el módulo de formulario de contacto de Divi y le permite crear formularios dinámicos que presentan campos relevantes al usuario en función de sus respuestas anteriores. Si bien el ejemplo de este tutorial es relativamente simple, puede usar la lógica condicional para crear formularios complejos con varias instancias de lógica condicional. Para obtener más información sobre lo que puede hacer con el formulario de contacto y la lógica condicional de Divi, consulte este artículo sobre Cómo crear un formulario de contacto Divi versátil con lógica condicional . ¿Ha utilizado las opciones de lógica condicional en el formulario de contacto de su sitio web? ¡Nos encantaría saber de ti en los comentarios!