onFormReady callback not firing

[ASharma58]

I have an external website where we have using Hubspot forms embed via an iframe to collect details. There are multiple forms so I am trying to write one script for all the forms.

I am trying to attach the Google Client ID as a hidden field with each submission. Using the Custom HTML tag on Google Tag Manager I have added following script to the page. But none of the 3 callbacks are able to fill the value for the hidden input field.

1. onFormReady: callback is not even firing
2. onFormSubmit: callback is getting fired but it did NOT attach the value to input field
3. onBeforeFormSubmit: callback is getting fired but it did NOT attach the value to input field

Can you please suggest the right approach to achieve this? Or if something is wrong with the current code?

<script>
(function() {

window.addEventListener('message', function (event) {

ga_client_id = '{{Return Client ID}}';

if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
console.log(event.data);
console.log("onFormReady");

document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="ga_client_id"]').value = ga_client_id;

}

if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
console.log(event.data);
console.log("onFormSubmit");

document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="ga_client_id"]').value = ga_client_id;
}

if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onBeforeFormSubmit') {
console.log(event.data);
console.log("onBeforeFormSubmit");

document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="ga_client_id"]').value = ga_client_id;
}

});
})();

</script>

[JWingate2]

Hi @ASharma58 ,

Hi! I had to reach out to much smarter people on my team at Impulse Creative to get an answer for you, but from what I am understanding is that you will have to turn off the iFrame embed on the form because javascript cannot read into iframes.
That can be done by going into the individual form’s Style & Preview Settings and toggling “Set as raw HTML form”

[ASharma58]

Hi @JWingate2 ,

I tried this approach as well. Toggled “Set as raw HTML form” and rendered the form without Iframe.

Even then the event did not get fired. It is not going inside the “IF” condition at all.

<script>
 (function() {

 window.addEventListener('message', function (event) {

 ga_client_id = '{{Return Client ID}}';
 console.log(event.data); 

 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 console.log("onFormReady"); 
 document.querySelector('input[name="ga_client_id"][class="hs-input"]').value = ga_client_id;
 }

 });
 })();

</script>

[JWingate2]

@ASharma58

The dev team told me this - “Might just be that HS requires that when an input is changed programmatically we need to tell the system that it has updated. So they’ll need to call the “.change()” method on the input”

[ASharma58]

Finally, the solution that worked for me was to not use the addEventListener but use the the onFormReady event while initialising the form:

hbspt.forms.create({
 region: "na1",
 portalId: "1234456",
 formId: "XXXXX-XXXXX-XXXXX",
 onFormReady: function($form){
 ga_client_id = ga.getAll()[0].get('clientId')
 document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="ga_client_id"]').value = ga_client_id; 
 },
});