Forms tracking failed

forms

#1

Hi!

On our website product pages, we are collecting the Product Trial requests in pop-up forms (on top) and Contact Us requests from the form in the bottom of the page. Unfortunately, Hubspot tracking code - code is 404141 - does not collect the data from pop-ups at all, but in the case of Contact Us form, it works well.

Our Dev team was trying to fix the issue performing the following actions:

• We were trying to move up Hubspot tracking code just after and moving it down before - no effect.
• We were trying to use dev tools debugging the issue and figured out the source of the problem:

  • Hubspot tracking code adds its own handler to all “submit” events.
  • When pop-up window opens, our script grabs specific web form and embeds it into the pop-up layout – wherein Hubspot tracking code event disappears and the pop-up window remains invisible.

We could not find any solution to fix it...

Would community members be so kind as to find the best possible way to fix this issue?


#3

Hi @gkholmov,

Thanks for providing your Hub ID (although you left off the 0 at the end :wink:)!

I too can see the collectedforms.js handler removed from the .btn .btn_red .btn_inactive .formSbm button when the pop-up appears.

I believe the issue may be with how you are "embed[ding the form] into the pop-up layout." Per the Forms that work with the non-HubSpot forms tool section of this article, forms which are introduced after DOM loads will not be picked up.

While I can see the .custom-form .ptForm .ajaxContainer form in the source code when the DOM loads even before I trigger the pop-up, it seems like you load it again in the pop-up modal. Is this the case?

If so, could you just unhide the form with JavaScript instead of reloading it? I believe this re-embedding after the DOM has loaded is kicking the handler off the submit button.

Alternatively, it may be easier to use the Forms API to submit directly to HubSpot instead of dealing with these submit handlers.