Cómo crear un formulario de contacto Divi versátil con lógica condicional

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 específicos 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 para crear la mejor canalización posible entre usted y sus usuarios.

Vista previa del formulario de contacto condicional

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 el usuario hace o no.

Por ejemplo, puede tener un formulario de contacto único que se ajusta según el servicio o producto que necesita 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 de proporcionar 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

Dado que 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 del paisaje como ejemplo en este tutorial. Puede usar cualquier disposición o diseño que desee, pero deberá poder usar y diseñar el módulo de formulario de contacto de Divi.

Para empezar, ingrese Divi Builder desde el backend de su sitio web de WordPress. Dentro del Editor de página, verá un botón morado que dice Usar Divi Builder (o Editar con Divi Builder si ya ha creado la página).

Agregar o buscar 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 haga clic en el ícono Negro + Círculo y busque 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 esas opciones no aparezcan hasta que el visitante nos haya dado suficiente información para poder dirigir su consulta.

Agregar la primera pregunta condicional

Debajo de la pestaña Contenido y debajo de cualquier campo que ya esté en el formulario, verá el botón Agregar nuevo campo . Haga 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 ti. 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 delantera 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 con "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 rastrear el flujo de preguntas y respuestas del formulario.

Agregar opciones de campo

A continuación, desplácese 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 detonante para ciertas preguntas de seguimiento. Para este ejemplo, estamos usando Checkboxes como nuestro tipo de entrada. Esto significa que el usuario puede elegir tantos como desee.

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, seleccionar el menú desplegable y botones de opción para las opciones singulares que proporcione, así como el campo de correo electrónico para ingresar 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 notar aquí que no agregamos lógica condicional a este paso. Este es el desencadenante, por lo que le parece al usuario independientemente.

Agregar nuevos campos para respuestas condicionales

A continuación, sin embargo, agregaremos Lógica condicional para los nuevos Campos que agreguemos 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 campos nuevos

Tenga en cuenta que hemos utilizado una convención de nomenclatura de Condicional 1 (para indicar el primer desencadenante condicional) y luego 1a , 1b y 1c para las respuestas de seguimiento. También los hemos etiquetado apropiadamente para que podamos realizar un seguimiento de lo que son.

Como 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 la palanca para Lógica condicional . Luego, elija la Relación para esta, lo que significa que puede establecerla en cualquiera (cualquier número de respuestas puede hacer que esta opción aparezca) o en todas (solo la combinación específica de respuestas hace que aparezca este campo).

Si solo está usando una sola regla de activación como nosotros, cualquiera o todas funcionarán.

En Reglas , verá el campo que lo activa y, a la derecha, puede seleccionar qué opción lo activará. El centro es el calificador, como igual, no es igual, es menor que, es mayor que , etc. Para este campo en particular, seleccionamos la pregunta que establecemos 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 pregunta condicional única, también vamos a repetir este proceso exacto para los otros campos. Creando únicamente las respuestas correlativas apropiadas para esa selección.

Establecer 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, por lo 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 condicionales. 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 a 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á inmediatamente a las necesidades de sus usuarios.

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. 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é tipo de formas ha creado utilizando la función Lógica condicional de Divi?

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