ElegantThemes

Aquí se explica cómo crear un formulario de contacto Divi versátil utilizando lógica condicional

No todos los visitantes llegan a su sitio web por la misma razón. Es probable que ofrezca una variedad de productos o servicios, no solo una opción única para clientes y clientes. Debido a esto, múltiples formularios de contacto específicos pueden ayudar a suavizar la experiencia de usuario de su sitio web para que sus clientes (y prospectos) puedan comunicarse con usted de la manera más fluida posible sobre exactamente lo que necesitan. Uso de Dos Módulo de formulario de contacto y nuestro función lógica condicional, lo guiamos a través de la creación de la mejor canalización posible entre usted y sus usuarios.

Vista previa del formulario de contacto condicional

Cuando todo está dicho y hecho, tiene algo similar en su sitio web para que lo usen sus visitantes.

Escritorio

Teléfono celular, teléfono móvil

¿Qué es la lógica condicional?

Primero queremos abordar brevemente lo que queremos decir con lógica condicional. En este tutorial, vamos a configurar una serie de formularios de contacto que aparecerán o no en función de las elecciones realizadas por el usuario.

Por ejemplo, puede tener un formulario de contacto único que se adapte al servicio o producto que necesita el visitante. De esta manera, en lugar de tener que escribirlo, obtiene la información en el formato que necesita. La lógica condicional en los formularios de contacto puede mejorar la comunicación y acelerar su capacidad de proporcionar información a sus usuarios.

Con eso en mente, creemos los formularios de contacto específicos.

Cómo crear formularios de contacto con lógica condicional

Descarga Divi Builder

Dado que estamos utilizando el módulo de formulario de contacto de Divi, debemos llamar al Divi Builder. Usaremos eso Paquete de diseño de paisajismo como ejemplo en este tutorial. Puede usar cualquier diseño o diseño que desee, pero debe poder usar y diseñar el módulo de formulario de contacto de Divi.

Primero, llame a Divi Builder desde el backend de su sitio web de WordPress. En el editor de página, verá un botón morado que dice Utilice Divi Builder (o Edición con Divi Builder si ya ha creado la página).

Agregar o buscar el módulo de formulario de contacto

Entonces querrás encontrarlos Módulo de formulario de contacto que ya existe en la página o haga clic en el Círculo + negro Icono y busque el Formulario de contacto en el menú desplegable.

módulo formulario de contacto divi

Ingrese la configuración del formulario de contacto

El módulo de formulario de contacto de Divi contiene 3 campos por defecto: Apellido, Correo electrónico, y Noticias. Lo que haremos es crear un formulario de contacto en el que estas opciones solo se mostrarán una vez que el visitante nos haya brindado la información suficiente para poder enviar su solicitud.

opciones de formulario de contacto divi

Agrega la primera pregunta condicional

Bajo la contenido Tab y debajo de todos los campos que ya están en el formulario, verá que Agregar un nuevo campo Botón. Haz click en eso.

Agregar un nuevo campo

Esto abre el Configuración de campo Ventana y debería ver lugares para ID de campo y título Entradas. los ID de campo es para ti. Esto se muestra en la configuración del módulo para que pueda tener una descripción general. los título es el texto que verán sus visitantes al principio del formulario. (El título también aparecerá en el correo electrónico que recibió cuando envió el formulario).

pregunta condicional

Los marcamos ID de campo con «Condicional», porque esta es la primera pregunta que el visitante ve en el formulario. Su reacción a esto determinará lo que verá a continuación. Esta es una manera fácil de realizar un seguimiento del flujo de preguntas y respuestas en el formulario.

Agregar opciones de campo

A continuación, desplácese debajo del Pestaña de contenido al Opciones de campo Sección. Aquí es donde agrega las opciones para el usuario. Cada uno de ellos será un detonante para ciertas preguntas de seguimiento. Para este ejemplo usaremos Casilla de verificación como nuestro tipo de entrada. Esto significa que el usuario puede elegir tantos como desee.

elige el tipo de campo

Además de Casilla de verificación, Divi también permite otras opciones: caja de entrada y Área de texto para las respuestas ingresadas por el propio usuario, Seleccionar menú desplegable y Botones de radio para las opciones individuales que proporciona, también Campo de correo electrónico para ingresar la dirección de correo electrónico. El estandar Apellido El campo es un caja de entrada, y Noticias es un Área de texto.

