# onFormReady callback not firing

**URL:** <https://community.hubspot.com/t/onformready-callback-not-firing/90272>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [September 22, 2023, 11:57am UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272 "2023-09-22T11:57:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ASharma58](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@ASharma58](https://community.hubspot.com/u/ASharma58)\
**Post date:** [September 22, 2023, 11:57am UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272/1 "2023-09-22T11:57:37Z")

</div>

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?

```lia-code-sample
<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>

```

 ![Screenshot 2023-09-22 at 5.20.15 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/f/cfbf33e850c339b724e3aa2a2d8982c0e3a134ad.png)

---

<div class="post-metadata">

**Author:** ![JWingate2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwingate2/32/37981_2.png) [@JWingate2](https://community.hubspot.com/u/JWingate2)\
**Post date:** [September 22, 2023, 2:35pm UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272/2 "2023-09-22T14:35:56Z")

</div>

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”

 ![853907_1_Screenshot 2023-09-22 at 10.34.23 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/f/7fc6c79ca10f90b24b6a3986c77bc84043a56961.png)

---

<div class="post-metadata">

**Author:** ![ASharma58](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@ASharma58](https://community.hubspot.com/u/ASharma58)\
**Post date:** [September 23, 2023, 7:20am UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272/3 "2023-09-23T07:20:28Z")

</div>

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.

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![JWingate2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jwingate2/32/37981_2.png) [@JWingate2](https://community.hubspot.com/u/JWingate2)\
**Post date:** [September 26, 2023, 3:19pm UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272/4 "2023-09-26T15:19:52Z")

</div>

@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”

---

<div class="post-metadata">

**Author:** ![ASharma58](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@ASharma58](https://community.hubspot.com/u/ASharma58)\
**Post date:** [September 27, 2023, 9:40am UTC](https://community.hubspot.com/t/onformready-callback-not-firing/90272/5 "2023-09-27T09:40:42Z")

</div>

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

```lia-code-sample
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; 
 },
});

```