How to implement click tracking on a HubSpot form submit button?

Other Questions HubSpot
1

Hey everyone! I’m trying to figure out how to add click tracking to the submit button on my HubSpot form. I’ve attempted to use the onFormSubmit attribute to include tracking code, but it’s not giving me any results for button clicks. I’m wondering if I’ve messed up the code somehow.

Here’s a simplified version of what I’m working with:

hbspt.forms.create({
  portalId: 'my_portal_id',
  formId: 'my_form_id',
  onFormSubmit: function() {
    trackButtonClick();
    sendGAEvent('form', 'submit', 'contact_us');
  }
});

Has anyone successfully implemented tracking for HubSpot form submit buttons? Any tips or tricks would be super helpful. I’m not sure if I’m missing something obvious or if there’s a better way to approach this. Thanks in advance for any advice!

2

hey lucask, i had similar issues. try using the ‘onFormSubmitted’ event instead of ‘onFormSubmit’. it worked for me. also, make sure your tracking functions are defined before the form creation code. hope this helps!

3

I’ve dealt with this exact problem before, and it can be tricky. The key is to use HubSpot’s form events correctly. Instead of ‘onFormSubmit’, try using ‘onFormReady’ to attach a click event listener to the submit button directly. Here’s what worked for me:

hbspt.forms.create({
  portalId: 'my_portal_id',
  formId: 'my_form_id',
  onFormReady: function($form) {
    var submitButton = $form.find('input[type=\"submit\"]');
    submitButton.on('click', function() {
      trackButtonClick();
      sendGAEvent('form', 'submit', 'contact_us');
    });
  }
});

This approach ensures the tracking fires on the actual click, not just form submission. It’s been reliable for me across different HubSpot forms. Just make sure your tracking functions are properly defined and you should be good to go.

4

yo lucask, have u tried using the ‘onFormSubmitted’ callback? it fires after successful submission. like this:

hbspt.forms.create({
portalId: ‘my_portal_id’,
formId: ‘my_form_id’,
onFormSubmitted: function() {
trackButtonClick();
sendGAEvent(‘form’, ‘submit’, ‘contact_us’);
}
});

works better for me than onFormSubmit. good luck!

5

I’ve found that using Google Tag Manager (GTM) can be a more robust solution for tracking HubSpot form submissions. Set up a custom HTML tag in GTM that listens for the form submission event. Here’s a simplified example:

window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    // Your tracking code here
    dataLayer.push({'event': 'hubspot_form_submit'});
  }
});

Then, create a trigger in GTM for this custom event. This method has worked consistently for me across various HubSpot forms and doesn’t require modifying the form code directly. It’s also more flexible for adding or modifying tracking in the future without touching the form setup.