Form submission retries on network failure

A form that clears its fields on network failure destroys user work and guarantees the user abandons the operation — or at minimum re-enters all data under frustration. ISO 25010 reliability.recoverability requires the application to preserve state across failure events. For signup, checkout, and contact forms this is a direct conversion killer: a single network timeout during form submission can permanently lose a customer. The fix is architectural, not cosmetic: form state must live in React state or a form library, never be cleared in the catch block.

Never clear form state in error handlers. Keep field values in state, show an inline error, and expose a retry action that resubmits the preserved data.

// components/contact-form.tsx
const [fields, setFields] = useState({ email: '', message: '' })
const [status, setStatus] = useState<'idle' | 'submitting' | 'error' | 'success'>('idle')

async function handleSubmit(e: React.FormEvent) {
  e.preventDefault()
  setStatus('submitting')
  try {
    await submitContact(fields)
    setStatus('success')
  } catch {
    setStatus('error') // fields unchanged — user can retry
  }
}

// In the render:
{status === 'error' && (
  <p>
    Submission failed. <button onClick={handleSubmit}>Try again</button>
  </p>
)}

For long forms, consider persisting draft state to localStorage so data survives a hard refresh.