Track form submissions

Capture when users submit forms on your website, such as sign-up forms, contact forms, newsletter subscriptions, or checkout flows.

Using data attributes

For simple forms, add tracking attributes directly to the submit button:

<form action="/subscribe" method="POST">
  <input type="email" name="email" placeholder="Email" />
  <button
    type="submit"
    data-umami-event="form-submit"
    data-umami-event-form="newsletter"
  >
    Subscribe
  </button>
</form>

Using JavaScript for more control

For forms that use JavaScript submission (AJAX, fetch, or framework form handling), call umami.track() in your submit handler:

document.querySelector('#contact-form').addEventListener('submit', function (e) {
  umami.track('form-submit', { form: 'contact', source: 'homepage' });
});

React example

function SignupForm() {
  async function handleSubmit(e) {
    e.preventDefault();
    umami.track('form-submit', { form: 'signup', plan: 'free' });

    // Continue with your form submission logic
    await submitToAPI(new FormData(e.target));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <button type="submit">Sign Up</button>
    </form>
  );
}

Tracking form completions vs. submissions

If your form spans multiple steps (like a checkout flow), track each step to understand where users drop off:

// Step 1: User enters email
umami.track('checkout-step', { step: 'email' });

// Step 2: User enters payment info
umami.track('checkout-step', { step: 'payment' });

// Step 3: User completes purchase
umami.track('checkout-step', { step: 'complete' });

You can then use the Funnel insight to visualize the drop-off between steps.

Viewing form data

Navigate to Events to see submission counts, and Event data to break down submissions by form name, source, or any other properties you track.

To measure what percentage of visitors submit a form, create a Goal with the form-submit event as the conversion action.