De ce multi-step bate single-page la formulare >8 câmpuri
Pentru un formular de 15 câmpuri afișat single-page, respondentul vede peste «masă imensă» și abandonează la primul scroll (rata de abandon medie: 58%). Aceleași 15 câmpuri spartate în 4 pași cu progress bar «Pasul 2 din 4» obțin 79% completion rate. Diferența psihologică: respondentul vede progres tangibil, fiecare pas pare scurt, iar perceput-time-to-complete scade chiar dacă timpul real e același. Megaforms permite definirea pașilor în builder prin drag-and-drop câmpuri în secțiuni numite.
Progress bar — 3 variante
Owner alege între: (1) bar linear cu procent (default, «60% complete»); (2) stepper numerotat cu titluri («Date personale → Anamneză → Preferințe → Plată»); (3) dots minimaliste pentru forms cu <5 pași. Progress bar e sticky (rămâne vizibil la scroll) pe mobil pentru reassurance. Color customizable per brand workspace.
Autosave la fiecare 2 secunde
Fiecare modificare în câmpuri declanșează un debounce 2s, după care payload-ul se trimite la server (PATCH /submissions/draft/:id). Dacă respondentul închide browser-ul, dorul de wifi, sau accidentally închide tab-ul — la deschiderea aceluiași URL pe același device, datele se restaurează automat din localStorage backup + server fetch. Dacă vrea să continue pe alt device (mobil → desktop), folosește magic link.
// Autosave hook simplificat
useEffect(() => {
const handle = setTimeout(() => {
fetch(`/api/submissions/draft/${submissionId}`, {
method: 'PATCH',
body: JSON.stringify({ stepIndex, values })
});
}, 2000);
return () => clearTimeout(handle);
}, [values, stepIndex]);Save-and-resume magic link 7 zile
La sfârșitul unui pas, respondentul poate apăsa «Salvează și continuă mai târziu». Introduce email-ul → primește instant magic link valid 7 zile. Click pe link → revine exact unde s-a oprit, indiferent de device. Magic link e signed JWT cu submission_id + scope «resume». După submit final, magic link se invalidează automat. Util pentru formulare lungi (cerere credit bancar, intake medical complex, aplicare job).
Validare per pas vs validare finală
Default: validare per pas — nu poți trece la pasul 2 fără să completezi câmpurile obligatorii din pasul 1. Pentru UX mai relaxat, owner poate alege «validare finală» — respondentul poate naviga liber între pași, validarea rulează doar la submit final. Combinația cu progress bar îi arată ce mai are de completat («Pasul 2 — incomplet» cu indicator galben).