Embedded form tracking in GTM doesn't work in new form editor

[JAalbers]

When I use the new form editor (in beta), I discovered that the form tracking in GTM doesn't work. Form submits with 'old' embedded Hubspot forms still work. I used the code that's referred to all over the internet: 

<script type="text/javascript"> 
window.addEventListener("message", function(event) { 
  console.log(event.data);
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    
    window.dataLayer.push({ 
      'event': 'hubspot_form_success', 
      'hs-form-guid': event.data.id }); 
  } 
}); 
</script>

I've already checked the Hubspot documentation but can't find changes in how to track form submits with this new editor. Does anybody have a solution for this?

[JAalbers · Accepted solution]

Update: For people experiencing the same problem: I also reported this to the support team and I eventually received this response:

It has been very tricky to identify and test the new form editor to capture events in GTM. - Seems like at the moment this is not supported by the new editor, and we reached out to our engineering team, and we were not given any specific expectations if this is something that they plan to implement in the future. At least not during the BETA version of form submissions. In the meantime, the recommendation is to keep using the legacy form editor so you can continue keeping track and creating events for GTM. 

In short, the conversion tracking does not work with the new editor and will not work during the beta. I am very surprised that a company like Hubspot did not think about conversion tracking during development. The new editor works nicely, but I will certainly not use the new editor for this reason.

Please support my idea to integrate this functionality in the new editor. 

[RobertColson · Accepted solution]

Hi all, HubSpot employee here!

I've researched internally, and our team suggests that the new form editor (i.e., Forms 2.0) uses a different event name. Kindly refer to the New Form Global Events doc to set up form events with GTM. For anything dev- or troubleshooting-related to this topic, it would be best to consult HubSpot Developer Support or the Developer Community.

[JAalbers · Accepted solution]

Hi! I noticed two issues in your code:

- The correct event property is event.detail, not event.data. HubSpot uses the standard CustomEvent object, and the data is stored under .detail.

- You’re opening a block (with a curly bracket) directly after console.log(event.data); without a closing bracket — that’s a syntax error. Solution: remove the unnecessary curly bracket.

I’ve tested the new global events that @RobertColson  suggested — they work great!

You can use the following code in your Custom HTML tag and trigger it on DOM ready to ensure all relevant events are captured:

<script>
(function() {
function pushToDataLayer(eventName, event) {
window.dataLayer = window.dataLayer || [];

var formId = event.detail.formId;
var instanceId = event.detail.instanceId;

var data = {
event: eventName,
formId: formId,
instanceId: instanceId
};

dataLayer.push(data);
}

window.addEventListener('hs-form-event:on-submission:success', function(event) {
pushToDataLayer('form_submit_success', event);
});

window.addEventListener('hs-form-event:on-submission:failed', function(event) {
pushToDataLayer('form_submit_failed', event);
});

window.addEventListener('hs-form-event:on-interaction:navigate:next', function(event) {
pushToDataLayer('form_navigate_next', event);
});

window.addEventListener('hs-form-event:on-interaction:navigate:previous', function(event) {
pushToDataLayer('form_navigate_previous', event);
});
})();
</script>

[FMaury · Accepted solution]

Hi! My bad I was OOO so I didn't catch the news on this matter...
If needed, I was working on a custom HTML GTM that listen the old and new Hubspot form submissions:

<script>
var eventName = "hubspot-form-success";
var includeFormData = true;

window.addEventListener("message", function(event) {
if (event.data && event.data.type === "hsFormCallback" && 
(event.data.eventName === "onFormSubmitted")) {
var formData = {
event: eventName + "-v3",
"hs-form-guid": event.data.id
};

if (includeFormData && event.data.data && event.data.data.submissionValues) {
for (var field in event.data.data.submissionValues) {
if (event.data.data.submissionValues.hasOwnProperty(field)) {
var cleanedField = field.replace(/[^\w]/g, "_");
var key = "hs-" + cleanedField;
formData[key] = event.data.data.submissionValues[field];
}
}
}

window.dataLayer = window.dataLayer || [];
window.dataLayer.push(formData);
}
});

window.addEventListener("hs-form-event:on-submission:success", function(event) {
if (typeof HubspotFormsV4 === "undefined") return;

var form = HubspotFormsV4.getFormFromEvent(event);
if (!form) return;

var formData = {
event: eventName + "-v4",
"hs-form-id": form.getFormId()
};

if (includeFormData) {
form.getFormFieldValues().then(function(values) {
if (values && values.length) {
for (var i = 0; i < values.length; i++) {
var field = values[i];
var cleanedName = field.name.replace(/[^\w]/g, "_");
var key = "hs-" + cleanedName;
formData[key] = field.value;
}
}
window.dataLayer.push(formData);
});
} else {
window.dataLayer.push(formData);
}
});
</script>

[JAalbers]

That's right, no message is sent. Currently the new form editor (beta) is still a very stripped down version. Our contact told us there are also some other issues with the beta at the moment and I would not use it in pages except for testing.

[JAalbers · Accepted solution]

Update: For people experiencing the same problem: I also reported this to the support team and I eventually received this response:

It has been very tricky to identify and test the new form editor to capture events in GTM. - Seems like at the moment this is not supported by the new editor, and we reached out to our engineering team, and we were not given any specific expectations if this is something that they plan to implement in the future. At least not during the BETA version of form submissions. In the meantime, the recommendation is to keep using the legacy form editor so you can continue keeping track and creating events for GTM. 

In short, the conversion tracking does not work with the new editor and will not work during the beta. I am very surprised that a company like Hubspot did not think about conversion tracking during development. The new editor works nicely, but I will certainly not use the new editor for this reason.

Please support my idea to integrate this functionality in the new editor. 

[Chris_Bronc]

Thanks for letting us know, I just wasted 6 hours trying to use old setup with the new form, I would prolly spent another 5 if not for your post.

[PamCotton]

Hey @JAalbers, thank you for posting in our Community.

It appears there may be compatibility issues between the new HubSpot form editor and your current GTM setup for tracking form submissions. Make sure your event listener setup (window.addEventListener) is correctly capturing the hsFormCallback event with onFormSubmitted. Check HubSpot's latest documentation for any updates on tracking form submits with the new editor.

If this does not help, the more information, screenshots, and details you can provide, the better I can advise on the next steps.

Kindly,

Pam

[JAalbers]

Thank you! It listens for the hsFormCallback event with onFormSubmitted and the code fires in GTM, but it seems there is no hsFormCallback event and there's no data pushed into the dataLayer. Does the new editor perhaps use another message event?