Track Form Submissions

Track form submissions to measure lead generation, contact requests, and user signups.

Basic Form Tracking

Track form submissions by adding an event handler to the form's submit event:

<form onSubmit={handleSubmit}>
  <input type="email" name="email" placeholder="Your email" />
  <button type="submit">Subscribe</button>
</form>

function handleSubmit(e) {
  e.preventDefault();

  // Track the submission
  window.narrowbeam.trackAction('newsletter-signup');

  // Process the form
  submitToServer(formData);
}

Common Form Types

Newsletter Signup

function handleNewsletterSubmit(e) {
  e.preventDefault();
  window.narrowbeam.trackAction('newsletter-signup');
  // ... submit logic
}

Contact Form

function handleContactSubmit(e) {
  e.preventDefault();
  window.narrowbeam.trackAction('contact-form-submit');
  // ... submit logic
}

Lead Generation Form

function handleLeadSubmit(e) {
  e.preventDefault();
  const planType = e.target.plan.value;
  window.narrowbeam.trackAction('lead-form-submit', planType);
  // ... submit logic
}

Registration Form

function handleRegistration(e) {
  e.preventDefault();
  window.narrowbeam.trackAction('user-registration');
  // ... registration logic
}

Tracking Form Success vs Errors

Track successful submissions separately from failed attempts:

async function handleFormSubmit(e) {
  e.preventDefault();

  try {
    await submitForm(formData);

    // Track successful submission
    window.narrowbeam.trackAction('form-submit-success');
    showSuccessMessage();
  } catch (error) {
    // Track error
    window.narrowbeam.trackAction('form-submit-error');
    showErrorMessage();
  }
}

Multi-Step Forms

Track progress through multi-step forms:

// Step 1
function completeStep1() {
  window.narrowbeam.trackAction('signup-step-1-complete');
  goToStep2();
}

// Step 2
function completeStep2() {
  window.narrowbeam.trackAction('signup-step-2-complete');
  goToStep3();
}

// Final step
function completeSignup() {
  window.narrowbeam.trackAction('signup-complete');
  redirectToDashboard();
}

React Example

function ContactForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();

    window.narrowbeam.trackAction('contact-form-submit');

    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      window.narrowbeam.trackAction('contact-form-success');
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Best Practices

Form Tracking Tips

Track after validation: Only track successful validation, not every attempt
Unique names: Use descriptive names like newsletter-signup
Track abandonment: Monitor where users drop off in multi-step forms
Separate success/error: Track outcomes differently for better analysis
Include context: Use action values to pass form types or selected options

Calculating Conversion Rates

Create a conversion funnel in your dashboard:

Widget 1: Page views for form page (group by url_path)
Widget 2: Form submissions (filter action_name = "form-submit")
Calculate: Submissions / Page views = Conversion rate