Static HTML Forms

Our automatic form tracking supports tracking static HTML forms on your website. It triggers when a valid email is submitted as part of a form.

To enable static HTML form tracking, set the html option to true in your script as done below.

dreamdata.load("<DREAMDATA_API_KEY>", {
  formTracking: {
    html: true,
  },
});

Additional options

We also support the following options to customize your static HTML form tracking:

• eventName - Custom event name for tracking, overriding default "form-submit".
• useFormIdAsEventName - Use the form's id attribute as the event name in tracking.
• useFormNameAsEventName - Use the form's name attribute as the event name in tracking.
• useCustomAttributeNameAsEventName - Get the event name from any custom attribute that you might have on your form.

Custom options should be added in the manner as shown below:

dreamdata.load("<DREAMDATA_API_KEY>", {
  formTracking: {
    html: {
      useFormNameAsEventName: true,
    },
  },
});

Event name priority

When multiple event name options are configured, the following priority order is used:

1. useCustomAttributeNameAsEventName - Takes precedence if the custom attribute exists on the form
2. eventName - Fixed custom event name
3. useFormIdAsEventName - Uses the form's id attribute
4. useFormNameAsEventName - Uses the form's name attribute
5. Default: "form-submit" - Used when no other options are specified or when required attributes are missing

Examples

Using a custom event name

dreamdata.load("<DREAMDATA_API_KEY>", {
  formTracking: {
    html: {
      eventName: "newsletter-signup",
    },
  },
});

Using form ID as event name

dreamdata.load("<DREAMDATA_API_KEY>", {
  formTracking: {
    html: {
      useFormIdAsEventName: true,
    },
  },
});

For this configuration, a form with <form id="contact-form"> would generate an event named "contact-form".

Using custom attribute as event name

dreamdata.load("<DREAMDATA_API_KEY>", {
  formTracking: {
    html: {
      useCustomAttributeNameAsEventName: "data-event-name",
    },
  },
});

For this configuration, a form with <form data-event-name="custom-signup"> would generate an event named "custom-signup".