Cómo añadir lógica condicional a un formulario de Webflow sin código
Has creado una página de destino muy cuidada en Webflow, has conectado el formulario y, de repente, alguien del equipo de marketing te pide un cambio lógico: que la pregunta sobre el tamaño de la empresa solo aparezca cuando alguien seleccione «Empresa», o que se descarten los visitantes que elijan un tipo de proyecto no admitido. El diseño tiene un aspecto impecable, pero el generador de formularios no te ofrece un control de ramificación claro.
Ahí es donde la lógica condicional de los formularios de Webflow deja de ser solo una cuestión de activar o desactivar una opción y pasa a ser más bien una cuestión de elegir la implementación adecuada. Puedes crear una solución sencilla con atributos, CSS y JavaScript, o integrar un generador de formularios específico cuando el flujo requiera procesos de calificación y descalificación en varios pasos, además de una atribución fiable. Lo difícil no es solo hacer que aparezcan los campos, sino asegurarte de que las respuestas ocultas, los valores UTM, los estados de validación y las transferencias al CRM se mantengan en cada rama.
Si tu formulario también necesita una estrategia de calificación estructurada, una guía moderna de calificación de oportunidades de venta puede ayudarte a decidir qué preguntas deben incluirse en el flujo antes de empezar a configurar las interacciones.
Table of Contents
Índice
- Introducción a la lógica condicional de los formularios de Webflow
- Comprender las limitaciones y los requisitos previos de la lógica nativa
- Implementación de patrones de código personalizados
- Incorporación de Growform para crear formularios condicionales avanzados
- Conservación de los UTM y los datos de seguimiento
- Buenas prácticas y resolución de problemas
- Conclusión y próximos pasos
Introducción a la lógica condicional de los formularios de Webflow
Una solicitud típica parece sencilla: un visitante elige «Estoy comprando para mi empresa» y el formulario le pide el tamaño de la empresa, el cargo y el plazo previsto. Si alguien elige «Proyecto personal», debería aparecer un proceso más corto. En una página de captación de clientes potenciales, esas preguntas también pueden determinar si el visitante llega siquiera a la fase de contacto.
Webflow te ofrece un gran control sobre el diseño y el estilo, pero la ramificación nativa de los formularios siempre ha requerido soluciones alternativas. Esto te deja tres opciones prácticas:
- Solución nativa: Usa los campos de Webflow, los atributos personalizados, CSS y JavaScript para controlar la visibilidad.
- Implementación personalizada: crea un flujo de varios pasos más complejo con transiciones y validaciones explícitas.
- Capa de formulario integrada: usa un generador específico para las ramificaciones, los criterios de selección y la gestión de campos ocultos, y luego incrústalo en Webflow.
Cualquiera de las opciones puede funcionar. Se diferencian en cuanto al mantenimiento, el esfuerzo que supone realizar pruebas, la fiabilidad de los análisis y la cantidad de lógica que tu equipo puede gestionar sin necesidad de un desarrollador.
La diferencia clave está entre la visibilidad condicional y el comportamiento condicional del formulario. Ocultar un campo es solo la capa de interfaz. Un formulario de producción también debe decidir si el campo oculto sigue habilitado, si se envía su valor, si la validación sigue siendo válida y si los datos de atribución llegan al CRM. Por eso, un formulario que parece correcto en el Diseñador puede seguir generando envíos incompletos o engañosos tras su publicación.
Comprender las limitaciones y los requisitos previos de la lógica nativa
El historial de la comunidad de Webflow explica por qué sigue surgiendo este problema. En 2019, un miembro del equipo de Webflow y la comunidad respondieron que el comportamiento condicional nativo «no era realmente posible de forma nativa», por lo que los usuarios tenían que recurrir a soluciones alternativas o herramientas externas. El 30 de julio de 2020, las recomendaciones de la comunidad describían patrones prácticos que usaban un menú desplegable o un campo numérico para mostrar campos repetidos, como mostrar «Nombre del hijo 2» solo cuando la respuesta fuera dos o más. La evolución está documentada en el hilo de la comunidad de Webflow sobre la creación de formularios.
Más tarde, Webflow introdujo una función de lógica condicional a nivel de plataforma. Según su comunicado oficial, esta función se lanzó el 5 de marzo de 2026 y admite variantes, texto, atributos, imágenes y vídeo. Esa actualización se refiere a la presentación del contenido, no a la ramificación de formularios tal y como está documentada, así que no deberías considerarla un sustituto nativo de las rutas de calificación dentro de un formulario. La distinción queda clara en la actualización sobre contenido condicional de Webflow.
Prepara el proyecto antes de compilarlo
Tanto si usas código personalizado como una capa de formulario integrada, lo primero es establecer una estructura predecible:
- Nombra cada campo con claridad: usa nombres fijos como
lead_type,company_sizeyproject_timeline. - Añade identificadores de activación: asigna a cada menú desplegable, grupo de botones de opción o casilla de verificación un atributo o un ID personalizado.
- Campos agrupados: Envuelve los campos relacionados en un elemento principal para que una sola regla pueda controlar todo el grupo.
- Ocultar inicialmente los grupos dependientes: la página debe estar en un estado válido antes de que se ejecute el script.
- Decide cómo se comportan los valores ocultos: borra los valores obsoletos o desactiva los campos ocultos cuando un visitante cambie de dirección.
- Publica antes de probar: las vistas previas del diseñador no reproducen el entorno de ejecución real de forma fiable.
Si necesitas crear un formulario que requiera una configuración avanzada sin tener que desarrollar tú mismo la capa lógica, la documentación del generador de formularios de Webflow es un punto de referencia muy útil para el método de incrustación.
La configuración técnica mínima es bastante sencilla. Necesitarás los elementos de formulario de Webflow, atributos o ID personalizados, CSS para el estado oculto inicial y, o bien JavaScript puro, o bien un script del proyecto ya existente. jQuery puede funcionar si ya forma parte del proyecto, pero un pequeño script en JavaScript puro suele generar menos dependencias.
Implementación de patrones de código personalizados
Una configuración personalizada fiable empieza por el marcado, no por el script. Crea un campo de activación y coloca cada grupo dependiente dentro de su propio contenedor. Por ejemplo, un grupo de botones de radio podría usar los valores business, personal y agency, mientras que los grupos dependientes usarían identificadores como business-fields y agency-fields.
Empieza con un estado oculto en el CSS de la página:
[data-conditional-group] {
display: none;
}
[data-conditional-group].is-visible {
display: block;
}
En Webflow, añade el atributo « data-conditional-group » a cada contenedor dependiente. Asigna a los botones de radio de activación un nombre común, como « lead_type », y asigna valores que describan la rama. El nombre común es importante porque el navegador trata los botones de radio como un único conjunto de opciones.
Asigna el desencadenador a los grupos de destino
El script que aparece a continuación lee el valor del botón de opción seleccionado, oculta todos los grupos condicionales y, a continuación, muestra el grupo correspondiente. Además, desactiva los campos ocultos, lo que evita que los visitantes envíen valores obsoletos de una rama que hubieran seleccionado anteriormente.
<script>
document.addEventListener("DOMContentLoaded", function () {
const triggers = document.querySelectorAll('input[name="lead_type"]');
const groups = document.querySelectorAll("[data-conditional-group]");
function updateConditionalFields() {
const selected = document.querySelector(
'input[name="lead_type"]:checked'
)?.value;
groups.forEach(function (group) {
const shouldShow = group.dataset.conditionalGroup === selected;
group.classList.toggle("is-visible", shouldShow);
group.querySelectorAll("input, select, textarea").forEach(function (field) {
field.disabled = !shouldShow;
});
});
}
triggers.forEach(function (trigger) {
trigger.addEventListener("change", updateConditionalFields);
});
updateConditionalFields();
});
</script>
El valor de « data-conditional-group » debe coincidir exactamente con el valor del botón de opción. Aparece un grupo con « data-conditional-group="business" » cuando el visitante selecciona el botón de opción cuyo valor es « business ».
Regla práctica: oculta los campos dependientes por defecto y, a continuación, prueba la página publicada. Las recomendaciones de la comunidad señalan que el uso de atributos personalizados, JavaScript y las pruebas en la página en vivo es la práctica habitual, ya que el script se ejecuta en el sitio publicado, no solo dentro del Designer. Echa un vistazo al debate sobre los formularios condicionales de Webflow.
No añadas la supresión de rebotes automáticamente. Un controlador de cambio de radio suele ejecutarse una vez por selección, por lo que la supresión de rebotes puede hacer que la interfaz parezca más lenta. Resulta útil cuando el evento desencadena operaciones más pesadas, como la validación remota, la búsqueda de direcciones o varias transiciones visuales. Haz que la primera implementación sea sencilla y que el cambio de estado sea inmediato.
Conecta la validación y el envío
Los campos ocultos determinan la validación. Si un campo obligatorio sigue activo mientras su grupo está oculto, el navegador puede bloquear el envío aunque el visitante nunca haya visto ese campo. Desactivar los campos ocultos, como se hace en el ejemplo, evita ese desajuste. Cuando un grupo vuelve a estar visible, sus campos se reactivan y se reanuda la validación normal.
En los formularios de varios pasos, trata cada ramificación como una ruta explícita. No des por hecho que Webflow deducirá el siguiente destino a partir de la respuesta seleccionada. La lógica de transición debe definir adónde va el visitante después de cada elección, y el controlador de envío final solo debe recoger los campos activos.
Si el envío alimenta a otro sistema, asigna nombres de campos fijos en lugar de basarte en etiquetas visuales. Un flujo de trabajo de webhooks es más fácil de mantener cuando el servicio receptor recibe claves coherentes, y la documentación sobre webhooks puede ayudarte a decidir qué debe contener la carga útil posterior.
Una secuencia de pruebas útil es:
- Selecciona cada opción de radio y comprueba que solo aparezca el grupo que quieres.
- Introduce un valor, cambia de rama y comprueba que el valor anterior no se envía.
- Vuelve a la rama original y comprueba que los campos funcionan bien.
- Envía el formulario dejando todos los campos obligatorios en blanco para comprobar la validación.
- Prueba el flujo completo en la página publicada y en un dispositivo móvil.
También puedes usar este vídeo como referencia visual para el patrón de implementación:
El código personalizado es una buena opción cuando la lógica es corta, el equipo se encarga del script y el destino al que se envía el formulario ya está definido. Se vuelve frágil cuando el departamento de marketing necesita cambios frecuentes, cuando las ramificaciones abarcan varios pasos o cuando el seguimiento y la entrega al CRM son más importantes que mantener el formulario totalmente nativo.
Incorporación de Growform para crear formularios condicionales avanzados
Un generador integrado puede eliminar gran parte de la gestión del estado del proyecto de Webflow, pero a cambio tienes que lidiar con un sistema aparte que hay que configurar, personalizar y supervisar. Compara los requisitos antes de elegir una herramienta.
Comparativa de creadores de formularios para incrustar
| Herramienta | En varios pasos | Lógica condicional | Reenvío de UTM | Estilo personalizado |
|---|---|---|---|---|
| Growform | Sí | Flujos avanzados de ramificación y calificación | Transmisión de campos ocultos | Controles de imagen de marca y estilo |
| Typeform | Sí | Rutas de preguntas basadas en la lógica | Depende de la configuración y la integración | Amplias opciones de personalización visual |
| Jotform | Sí | Visibilidad condicional y enrutamiento | Depende de los campos ocultos y de la integración | Amplias opciones de personalización |
La elección correcta depende del proceso de traspaso, no solo del formulario en sí. Un formulario de contacto sencillo puede seguir siendo nativo. En cambio, un embudo tipo cuestionario con criterios de admisión, exclusión y datos de origen necesita un sistema que tenga en cuenta esos requisitos como parte del modelo de envío.
Growform admite formularios de captación de clientes potenciales de varios pasos, saltos lógicos, preguntas condicionales y rutas de descalificación. Su implementación en Webflow utiliza un fragmento de código incrustado, por lo que la página de Webflow proporciona el diseño general, mientras que el generador de formularios gestiona el flujo interactivo. Esa separación puede reducir la cantidad de código JavaScript personalizado que tienes que mantener en el proyecto del sitio web.
Configura el flujo antes de aplicarle el estilo
Empieza por elegir una plantilla de formulario que se ajuste lo más posible al objetivo de la campaña. Un flujo de calificación suele necesitar una pregunta inicial, unas pocas decisiones de enrutamiento, datos de contacto y un estado de finalización claro. Define el mapa de ramificaciones antes de ajustar los colores o la tipografía.
Para cada respuesta, indica cuál es el siguiente paso o si se descarta al visitante. Si un visitante elige un servicio que no está disponible, el flujo debería terminar con un mensaje claro, en lugar de llegar a un paso en blanco o al que no se pueda acceder. Si la respuesta cumple los requisitos, dirígelo a la siguiente pregunta relevante, en lugar de mostrar todos los campos a todo el mundo.
A continuación, configura el paso de campos ocultos. Añade las claves de atribución que usan tus campañas, incluidos los parámetros UTM y los ID de clic, y comprueba que el envío final las incluya. En este contexto, un generador integrado puede resultar más práctico que una serie de trucos con los campos de Webflow, siempre que la integración se haya probado con parámetros de consulta reales.
El diseño sigue siendo importante. Adapta la tipografía, el espaciado, el aspecto de los botones, los estados de selección y la presentación de los errores del formulario a la página de Webflow. Revisa el diseño para móviles por separado, ya que un formulario de varios pasos puede parecer bien alineado en el ordenador, pero provocar un desplazamiento incómodo o zonas de toque poco prácticas en una pantalla estrecha.
Por último, copia el fragmento de código de incrustación generado y pégalo en un elemento «Embed» de Webflow. Publica la página, envía entradas de prueba a través de cada rama e inspecciona la carga útil del CRM o del webhook receptor. Si quieres ver un tutorial detallado de la instalación, echa un vistazo a la guía sobre cómo añadir un formulario de varios pasos de Growform a Webflow.
La ruta integrada es útil cuando los profesionales del marketing necesitan gestionar los cambios en la lógica sin tener que volver a abrir el código de la web. El coste es tener que lidiar con otra interfaz, otro punto de integración y la necesidad de mantener el sistema de diseño del formulario sincronizado con Webflow.
Conservación de los UTM y los datos de seguimiento
Un formulario condicional puede procesarse correctamente y, aun así, afectar a los informes de la campaña. El error más habitual se produce cuando los valores UTM se introducen en la página de destino, pero el paso siguiente del formulario o la capa incrustada no los transfieren a la carga útil final. Las recomendaciones de la comunidad advierten específicamente de que las incrustaciones pueden aislar los campos ocultos, por lo que la atribución puede requerir un paso explícito en lugar de dar por hecho que los valores se mantendrán automáticamente. El problema está documentado en esta guía sobre la lógica condicional en los formularios de Webflow.
Recoge los valores en cuanto se cargue la página
Añade campos de entrada ocultos con los nombres « utm_source », « utm_medium », « gclid » y « fbclid ». A continuación, lee la cadena de consulta al instante y guarda los valores mientras el visitante permanezca en la página.
<script>
document.addEventListener("DOMContentLoaded", function () {
const keys = ["utm_source", "utm_medium", "gclid", "fbclid"];
const params = new URLSearchParams(window.location.search);
keys.forEach(function (key) {
const value = params.get(key);
if (value) {
sessionStorage.setItem(key, value);
}
const storedValue = sessionStorage.getItem(key);
const field = document.querySelector(`[name="${key}"]`);
if (field && storedValue) {
field.value = storedValue;
}
});
});
</script>
Ejecuta el paso de población cada vez que se genere un nuevo paso de formulario. Si la herramienta incrustada ofrece una interfaz de asignación de campos ocultos, asigna cada valor almacenado al campo correspondiente en lugar de recurrir al acceso al DOM más allá del límite de la incrustación.
Mantén la atribución separada de las respuestas de las ramas. El servicio o el resultado de la cualificación que haya seleccionado el visitante describe el cliente potencial, mientras que los campos UTM y click-ID describen la adquisición. Ambos deben incluirse en el envío final.
Para conocer las convenciones de nomenclatura y las prácticas recomendadas en materia de gestión de campañas, consulta estas recomendaciones para el seguimiento UTM. Para configurar los campos ocultos específicos de Growform, utiliza los campos ocultos de Growform.
Antes del lanzamiento, revisa un envío real en el sistema receptor. Comprueba que los valores de origen sigan ahí después de un cambio de rama, una transición de varios pasos y el envío final. Si desaparece algún valor, el problema suele estar en el ámbito del campo, el aislamiento de los elementos incrustados o la falta de una asignación en la carga útil final.
Buenas prácticas y resolución de problemas
Los errores más graves en los formularios condicionales no son visuales. Un campo puede aparecer correctamente aunque su valor se envíe de todos modos, la validación puede aplicarse a un campo de entrada invisible o una rama puede llevar a un paso sin una transición definida. Trata el flujo como una máquina de estados, no como un conjunto de efectos visuales.
Los tutoriales sobre formularios avanzados de Webflow advierten de que cada ruta de varios pasos debe estar conectada de principio a fin. Una rama sin conectar puede crear un callejón sin salida, y el autocompletado en el móvil o la navegación con un solo pulgar pueden poner de manifiesto problemas con el estado de los campos ocultos que se pasan por alto en las pruebas en ordenador. Las instrucciones de implementación están disponibles en el tutorial sobre formularios avanzados de Webflow.
Usa un plan de pruebas basado en rutas
Prueba el formulario como una matriz de decisiones:
- Cobertura de ramificaciones: Selecciona todos los valores de activación y confirma el siguiente paso previsto.
- Restablecimiento de estado: Introduce los datos, cambia la dirección y confirma que los valores de las ramas abandonadas se borran o se desactivan.
- Validación: Envía el formulario con los campos obligatorios visibles vacíos y, a continuación, repite el proceso con los campos ocultos previamente rellenados.
- Comportamiento en dispositivos móviles: comprueba el foco del teclado, el autocompletado, el desplazamiento, la navegación hacia atrás y los objetivos de toque en un móvil real.
- Integridad de la carga útil: Revisa la solicitud final o el registro de recepción para comprobar los nombres de los campos, las respuestas activas y los valores de atribución.
Las herramientas de desarrollo del navegador te ayudan a localizar los fallos. Fíjate en la consola para ver si hay errores en los scripts, comprueba si los campos ocultos están desactivados y revisa sus valores justo antes de enviarlos. Si hay un formulario incrustado, comprueba los valores dentro del propio formulario incrustado y no solo en el documento principal de Webflow.
La accesibilidad merece la misma atención. No ocultes visualmente un grupo si luego los usuarios que usan el teclado pueden acceder a sus controles con la tecla Tab. Usa el estado «oculto» real, gestiona el foco cuando aparezca un nuevo paso y haz que los mensajes de descalificación sean comprensibles sin depender únicamente del color.
Intenta que el script sea sencillo y claro. Es más fácil auditar un pequeño conjunto de desencadenantes con nombre y grupos de destino que un motor de reglas generalizado que nadie del equipo de marketing entiende. Cuando la lógica cambie con frecuencia, traslada las reglas de ramificación a una herramienta de formularios específica, en lugar de ampliar un script para todo el sitio hasta que se convierta en una segunda aplicación.
Conclusión y próximos pasos
Hay tres formas sensatas de gestionar la lógica condicional de los formularios de Webflow. Usa una solución nativa para una regla de visibilidad sencilla, código personalizado para un flujo controlado que tu equipo pueda mantener, o un generador de formularios integrado para campañas de varios pasos con criterios de selección, exclusión y atribución complejos. En todos los casos, prueba la página en vivo, conecta cada rama, desactiva los campos irrelevantes y comprueba los datos finales en lugar de limitarte a evaluar solo la interfaz.
Empieza por identificar las preguntas y los resultados, y luego elige la implementación más sencilla que permita mantener tanto la calidad de los clientes potenciales como los datos de seguimiento.
Growform ofrece formularios de varios pasos sin necesidad de programar, con preguntas condicionales, rutas de calificación, lógica de descalificación y transferencia de campos ocultos para flujos de clientes potenciales integrados. Si quieres crear y probar un formulario de Webflow basado en lógica sin tener que encargarte tú mismo del script de ramificación, échale un vistazo a Growform.