Cómo crear formularios dinámicos con lógica condicional

Los formularios estáticos plantean las mismas preguntas a todos. Los formularios dinámicos se adaptan. Seleccione "Consulta comercial" y aparecerán los campos de la empresa. Seleccione "Otro" y se abrirá un cuadro de texto. Responda "Sí" y se mostrarán las preguntas de seguimiento. La lógica condicional transforma los cuestionarios rígidos en conversaciones inteligentes que responden a la situación de cada usuario.

En esta guía, aprenderá a crear formularios dinámicos con lógica condicional que muestran los campos correctos a las personas correctas en el momento correcto.

¿Qué hace que un formulario sea dinámico?

Forma estática

• Cada usuario ve todos los campos
• Estructura fija
• Sin adaptación
• Talla única para todos

Forma dinámica

• Los campos aparecen según las respuestas
• Se adapta al contexto del usuario
• Experiencia personalizada
• Solo se muestran preguntas relevantes

La Diferencia

ESTÁTICO: Nombre → Correo electrónico → Teléfono → Empresa → Presupuesto → Mensaje (todos ven los 6 campos) DINÁMICO: Nombre → Correo electrónico → "¿Tipo de consulta?" → SI es personal: Teléfono → Mensaje (4 campos) → SI es comercial: Empresa → Teléfono → Presupuesto → Mensaje (6 campos)

Cómo funciona la lógica condicional

La estructura básica

SI [se cumple la condición] ENTONCES [mostrar/ocultar campo(s)]

Componentes

• Campo de disparo: El campo que determina lo que sucede
• Condición: ¿Qué valor desencadena la acción?
• Acción: Mostrar u ocultar
• Campo(s) de destino: Lo que aparece o desaparece

Ejemplo

Desencadenante: "¿Es usted cliente actual?" Condición: El valor es "Sí". Acción: Mostrar. Objetivo: Campo "ID de cliente".

Creando su primer formulario dinámico

Paso 1: Planifique su lógica

Antes de construir, planifique:

• ¿Qué preguntas desencadenantes harás?
• ¿Qué campos dependen de qué respuestas?
• ¿Cuál es el valor predeterminado (oculto o mostrado)?

Paso 2: Construir el formulario base

1. Abra su formulario en AFB
2. Agregar todos los campos (tanto los que se muestran siempre como los condicionales)
3. Organizar en orden lógico

Paso 3: Identificar los campos desencadenadores

Buenos campos de activación:

• Menús desplegables con categorías claras
• Botones de opción (Sí/No, selección de tipo)
• Las casillas de verificación

Paso 4: Establecer condiciones

1. Seleccione el campo de destino (el que desea mostrar/ocultar)
2. Abrir configuración de lógica condicional
3. Seleccione el campo de activación
4. Establezca la condición (igual, contiene, etc.)
5. Define la acción (mostrar/ocultar)

Paso 5: Pruebe cada ruta

1. Vista previa del formulario
2. Pruebe cada opción de activación
3. Verifique que aparezcan los campos correctos
4. Enviar entradas de prueba
5. Comprobar que los datos se guardan correctamente

Patrones de formas dinámicas comunes

Patrón 1: Seguimiento de Sí/No

Estructura:

¿Tiene un sitio web? ○ Sí ○ No SI es así → Mostrar el campo "URL del sitio web" SI no → Mostrar el campo "¿Necesita ayuda para crear uno?"

Usar para: Preguntas de calificación con diferentes seguimientos

Patrón 2: Ramificación de categorías

Estructura:

¿Qué tipo de consulta? ○ Ventas ○ Soporte ○ Facturación ○ Otros SI Ventas → Mostrar: Presupuesto, Cronograma, Tamaño de la empresa SI Soporte → Mostrar: Número de pedido, Descripción del problema SI Facturación → Mostrar: Número de factura, Correo electrónico de la cuenta SI Otros → Mostrar: Área de texto "Describa"

Usar para: Diferentes preguntas para diferentes tipos de usuarios

Patrón 3: Especificación “Otra”

Estructura:

¿Cómo supiste de nosotros? ☐ Google ☐ Redes sociales ☐ Amigo ☐ Otro SI seleccionaste "Otro" → Mostrar el campo de texto "Por favor, especifica".

Usar para: Captura de respuestas personalizadas

Patrón 4: Divulgación progresiva

Estructura:

Información básica: Nombre, correo electrónico (siempre visible). ¿Desea proporcionar más detalles? ○ Sí ○ No. Si la respuesta es afirmativa, → Mostrar: Empresa, Teléfono, Descripción del proyecto, Presupuesto.

Usar para: Información detallada opcional

Patrón 5: Carga condicional de archivos

Estructura:

¿Tiene documentos de respaldo? ○ Sí ○ No SI es así → Mostrar: Campo de carga de archivos

Usar para: Adjuntos opcionales

Patrón 6: Cliente vs. Cliente potencial

Estructura:

