"Form submission canceled because the form is not connected" - console warning with embedded forms

[derekcavaliero]

Hi everyone,

We use Google Tag Manager to setup form submission tracking for most of the sites we build and manage for our clients and I noticed something strange happening the other day when testing some tracking implementations.

We use a basic form submit trigger inside Google Tag Manager to listen for successful form submissions on any form that contains “hsForm_” inside its id="" attribute. This works perfectly fine for HubSpot forms that redirect to another page using the redirectUrl option for the embedded forms, however it stops working when using the inline message functionality. When debugging using chromes developer tools I saw this new warning appear:

screenshot_2017-03-31_09-52-09.png2514x202 42.3 KB

I searched around a bit and found a few Stack Overflow conversations about changes made inside Chrome 56 that seems to be related to this issue:

stackoverflow.com

Getting Error "Form submission canceled because the form is not connected"

javascript, jquery, google-chrome, jquery-1.7

asked by Mahmoud Moravej on 03:28PM - 05 Feb 17

When this error appears - the form submission does not make its way into the HubSpot contacts database, however the front-end appearance of the form still operates as if it did (hides the form and shows the submit message etc…).

Its even more bizarre that this only seems to happen if a form submit trigger is set inside Google Tag Manager - which is a large issue considering it is a widely used tracking solution not only for our client base but the web in general.

Any thoughts here? I searched the forums for this error message and was not able to find anything anywhere.

I would be happy to provide a test GTM container export to aid in debugging this issue if needed.

Thanks all,

• Derek

[derekcavaliero]

@pmanca no problem, happy to help. If you need a test GTM container with the triggers I was using for testing let me know and I can provide a container export. Here is the trigger i had configured that was causing the issue:

Screen Shot 2017-04-05 at 11.21.06 AM.png918x374 10.8 KB

Also, make sure you have a test tag fire on using the trigger when testing. A simple console.log() will suffice.

[#3]

Thanks for sharing this, @derekcavaliero. I’m setting this up for a client and am a relative newbie. How does turning off “Wait for Tags” affect the embedding of GCLID in a hidden field for a form?

(I’m embedding the GCLID as a workaround for tracking scheduled meetings as an offline conversion action, since HubSpot doesn’t let you do that directly.)

Also, can you share your setup for a console.log() test?

[derekcavaliero]

@ChrisJustin my apologies I never saw this question.

Wait for tags shouldn’t effect what you are describing. The wait for tags setting is a partial solution to the very real possibility that a page will unload before all of the tags which meet firing conditions are triggered.

All I did for a console.log(); was create a custom HTML tag and log a message to the console if the form was successfully submitted and attached it to my HubSpot form submission trigger.

[derekcavaliero]

After further digging, I was able to pinpoint the issue for the GTM form submission triggers “Wait for Tags” setting. Disabling that seems to fix the issue, however this also can cause the tracking code request to be cancelled if the request does not finish before the page unloads.

Simo Ahava - a GTM expert, also pointed me toward the transport field for Google Analytics requests that allows you to leverage navigator.sendBeacon for browsers that support that feature which can reduce this problem to an extent, however support is not all that great at the moment, but modern browsers should be mostly fine.

[3PETE]

@derekcavaliero So when the"Wait for Tags" setting is on the post call never actually fires? Do the tags themselves have trouble loading in addition?

[derekcavaliero]

Yes, that is correct @pmanca

If the “Wait for Tags” setting is enabled on a form that uses the inline message capability instead of a redirectUrl - the form submission is cancelled (the submission data does not post to HubSpot) BUT, the form visually submits and the tracking code fires appropriately - which is bad news bears.

Not sure if this is something that can be remedied inside the HubSpot forms script or not, but it may be worth investigating. I would be willing to bet non-technical people have setup form tracking inside GTM in this manner and believed it to be working but are probably missing out on form submissions data.

[3PETE]

@derekcavaliero thanks for the insight and expanding on the case. That is a good catch on your part.