Building Multi-Step Forms That Don't Lose User Data
A lending client's six-step application form was losing 22% of users specifically at step 4, well above the roughly 6-8% step-to-step drop-off elsewhere in the flow. Session recordings showed the pattern: users switching tabs to grab a document number or check a bank statement, then returning to a form that had reset because state lived only in React component memory with no persistence.
We moved form state to a combination of URL state for the current step and localStorage for field values, synced on every field blur rather than on every keystroke to avoid excessive writes. Returning to the form, even after closing the tab entirely, restored the user to the exact step and field values they'd left, with a subtle banner confirming 'we saved your progress' so users trusted it enough to actually navigate away when they needed to.
Validation timing needed to change too. The original form validated every field on every keystroke, which meant a partially-typed email address showed a red error state before the user finished typing. We moved to validating on blur for most fields, with real-time validation reserved for password strength and a couple of fields with strict formats (SSN, routing number) where immediate feedback genuinely helps.
For sensitive fields like SSN and bank account numbers, we didn't persist raw values to localStorage — we persisted a masked placeholder and a flag indicating the field was previously completed, requiring re-entry on return. This was a deliberate trade-off: slightly more friction on resume, but it meant we weren't storing sensitive financial data unencrypted in browser storage, which mattered both for security and for the client's compliance review.
Server-side, we added a partial-save endpoint that persisted progress after each step completion, not just at final submission, tied to a resumable session token emailed to the user if they abandoned mid-flow. That let support proactively follow up on stalled applications instead of losing them silently.
Combined, these changes brought step 4 drop-off down to about 9%, closer to the baseline for the rest of the flow, and cut abandoned-application support tickets by roughly a third.
