Unable to Access New HubSpot Form in iframe (Same-Origin Policy Issue)

[svirchenko]

Hi HubSpot Community,

We’re currently integrating the new HubSpot embedded forms and running into an issue that breaks our previous enrichment logic.

What worked before:

With legacy forms, the form would render inside an iframe without a src attribute, allowing us to access the inner DOM using:

window.addEventListener('message', event => {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    const form = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector('.hs-form');
    const emailInput = form.querySelector("input[name='email']");
    emailInput.addEventListener('keyup', () => {
      // custom logic
    });
  }
});

Problem now:

With the new HubSpot Forms (V3 static embed), the iframe now has a src pointing to https://js.hsforms.net/ui-forms-embed-components-app/frame.html, triggering the Same-Origin Policy. This means we can no longer access the iframe’s contentDocument, so any DOM query or event binding fails.

We’ve tried next:

window.addEventListener('hs-form-event:on-ready', event => {
   const form = document.querySelector("#hs-form-iframe-0").contentDocument.querySelector('.hs-form');
   const emailInput = form.querySelector("input[name='email']");
   emailInput.addEventListener('keyup', () => {
     // custom logic here
   });
})

But this breaks because accessing the iframe’s DOM is blocked.

What we’re looking for:

• Does HubSpotFormsV4 expose a method to retrieve the form DOM element from the event. HubSpotFormsV4.getFormFromEvent(event) exists but doesn’t return a full DOM element or something we can work with.
• Is there any official workaround or supported way to hook into form field events in the new embed model (e.g. keyup on email field)?
• Can HubSpot provide an option to inject raw HTML or custom script blocks directly into the form or its wrapper, so that tracking/enrichment code can live within the same DOM context (i.e., not blocked by iframe restrictions)?

We’d really appreciate guidance on how to safely extend or interact with forms under the new embedding behavior while remaining compliant with browser security policies.

Thanks in advance!

[evaldas · Accepted solution]

Hi @svirchenko,

I am not aware of any options for working directly with the DOM inside of an iframe for the new HubSpot forms. You can still work with the form field values through the abstracted API calls to retrieve and set the values of a field.

For example, in order to mimic something like the "keyup" event listener, you could use poll the value periodically to look for changes with the getFieldValue() method.

await HubSpotFormsV4.getFormFromEvent(event).getFieldValue('0-1/email');

However, I assume that the goal of those event listeners would be to then manipulate the DOM based on user's input, so ultimately it might still not fit your use case.

[evaldas · Accepted solution]

Hi @svirchenko,

I am not aware of any options for working directly with the DOM inside of an iframe for the new HubSpot forms. You can still work with the form field values through the abstracted API calls to retrieve and set the values of a field.

For example, in order to mimic something like the "keyup" event listener, you could use poll the value periodically to look for changes with the getFieldValue() method.

await HubSpotFormsV4.getFormFromEvent(event).getFieldValue('0-1/email');

However, I assume that the goal of those event listeners would be to then manipulate the DOM based on user's input, so ultimately it might still not fit your use case.

[svirchenko]

Hi @evaldas 

You’re right — the logic works as follows: once the email is validated, the script sends a request to retrieve data, which is then used to populate values into hidden fields. If any of those hidden fields don’t receive a value, they should be made visible.

With your suggestion, I’m able to get the first part of the script working — thank you for that!

[sylvain_tirreau]

---

@svirchenko wrote:

• Can HubSpot provide an option to inject raw HTML or custom script blocks directly into the form or its wrapper, so that tracking/enrichment code can live within the same DOM context (i.e., not blocked by iframe restrictions)?

I think you should submit this idea here: https://community.hubspot.com/t5/HubSpot-Ideas/idb-p/HubSpot_Ideas.

[sylvain_tirreau]

Hi,

Does it work if you do this:

window.addEventListener('hs-form-event:onFormReady', event => {
  const formInstance = event.detail.form;
  const formEl = formInstance.getFormElement();
  const emailInput = formEl.querySelector("input[name='email']");
  emailInput.addEventListener('keyup', () => {
       // Your code
  });
});

[svirchenko]

Hi @sylvain_tirreau , no - according to the documentation, there’s no hs-form-event:onFormReady event. I also tried listening for it just in case, but it doesn’t trigger anything.

[sylvain_tirreau]

Okay. In order to help you better, is it mandatory that the form be in an iframe? If yes, why?

How do you currently insert the form on your page?

[svirchenko]

@sylvain_tirreau I’m currently embedding a form using the provided share code, which inserts the form inside an iframe. I’d really prefer an option without iframe but this is how your embed implemented.