¿Es usted cliente actual? ○ Sí ○ No SI es Sí → Mostrar: ID de cliente, Correo electrónico de la cuenta SI no → Mostrar: Empresa, ¿Cómo se enteró de nosotros?

Usar para: Diferentes flujos para existentes y nuevos

Construcción de un formulario dinámico completo: ejemplo

Formulario de consulta de servicio

Campos siempre visibles:

• Nombre (requerido)
• Correo electrónico (obligatorio)
• Interés de servicio (desplegable – disparador)

Opciones de interés de servicio:

• Diseño Web
• SEO
• Marketing
• Consultoría
• Otra

Campos condicionales:

Diseño Web IF:

• URL actual del sitio web
• Número de páginas necesarias
• Preferencias de diseño (menú desplegable)

SI SEO:

• URL actual del sitio web
• Palabras clave de destino (área de texto)
• Rango de presupuesto mensual

Marketing SI:

• Canales de marketing (casillas de verificación)
• Público objetivo
• Rango de presupuesto mensual

Consultoría IF:

• Tema de consultoría
• Hora de reunión preferida

SI Otro:

• Por favor describa (área de texto)

Siempre visible (después del condicional):

• Notas adicionales (opcional)
• Botón de enviar

Resultado

• Los visitantes de Diseño Web ven 6 campos
• Los visitantes de SEO ven 6 campos
• Los visitantes de marketing ven 6 campos
• Los visitantes que consultan ven 5 campos
• Otros visitantes ven 4 campos

Tipos de condición

Equivale

SI [Campo] es igual a "Valor"

Se requiere coincidencia exacta.

No es igual

SI [Campo] no es igual a "Valor"

Cualquier cosa excepto ese valor.

Contiene

SI [Campo] contiene "texto"

El valor incluye el texto en alguna parte.

Esta vacio

SI [Campo] está vacío

No se ha introducido ningún valor.

No está vacío

SI [Campo] no está vacío

Cualquier valor introducido.

Mayor que / Menor que

SI [Campo de número] es mayor que 100 SI [Campo de número] es menor que 50

Comparaciones numéricas.

Varias condiciones

Y lógica

Mostrar campo SI: Servicio = "Empresa" Y Presupuesto > 10000 Y Cronograma = "Este Trimestre"

TODAS las condiciones deben ser verdaderas.

O Lógica

Mostrar campo SI: Servicio = "Diseño Web" O Servicio = "SEO" O Servicio = "Marketing"

Cualquier condición que sea verdadera es suficiente.

Combinación Y/O

Mostrar campo SI: (Servicio = "Diseño Web" O Servicio = "SEO") Y Presupuesto > 5000

Mezcla para lógica compleja.

Mejores prácticas para formularios dinámicos

1. Empiece de forma sencilla

• Comience con una o dos condiciones
• Añade complejidad gradualmente
• Pruebe cada adición

2. Mantenga la lógica clara

• Utilice preguntas desencadenantes obvias
• Evite dependencias confusas
• Documenta tu lógica

3. Colocar campos de forma lógica

• Los campos condicionales aparecen después del disparador
• Mantener el flujo natural
• Campos relacionados con el grupo

4. Manejar campos obligatorios

• Los campos ocultos no deberían ser obligatorios
• Hacer obligatorio solo cuando sea visible
• Envío de prueba con campos obligatorios ocultos

5. Proporcionar retroalimentación visual

• Animaciones suaves para los campos que aparecen
• Transiciones claras
• Sin cambios bruscos

6. Pruebe todas las rutas

• Cada opción de activación
• Cada combinación si se utiliza AND/OR
• Móvil y de escritorio
• Diferentes navegadores

Ejemplos de formas dinámicas del mundo real

Ejemplo 1: Registro de eventos

Trigger: Tipo de asistencia

• En persona → Mostrar: Restricciones dietéticas, Talla de camiseta, Contacto de emergencia
• Virtual → Mostrar: Zona horaria, preferencia de plataforma
• Híbrido → Mostrar: Todo lo anterior

Ejemplo 2: Solicitud de empleo

Trigger: Tipo de Posición

• Tiempo completo → Mostrar: Expectativas salariales, Fecha de inicio
• Tiempo parcial → Mostrar: Horas disponibles, Preferencias de horario
• Contrato → Mostrar: Tarifa por hora, Duración del proyecto

Ejemplo 3: Ticket de soporte

Trigger: Categoría de problema

• Técnico → Mostrar: Navegador, SO, Mensaje de error, Carga de captura de pantalla
• Facturación → Mostrar: Número de pedido, Número de factura
• Cuenta → Mostrar: Nombre de usuario, Correo electrónico de la cuenta
• Solicitud de función → Mostrar: Descripción de la función, Caso de uso

Ejemplo 4: Solicitud de cotización

Trigger: Tipología de proyecto

• Nuevo sitio web → Mostrar: Industria, Cantidad de páginas, Funciones necesarias
• Rediseño → Mostrar: URL actual, Qué conservar, Qué cambiar
• Mantenimiento → Mostrar: URL actual, Tareas necesarias, Frecuencia

Ejemplo 5: Formulario de comentarios

Trigger: Índice de satisfacción

• 1-3 (Bajo) → Mostrar: área de texto "¿Qué salió mal?"
• 4-5 (Alto) → Mostrar: área de texto "¿Qué hicimos bien?"

Solución de problemas de formularios dinámicos

Campo no mostrado

• La condición de comprobación está configurada correctamente
• Verificar que el valor del campo de activación coincida exactamente
• Comprobar errores tipográficos en los valores de condición
• Confirmar que la acción sea “Mostrar” y no “Ocultar”

Campo que no se esconde

• Verificar estado predeterminado (debería iniciar oculto)
• Comprobar la lógica de la condición
• Borrar caché del navegador

Envío de bloqueo de campos obligatorios

• Los campos ocultos no deberían ser obligatorios
• Establecer requerido solo cuando sea visible
• Comprobar la configuración condicional requerida

La lógica no funciona en el móvil

• Prueba en el dispositivo real
• Comprobar errores de JavaScript
• Verificar el comportamiento responsivo

Los datos no se guardan correctamente

• Verificar el manejo de datos de campos ocultos
• Comprobar si se deben borrar los valores ocultos
• Envío de pruebas para cada ruta

Técnicas avanzadas de formas dinámicas

Condiciones encadenadas

El campo A activa el campo B, que activa el campo C:

Tipo de servicio → SI "Empresa" → Mostrar: Tamaño de la empresa → SI "1000+" → Mostrar: Casilla de verificación de administrador de cuenta dedicado

Secciones condicionales

Mostrar/ocultar grupos de campos juntos:

SI "Envío necesario" = Sí → Mostrar la sección completa de Dirección de envío (5 campos)

Enrutamiento de correo electrónico condicional

Diferentes destinatarios según selecciones:

SI Departamento = "Ventas" → Enviar correo electrónico a [email protected]
Departamento IF = "Soporte" → Enviar correo electrónico a [email protected]

Mensajes de confirmación condicional

Diferentes mensajes de agradecimiento:

SI el tipo de consulta es "Ventas" → Mostrar: "Nuestro equipo de ventas se pondrá en contacto con usted en 24 horas". SI el tipo de consulta es "Soporte" → Mostrar: "Ticket creado. Consulte el número de ticket en su correo electrónico".

Preguntas frecuentes

¿Cuántas condiciones puedo tener?

Técnicamente es ilimitado, pero mantenlo manejable. De 5 a 10 condiciones bien planificadas funcionan bien. Más de 15 a 20 condiciones suelen indicar que el formulario debe dividirse.

¿Los campos ocultos aún envían datos?

Depende de la implementación. Normalmente, los campos ocultos no se envían (datos más limpios). Algunos sistemas envían valores vacíos. Pruebe su configuración específica.

¿Puedo utilizar condiciones en el botón de envío?

En general, mantenga el botón de envío siempre visible. Ocultarlo confunde a los usuarios. Use campos obligatorios condicionales para controlar el flujo.

¿La lógica condicional ralentizará mi formulario?

Las implementaciones modernas tienen un impacto mínimo en el rendimiento. Solo una lógica extremadamente compleja con muchos campos podría causar ligeros retrasos.

¿Puedo realizar la prueba sin enviarla?

Utilice el modo de vista previa para comprobar la visibilidad. Para realizar pruebas completas, incluido el envío de datos, utilice envíos de prueba que pueda eliminar.

Resumen

Creación de formularios dinámicos con lógica condicional:

1. Planifica tu lógica – Disparadores, condiciones y objetivos del mapa
2. Construir formulario base – Todos los campos, debidamente ordenados
3. Agregar campos de activación – Menús desplegables, botones de opción, casillas de verificación
4. Establecer condiciones – Vincular activadores a campos de destino
5. Configurar mostrar/ocultar – Define qué aparece cuando
6. Requisitos de manejo – Obligatorio solo cuando sea visible
7. Prueba a fondo – Cada camino, cada dispositivo

Conclusión

Los formularios dinámicos con lógica condicional crean experiencias personalizadas que los formularios estáticos no pueden igualar. Los usuarios solo ven las preguntas relevantes, los formularios parecen más breves y se recopilan mejores datos. Empiece con condiciones sencillas (seguimientos de Sí/No y ramificación de categorías) y luego aumente la complejidad según sea necesario. La clave es hacer que la lógica sea invisible para los usuarios y, al mismo tiempo, ofrecer los campos exactos para su situación.

Generador de formularios automáticos El complemento de Lógica Condicional simplifica la creación de formularios dinámicos. Configure reglas para mostrar/ocultar con una interfaz visual, use la lógica AND/OR para condiciones complejas y cree formularios que se adapten a cada usuario.

¿Listo para crear formularios dinámicos? Descargar Auto Form Builder y comenzar a crear formularios que respondan de forma inteligente a la entrada del usuario.