Con Casilla de verificación seleccionado, vamos a ingresar las selecciones que queremos que activen las diferentes opciones más adelante. Luego queremos asegurarnos de que este Campo requerido para que el usuario no pueda enviar el formulario antes de tiempo.

Opciones de campo del formulario de contacto

Es importante señalar aquí que no agregue ninguna lógica condicional a este paso. Este es el disparador, por lo que se mostrará al usuario independientemente.

Agregar nuevos campos para respuestas condicionales

Pero a continuación agregaremos Lógica condicional para el nuevo los campos agregamos como respuesta de seguimiento. Dado que hemos incluido 3 opciones para la pregunta inicial, Agregue 3 nuevos campos correspondientes al formulario. Repetirás los siguientes pasos para cada uno.

nuevos campos para respuestas

Nombra las respuestas condicionales en los nuevos campos.

Observe que usamos una convención de nomenclatura de Condicional 1 (para mostrar el primer disparador condicional) y luego 1a, 1b, y 1c para obtener respuestas de seguimiento. También los hemos marcado en consecuencia para que podamos realizar un seguimiento de las cosas.

preguntas condicionales

Al igual que con la primera pregunta, también título que la pregunta que verá el visitante.

Agregue lógica condicional a los campos de respuesta

Luego, desplácese hacia abajo hasta el Lógica condicional Sección bajo el contenido Ficha de este campo. Encienda el interruptor para Lógica condicional. Entonces elige el relación para esto, lo que significa que puede configurarlo alguna (cualquier número de respuestas puede hacer que aparezca esta opción) o Todo el mundo (Solo la combinación específica de respuestas hace que aparezca este campo).

Si, como nosotros, también usa una única regla de activación alguna o Todo el mundo trabajará.

lógica condicional para el formulario de contacto

Debajo normas, verá el campo que lo desencadena y, a la derecha, puede elegir qué selección debe desencadenar. El centro es el calificador, como es igual, no es igual, es menor que, es mayor que, Etcétera. Para este campo en particular, seleccionamos la pregunta que ponemos como Condicional 1 y luego la opción contenida en el mismo que desencadena específicamente la aparición de este campo.

Repita para todas las respuestas condicionales

Como hemos agregado tres respuestas diferentes a nuestra pregunta condicional única, repetiremos este proceso también para los otros campos. Cree solo las respuestas correlativas apropiadas para esta selección.

Configure el formulario de contacto Fiends ‘Nombre / Correo electrónico / Mensaje’ para que aparezca

Una vez que haya configurado las respuestas lógicas condicionales, queremos que el visitante pueda enviar el formulario. Adaptamos la lógica condicional en el Apellido, Correo electrónico, y Noticias Los campos. La configuración para cada uno de estos es exactamente la misma, así que repita esto tres veces más.

Dentro de Apellido, Correo electrónico, y Noticias Configuración de campo, vaya a Lógica condicional. Actívala y agrega tantas como tengas respuestas finales a sus preguntas de seguimiento condicionales. En nuestro caso, tenemos 3 preguntas de seguimiento, por lo que usamos 3 reglas.

lógica condicional para seguimientos en el formulario de contacto

Para cada regla, seleccione la pregunta de seguimiento como desencadenante. Ponte el calificador no está vacío, es decir, siempre que el visitante haya respondido a la pregunta, se cumple la condición. Esto atenuará el último cuadro, lo que indica que cualquier respuesta es suficiente.

Guarde sus cambios y Repita esto para todos los campos que deben mostrarse para permitir que se envíe el formulario. ¡Y eso es! Tu formulario se adapta inmediatamente a las necesidades de tus usuarios.

Resultados finales

A continuación se muestra cómo funciona la lógica condicional en la práctica.

Escritorio

Teléfono celular, teléfono móvil

Envolver

El formulario de contacto es uno de los elementos más ubicuos de un sitio web. Prácticamente todos los sitios tienen uno y prácticamente todos los sitios necesitan uno. Pero no todos los usuarios visitan su sitio por la misma razón. Al utilizar la función de lógica condicional de Divi, puede personalizar sus formularios de contacto en una herramienta versátil para que sus usuarios se comuniquen.

¿Qué tipos de formularios creó con la función Lógica condicional de Divi?

Imagen destacada del artículo de Kubko / shutterstock.com

El cargo Aquí se explica cómo crear un formulario de contacto Divi versátil utilizando lógica condicional apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *