# Form abandonment is tracked

- **Pattern:** `ab-001706` (`marketing-analytics.event-conversion-tracking.form-abandonment-tracking`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001706
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001706)

## Why it matters

Form abandonment tracking distinguishes a form nobody starts from a form everyone starts but abandons at field three. Without it you cannot find the field that kills your signup flow — the one asking for phone number, or tax ID, or company size — and you cannot prioritize which friction to remove. Tracking only the final submit gives you the denominator of conversion but never the numerator of drop-off, which is where the optimization gains live.

## Severity rationale

Low because abandonment tracking improves optimization precision but its absence does not break primary conversion measurement.

## Remediation

Fire a `form_started` event on first field focus and a `form_abandoned` event on unmount without submission:

```tsx
useEffect(() => () => {
  if (formStarted && !formSubmitted) analytics.track('form_abandoned', { form_type: 'signup' })
}, [formStarted, formSubmitted])
```

For multi-step forms, fire `form_step_completed` with a step number so you can identify the exact step where users drop off. Apply the pattern in `components/SignupForm.tsx` and any multi-field lead form.

## Detection

- **ID:** `form-abandonment-tracking`
- **Severity:** `low`
- **What to look for:** Form abandonment tracking fires an event when a user starts filling out a form (focuses on a field) but leaves without submitting. Look for:
  - `onBlur` or `onFocus` handlers on form fields that trigger analytics
  - `beforeunload` event listeners near form components
  - Analytics events named `form_abandoned`, `form_started`, `form_dropped`
  - Multi-step form tracking with step completion events
- **Pass criteria:** At least 1 form with 2 or more fields has abandonment tracking implemented (started + abandoned events, or step-level tracking for multi-step forms). Count the number of multi-field forms and how many have abandonment tracking.
- **Fail criteria:** No form abandonment tracking found. All forms track only final submission.
- **Skip (N/A) when:** No analytics is present. Skip if the project has no forms. Skip if the project has only single-field forms (e.g., email-only newsletter subscribe) where abandonment tracking adds little value.
- **Detail on fail:** `"No form abandonment tracking found. Knowing where users drop off in multi-field forms can identify friction points that reduce conversions."`
- **Remediation:** Track form start and abandonment separately from submission:

  ```tsx
  const [formStarted, setFormStarted] = useState(false)

  function handleFirstFocus() {
    if (!formStarted) {
      setFormStarted(true)
      analytics.track('form_started', { form_type: 'signup' })
    }
  }

  // On component unmount without submission:
  useEffect(() => {
    return () => {
      if (formStarted && !formSubmitted) {
        analytics.track('form_abandoned', { form_type: 'signup' })
      }
    }
  }, [formStarted, formSubmitted])
  ```

  For multi-step forms, track each step completion to identify where users drop off.

Taxons: observability

HTML version: https://auditbuffet.com/patterns/ab-001706