No todos los visitantes llegan a su sitio por la misma razón. Probablemente ofrezca una gama de productos o servicios, no solo una opción única para clientes y clientes. Es por eso que tener múltiples formularios de contacto dirigidos puede ayudar a suavizar la UX de su sitio para que sus clientes (y potenciales) puedan comunicarse con usted sobre exactamente lo que necesitan con la menor fricción posible. Usando el módulo de formulario de contacto Divi y nuestra función de lógica condicional , lo guiaremos a través de la creación de la mejor canalización posible entre usted y sus usuarios.
Cuando todo esté dicho y hecho, tendrá algo similar a esto en su sitio, listo para que lo usen sus visitantes.
Escritorio
Móvil
¿Qué es la lógica condicional?
Primero, queremos abordar brevemente lo que entendemos por lógica condicional . Lo que vamos a hacer en este tutorial es configurar una serie de formularios de contacto que aparecen en función de las elecciones que hace o no hace el usuario.
Por ejemplo, puede tener un único formulario de contacto que se ajuste según el servicio o producto que necesite el visitante. De esa manera, puede obtener la información en el formato que necesita en lugar de que ellos tengan que escribirla. La lógica condicional en los formularios de contacto puede mejorar la comunicación y agilizar su capacidad para atender a sus usuarios.
Con eso en mente, profundicemos en la creación de formularios de contacto específicos.
Cómo crear formularios de contacto usando lógica condicional
Cargue el Divi Builder
Como estamos usando el módulo Formulario de contacto de Divi, necesitaremos ingresar al Divi Builder. Vamos a utilizar el paquete de diseño de mantenimiento de paisaje como ejemplo en este tutorial. Puede usar cualquier diseño o diseño que desee, pero deberá poder usar y diseñar el módulo de formulario de contacto de Divi.
Para comenzar, ingrese a Divi Builder desde el backend de su sitio web de WordPress. Dentro del Editor de páginas, verá un botón morado que dice Usar Divi Builder (o Editar con Divi Builder si ya ha creado la página).
Agregar o encontrar el módulo de formulario de contacto
Luego, querrá encontrar el Módulo de formulario de contacto que ya existe en la página o hacer clic en el icono Negro + Círculo y buscar el Formulario de contacto en el menú desplegable.
Ingrese la configuración del formulario de contacto
El módulo Formulario de contacto de Divi viene con 3 campos por defecto: Nombre , Correo electrónico y Mensaje . Lo que vamos a hacer es crear un formulario de contacto donde no aparezcan esas opciones hasta que el visitante nos haya dado suficiente información para poder dirigir su consulta.
Agregar la primera pregunta condicional
En la pestaña Contenido y debajo de cualquier campo que ya esté en el formulario, verá el botón Agregar nuevo campo . Haz clic en eso.
Al hacerlo, se abre la ventana Configuración de campo y debería ver lugares para las entradas de Id. de campo y Título . El ID de campo es para usted. Eso es lo que aparece dentro de la configuración del módulo para que pueda realizar un seguimiento. El Título es el texto que sus visitantes verán en la parte frontal del formulario. (El título también aparecerá en el correo electrónico que reciba cuando envíe el formulario).
Hemos etiquetado el Id. de campo como «Condicional» porque esta es la primera pregunta que el visitante verá en el formulario. Su respuesta determinará lo que ven a continuación. Esta es una manera fácil de seguir el flujo de preguntas y respuestas del formulario.
Agregar opciones de campo
A continuación, desplácese por debajo de la pestaña Contenido hasta la sección Opciones de campo . Aquí es donde agregará las opciones para que el usuario elija. Cada uno de estos será un disparador para ciertas preguntas de seguimiento. Para este ejemplo, estamos usando casillas de verificación como nuestro tipo de entrada. Esto significa que el usuario puede elegir tantos como quiera.
Además de las casillas de verificación , Divi también permite otras opciones: campo de entrada y área de texto para las respuestas escritas por el usuario, menú desplegable de selección y botones de radio para las opciones singulares que proporcione, así como campo de correo electrónico para la entrada de la dirección de correo electrónico. El campo de nombre predeterminado es un campo de entrada y el mensaje es un área de texto .
Con las casillas de verificación seleccionadas, ingresaremos las opciones que queremos que activen diferentes opciones más adelante. Luego queremos asegurarnos de que este sea un campo obligatorio para que el usuario no pueda enviar el formulario antes de tiempo.
Es importante tener en cuenta aquí que no agregamos lógica condicional a este paso. Este es el desencadenante, por lo que aparece para el usuario independientemente.
Agregar nuevos campos para respuestas condicionales
A continuación, sin embargo, agregaremos lógica condicional para los nuevos campos que agregamos como respuestas de seguimiento. Debido a que incluimos 3 opciones para la pregunta inicial, vamos a agregar 3 nuevos campos correspondientes al formulario . Repetirás los siguientes pasos para cada uno.
Nombre las respuestas condicionales en los nuevos campos
Tenga en cuenta que hemos utilizado una convención de nomenclatura de Condicional 1 (para indicar el primer activador condicional) y luego 1a , 1b y 1c para las respuestas de seguimiento. También los hemos etiquetado apropiadamente para que podamos hacer un seguimiento de lo que son.
Al igual que la primera pregunta, también ingresaremos el Título como la pregunta que verá el visitante.
Agregar lógica condicional a los campos de respuesta
Después de eso, desplácese hacia abajo hasta la sección Lógica condicional en la pestaña Contenido de ese campo. Habilite el conmutador para la lógica condicional . Luego, elija la Relación para esta, lo que significa que puede establecerla en cualquiera (cualquier cantidad de respuestas puede hacer que esta opción aparezca) o todas (solo la combinación específica de respuestas hace que este campo aparezca).
Si solo usa una regla de activación única como nosotros, cualquiera o todas funcionarán .
En Reglas , verá el campo que activa este y, a la derecha, puede seleccionar qué opción lo activará. El centro es el calificador, como es igual, no es igual, es menor que, es mayor que , etc. Para este campo en particular, estamos seleccionando la pregunta que configuramos como Condicional 1 y luego la opción dentro de ella que activa específicamente la aparición de este campo.
Repita esto para todas las respuestas condicionales
Dado que agregamos tres respuestas diferentes a nuestra única pregunta condicional, también vamos a repetir este mismo proceso para los otros campos. Solo creando las respuestas correlativas apropiadas para esa selección.
Configurar formulario de contacto Fiends ‘Nombre/Correo electrónico/Mensaje’ para que aparezca
Una vez que haya configurado las respuestas para la lógica condicional, queremos que el visitante pueda enviar el formulario. Para eso, vamos a ajustar la lógica condicional en los campos Nombre , Correo electrónico y Mensaje . La configuración para cada uno de estos es exactamente la misma, así que una vez más, repetirá esto 3 veces.
Dentro de la configuración de los campos Nombre , Correo electrónico y Mensaje , vaya a Lógica condicional . Habilítelo y agregue tantas como tenga respuestas finales a sus preguntas de seguimiento condicional. En nuestro caso, tenemos 3 preguntas de seguimiento, por lo que estamos usando 3 reglas.
Para cada regla, elija la pregunta de seguimiento como desencadenante. Establezca el calificador en no está vacío , lo que significa que siempre que el visitante responda la pregunta, se cumple la condición. Eso atenuará el cuadro final, lo que indica que cualquier respuesta es suficiente.
Guarde sus cambios y repita esto para cualquier campo que desee que aparezca para permitir el envío de formularios . ¡Y eso es! Su formulario se ajustará a las necesidades de sus usuarios de inmediato.
Resultados finales
Puede ver a continuación cómo funciona la lógica condicional en la práctica.
Escritorio
Móvil
Terminando
El formulario de contacto es uno de los elementos más ubicuos de un sitio web. Casi todos los sitios tienen uno, y casi todos los sitios necesitan uno. Pero no todos los usuarios llegan a su sitio por la misma razón. Al usar 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é tipo de formularios ha creado utilizando la función Divi Conditional Logic?
Imagen destacada del artículo por Kubko / shutterstock.com