Previously, with legacy forms, the iframe was still present but didn’t include a src attribute — this allowed me to access the form elements (like the email input) using querySelector. However, with the new forms, the iframe has a src pointing to a different origin, which prevents any DOM access due to the Same-Origin Policy.

[sylvain_tirreau]

Ok.

So try something like that:

<div id="your-hubspot-form"></div>
<script src="https://script-url"></script>
<script>
  hbspt.forms.create({
    portalId: 'YOUR_PORTAL_ID',
    formId:   'YOUR_FORM_ID',
    target:   '#your-hubspot-form',
    onFormReady: function(formEl) {
      const emailInput = formEl.querySelector("input[name='email']");
      if (emailInput) {
        emailInput.addEventListener('keyup', function(evt) {
          // Your code
        });
      }
    },
  });
</script>

[svirchenko]

@sylvain_tirreau I just tried this script with legacy form and new form just by switching form ids, it works with legacy form, but doesn't work with new form: onFormReady event is not fired; and it still creates new form in iframe with src attribute, and legacy form without src attribute

[sylvain_tirreau]

I think you'll have some restrictions with the new forms, since they're new. 😕

You can try one last thing, but I'm not sure:

window.addEventListener('message', event => {
  if (
    event.origin.includes('hsforms.net') &&
    event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFieldChange' &&      // or "onInput"
    event.data.payload.fieldName === 'email'
  ) {
    const email = event.data.payload.fieldValue;
    console.log('Email:', email);
    // Your code
  }
});

If you can put your form in raw HTML, that will solve the iframe problem, but I'm not sure it works with anything other than legacy forms (in your legacy form, tab "style & preview").

[svirchenko]

@sylvain_tirreau thanks for the suggestion. Unfortunately, it doesn’t seem to work — the message event isn’t triggered with the new forms, as shown in this example: https://codepen.io/Serhii-Virchenko-the-scripter/pen/jEEgMXw .

Is there any chance that support for inserting custom HTML inside the form might be introduced in the near future?
That would be a great solution — even if the form remains in an iframe, having the script in the same scope would allow much more flexibility and will keep Same-Origin Policy.

[sylvain_tirreau]

I can't answer your question about the feasibility of this: I'm not a HubSpot member ;).

As I mentioned before, I advise you to submit the idea on the appropriate forum.

But frankly, if I were you, and since you seem to be pretty good at development, I'd use legacy forms instead...

[BérangèreL]

Hi @svirchenko and welcome, it's great to see you here! 🤗

Thanks for reaching out to the HubSpot Community and thanks for sharing your valuable feedback, it means a lot to us!

I'll be checking on this for you internally, I'll get back to you as soon as I have more information.

For information, here is the HubSpot Forms API.

In the mean while, I'd love to check on this with our Top Experts: Hi @Anton, @sylvain_tirreau and @stefen are you using the new form in iframe? If yes, do you have any insights to share with @svirchenko, please?

Have a nice day and thanks so much in advance for your valuable contributions! ❤️
Bérangère

[BérangèreL]

Hi @svirchenko, thanks for your patience as I was looking into this for you and thank you so much for your help @sylvain_tirreau!

As @sylvain_tirreau mentioned, I also thought that the Global Form Events API would help you for that!

Otherwise, you could also use the Developer Embed Code if you are on a professional (and higher) subscription?

Let us know if this works?

Thanks and have a great weekend!
Bérangère

[svirchenko]

Hi @BérangèreL , thank you so much for taking the time to look into this — I really appreciate your help, and thank you again @sylvain_tirreau  for your input as well!

Just to clarify: the Developer Embed Code you’re referring to seems to be part of the HubSpot CRM Embed feature, which is intended for displaying interactive HubSpot interfaces inside custom apps.
However, in my case, I’m simply embedding a HubSpot form on my website using the provided embed code — not embedding CRM UI components.

Unfortunately, the suggestion doesn’t quite solve the issue I’m facing with the new form iframe structure and restricted access due to the src attribute.

Thanks again, and I hope you both have a great weekend as well!

[BérangèreL · Accepted solution]

Hi @svirchenko, I hope that you are well!

From what I can see, it seems that this is working as expected.

In the new editor, you can't interact with the framed form, you need to use the developer form (equivalent of raw html) but you do need to have a Pro+ subscription to get that embed code, see screenshot below.

Let me know if you cannot find the Developer Form @svirchenko?
If that's the case, please send me via private message your Hub ID.


Thanks so much to all of you for your help!

Have a lovely day!
Bérangère