Skip to main content

​
Overview

The TrackForm component automatically tracks form submissions and optionally tracks individual field changes. It wraps your form and provides analytics on user interactions with form fields.

​
Props

​
children
ReactNode
required
The form fields and content to render inside the form element.
​
formName
string
required
A unique identifier for the form. Used to distinguish between different forms in your analytics.
​
trackSubmit
boolean
default:true
Whether to track form submissions. When enabled, tracks a form_submitted event with form details.
​
trackFieldChanges
boolean
default:false
Whether to track individual field changes. When enabled, tracks a form_field_changed event for each field interaction.

​
Usage

​
Basic Form Tracking

import { TrackForm } from 'mentiq-sdk';

function ContactForm() {
  return (
    <TrackForm formName="contact_form">
      <input type="text" name="name" placeholder="Your name" />
      <input type="email" name="email" placeholder="Your email" />
      <textarea name="message" placeholder="Your message" />
      <button type="submit">Send Message</button>
    </TrackForm>
  );
}

​
Track Field Changes

<TrackForm
  formName="signup_form"
  trackSubmit={true}
  trackFieldChanges={true}
>
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="email" name="email" />
  <button type="submit">Sign Up</button>
</TrackForm>

​
Multi-Step Form

function MultiStepForm() {
  const [step, setStep] = useState(1);

  return (
    <TrackForm
      formName={`checkout_form_step_${step}`}
      trackFieldChanges={true}
    >
      {step === 1 && (
        <div>
          <input type="text" name="shipping_address" />
          <input type="text" name="city" />
        </div>
      )}
      {step === 2 && (
        <div>
          <input type="text" name="card_number" />
          <input type="text" name="cvv" />
        </div>
      )}
      <button type="submit">Continue</button>
    </TrackForm>
  );
}

​
Tracked Events

​
form_submitted

Tracked when the form is submitted (if trackSubmit is true): 
{
  form_name: string,      // The formName prop value
  field_count: number,    // Number of fields in the form
  fields: string          // Comma-separated list of field names
}

​
form_field_changed

Tracked when a field value changes (if trackFieldChanges is true): 
{
  form_name: string,      // The formName prop value
  field_name: string,     // The name attribute of the field
  field_type: string      // The type of input (text, email, etc.)
}

​
Behavior

  • Renders as a native <form> element
  • Captures form submission events and extracts field data
  • Tracks all fields with a name attribute
  • Does not prevent default form submission behavior
  • Field change tracking only works for fields with a name attribute
  • Automatically extracts form data using FormData API

​
Use Cases

  • Track form completion rates
  • Identify problematic form fields
  • Measure user engagement with forms
  • A/B test form designs
  • Monitor field interaction patterns
  • Analyze form abandonment

Build docs developers (and LLMs) love

Get started for freeTalk to us