Crea un formulario de varios pasos

Usa varios pasos cuando las preguntas formen etapas distintas y una sola pantalla resultaría difícil de entender. Esta guía se centra en construir y probar el diseño; las opciones de presentación y posteriores al envío se tratan por separado.

Planifica las etapas

Dale un único propósito a cada etapa. Para una solicitud:

1. Datos de contacto
2. Detalles de la solicitud
3. Archivos de apoyo
4. Revisión y consentimiento

Mantén el paso final lo bastante breve para que el visitante pueda entender el compromiso antes de enviar.

Añade y organiza los pasos

1. Abre la pestaña Builder del formulario.
2. En Form Structure, elige Add Step.
3. Edita su Step label y la descripción opcional.
4. Elige Add Row.
5. Añade columnas manualmente o usa Add preset columns.
6. Selecciona una columna y añade campos desde Fields.
7. Repite el proceso para cada etapa.
8. Arrastra los tiradores para reordenar los pasos o su contenido.
9. Guarda el formulario.

Cada columna ofrece Desktop width, Tablet landscape width, Tablet portrait width y Mobile width. Usa anchos heredados solo cuando la pila resultante siga siendo clara.

Configura la navegación

Abre Messages/Behavior → Design options:

• Show stepper above the form muestra etiquetas numeradas.
• Show dots below the form muestra un punto por paso.
• Show current step text muestra el progreso, como 1 / N.
• Previous button, Next button y Submit button controlan el estilo, el tamaño, la anchura y el icono.
• El Submit button final también tiene su propia etiqueta.

Usa “Continuar” para el progreso intermedio y una etiqueta final específica como “Enviar solicitud”.

Comprueba la validación de los pasos

Prueba lo siguiente:

1. Continúa con un campo obligatorio visible vacío.
2. Corrige el error y avanza.
3. Retrocede y confirma que los valores se mantienen.
4. Activa campos condicionales en pasos posteriores.
5. Oculta una rama condicional completada anteriormente.
6. Completa el envío final.
7. Repite en anchura móvil con navegación por teclado.

Los campos obligatorios visibles deberían impedir salir de su paso; los valores ocultos inactivos no deberían entregarse.

Para el diseño del progreso, las redirecciones y la prevención de duplicados, consulta Formularios de varios pasos y comportamiento de envío.