Saltar al contenido
FormFlow

Convierte un formulario largo en Pasos sin cambiar el endpoint

Los Pasos dividen un formulario largo en pantallas sin tocar el endpoint: un solo POST sigue llevando todos los campos, la ruptura viaja con el campo inferior y el formulario vuelve a una página.

Esta publicación se tradujo automáticamente. Lee el original en inglés

A dark FormFlow plate showing a multi-step Form folding into one flat Form and one POST.

Un formulario largo es una página de preguntas, y la página única es donde la gente se va. Los Pasos la dividen en pantallas. Lo que no hacen es cambiar el endpoint: el formulario sigue enviándose una vez, con todos los campos, a la URL que tu marcado ya nombra.

Un Paso es una decisión de presentación

Un Paso es un grupo con nombre de los campos de un formulario que se muestra a quien lo rellena una pantalla cada vez. Nada de la ingesta, la cuota, la puntuación de spam o la retención cambia cuando un formulario se divide en varios: el juez recibe el mismo cuerpo que recibía antes, y un Envío sigue siendo un Envío contado.

Ese es todo el contrato, y por eso añadir un Paso es un cambio de presentación y no de tu integración. La URL de tu HTML, los nombres de campo de tu marcado y el recuento de Envíos de tu plan se quedan donde estaban. Los Pasos están disponibles en los planes de pago.

La ruptura pertenece al campo que va debajo

En el constructor, la ruptura de Paso es una marca en el campo que abre el Paso siguiente — lo mismo que una regla dibujada encima de ese campo. Viaja con el campo, así que arrastrar el campo mueve la ruptura con él. Una ruptura de Paso no es un separador que sueltas entre preguntas; es una propiedad de un campo, y leer la lista de campos desde arriba es leer el orden de los Pasos.

Se siguen dos consecuencias. Reordenar campos reordena Pasos, así que un Paso que te gustaba puede quedar absorbido por el de arriba. Y un Paso vacío se cierra: FormFlow no guarda una pantalla sin nada.

Un solo POST lleva todos los campos

El formulario dibuja un Paso cada vez, pero el navegador sigue enviando una sola petición. Todo lo que respondió el remitente llega junto, con las claves de los nombres de campo del esquema del formulario. La referencia del endpoint está en /docs/api: un POST, un cuerpo, una respuesta.

curl -X POST https://formflow.digital/api/v1/f/ff_live_example \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Lena Ortiz",
    "email": "lena@example.com",
    "company": "Ortiz Studio",
    "budget": "5000",
    "brief": "A one-page site, live in June."
  }'

Cinco campos, tres Pasos, una petición. No hay Envío parcial que conciliar entre pantallas, ni segunda petición que reintentar, ni recibo por Paso. Si la petición falla, falló el intento; si sale bien, FormFlow guarda un Envío y lo juzga una vez.

Cuando el formulario se dibuja plano

El formulario se dibuja con todos los campos en una página bajo un único botón de envío en tres casos: no declara Pasos, el plan del equipo ya no los permite, o el navegador del remitente no ejecuta JavaScript. El dibujo plano no es un respaldo añadido después; es aquello alrededor de lo cual los Pasos son la interfaz.

Quien navega con los scripts desactivados recibe los mismos campos, los mismos nombres y el mismo botón de envío — en una sola página. El formulario no está roto, simplemente es una página. Perder los Pasos por un cambio de plan tampoco es una migración: el formulario conserva sus Pasos en su esquema, se dibuja plano mientras falta el permiso y vuelve a dibujarlos si regresa.

Dónde los Pasos son contundentes

Los Pasos tampoco ocultan el esquema. Todo lo que declaras está en el contrato, lo muestre o no una pantalla, y la visión del navegador sobre qué campos son visibles nunca decide qué se acepta. Si un campo debe estar ausente y no solo oculto, no lo declares.

La entrada del Registro de cambios de v1.0.0 recoge la frase sobre la que descansa todo esto: apunta cualquier formulario HTML a FormFlow, o usa una página alojada o un embed, y recibe, filtra, almacena y reenvía cada envío. Los Pasos reordenan el centro de esa frase. No la alargan.