Blog

Track form submissions through sGTM without breaking forms

GTM's form submission trigger is fragile. Here is the pattern that survives JavaScript-heavy frameworks and accessible forms.

GTM's built-in Form Submission trigger fires on the form's submit event. That works for plain HTML forms. For React, Vue, or any framework that intercepts the submit event for client-side validation, the trigger fires unreliably or not at all.

The pattern that always works

Skip the GTM trigger. Have your form submission code push a data layer event explicitly:

// In your form submission handler, after successful validation
window.dataLayer.push({
  event: 'form_submit',
  form_name: 'contact_us',
  form_id: 'form-contact',
  form_destination: 'sales'
});

In GTM, set up a Custom Event trigger on form_submit. The trigger fires whenever your code pushes the event, regardless of how the framework handled the underlying submit.

When to fire: success or attempt?

Fire on successful submission, not on attempt. Forms with validation will trigger many "submit attempts" that fail validation; those should not be conversions. The data layer push goes after your validation passes and before (or alongside) the network request.

If the network request can fail, fire a separate event for that case (form_submit_error) so you can debug failures separately from successful conversions.

Pass user data with the event

If the form collects email or phone, push them with the event so your tagging server can include them in downstream payloads. Hash on the server, not on the page.

window.dataLayer.push({
  event: 'form_submit',
  form_name: 'newsletter',
  user_data: {
    email_address: emailInput.value,
    first_name: firstNameInput.value
  }
});

For embedded forms (HubSpot, Marketo, Typeform)

These vendors fire their own callbacks on submit. Hook into the callback rather than trying to detect the form submit:

// HubSpot
hbspt.forms.create({
  ...,
  onFormSubmitted: function(form) {
    window.dataLayer.push({event: 'form_submit', form_name: 'hubspot'});
  }
});

For accessibility-first forms

Forms that submit on Enter keypress in a single field (search bars, email-only signup) sometimes never fire a real submit event. Add a keydown listener that pushes the event when Enter is pressed in the relevant field. Test with screen readers; the data layer push should fire identically regardless of input method.