Formularios de varios pasos y comportamiento de envío
Usa pasos cuando un formulario sea demasiado largo o conceptualmente complejo para una sola pantalla. Un buen formulario de varios pasos agrupa preguntas relacionadas, comunica el progreso y permite a los visitantes entender qué ocurrirá después del envío.
No dividas un formulario corto solo para que parezca interactivo. Cada paso debe tener un propósito claro.
Planifica los pasos
Escribe el esquema de los pasos antes de mover los campos. Para un formulario de solicitud, una estructura útil podría ser:
- Datos de contacto
- Información del proyecto
- Archivos
- Revisión y consentimiento
Coloca primero las preguntas sencillas y de bajo riesgo. Sitúa las preguntas delicadas o exigentes solo donde sean necesarias y explica por qué se solicitan.
Añade y organiza los pasos
- Abre el formulario en Forms → All Forms.
- Abre Builder.
- Añade un paso.
- Introduce su etiqueta visible y, cuando sea útil, una breve descripción.
- Mueve o añade filas dentro del paso.
- Repite hasta que cada campo pertenezca a la etapa correcta.
- Reordena los pasos y comprueba el orden de lectura en móvil.
- Guarda el formulario.
Configura la navegación entre pasos
Abre Messages/Behavior → Design options y elige cómo debe presentarse el progreso:
- Show stepper above the form
- Show dots below the form
- Show current step text
Revisa Previous button, Next button y Submit button. Prefiere acciones claras:
- Continue para avanzar;
- Back para volver;
- Submit application para la acción final.
No etiquetes un botón intermedio como «Submit» si todavía no se envía ningún dato.
Validación entre pasos
La validación de campos obligatorios y específica debe impedir que un visitante abandone un paso hasta que sus campos visibles sean válidos. Prueba:
- avanzar con campos obligatorios vacíos;
- corregir un error y continuar;
- retroceder sin perder los valores;
- los campos condicionales que aparecen tras una respuesta anterior;
- el envío final con cada rama.
Si existe un campo condicional en un paso posterior, prueba cada ruta que pueda mostrarlo u ocultarlo.
Elige el comportamiento de éxito
El formulario puede mostrar un mensaje de éxito o usar una acción configurada posterior al envío. Selecciona el comportamiento más sencillo que cumpla el objetivo.
Mostrar un mensaje
Usa un mensaje de éxito cuando el visitante deba permanecer en la misma página. Incluye:
- la confirmación de que se recibió el envío;
- el tiempo de respuesta previsto o el siguiente paso;
- un enlace solo cuando sea realmente útil.
Redirigir
Usa una redirección cuando el visitante necesite una página de confirmación independiente, una descarga, un área de cuenta o un flujo de trabajo de la siguiente etapa. Usa una URL completa y de confianza, y pruébala sin haber iniciado sesión.
URL de acción del formulario
Usa Form Action URL (GET) o Form Action URL (POST) solo cuando el destino gestione el envío. Estos modos omiten el almacenamiento de POM, las notificaciones, la pestaña Webhook, las subidas a Google Drive y la creación de publicaciones. No son ajustes de redirección.
Evita envíos repetidos accidentales
Los ajustes de comportamiento pueden desactivar el formulario después de un envío correcto y mostrar un indicador de carga. Estas opciones ayudan a los visitantes a entender que su acción se está procesando.
Considera también:
- activar reCAPTCHA para formularios públicos o propensos a abusos;
- mantener visible la etiqueta de envío durante la carga;
- desplazarse hasta el mensaje de éxito cuando se complete un formulario largo;
- evitar scripts personalizados que envíen el mismo formulario dos veces.
Estilizar un formulario de varios pasos
Elige el estilo de formulario estándar o alternativo y mantén las señales visuales coherentes con el resto del sitio. Comprueba:
- el contraste del progreso;
- los estados de paso activo y completado;
- el orden de los botones;
- las etiquetas de paso largas;
- el ajuste en móvil;
- el enfoque del teclado después de que cambie un paso.
Comprobaciones antes de publicar
- [ ] Cada paso tiene un propósito comprensible.
- [ ] Las etiquetas de los pasos son cortas y significativas.
- [ ] Retroceder y continuar conservan los valores introducidos.
- [ ] La validación enfoca o identifica el campo que necesita atención.
- [ ] Las ramas condicionales funcionan entre pasos.
- [ ] El botón final describe claramente el envío.
- [ ] El mensaje de éxito o la redirección funcionan sin haber iniciado sesión.
- [ ] El formulario sigue siendo utilizable en una pantalla móvil estrecha.