Passing hubspotutk with an iframe embedded form

Developer Support APIs & Integrations
1

We have a HubSpot form that is embedded on our site via a WebFlow page that has an iframe that contains the page. Unfortunately, the user journey before the form is submitted is not being tracked despite hubspotutk cookie being set to our TLD and available at the time of submission. I imagine it is related to the iframe or that the hubspot form is not on our TLD.
How can I pass in the hubspotutk cookie value on the form submission using an embedded HubSpot form?

2

Hi, @ShadSuper :waving_hand: Thanks for your question. It sounds like a CORS issue, but it’s hard to say without more information. One quick test we can do to verify the cookie present is:

  • use a browser session where you’ve already visited HubSpot tracked pages (so our hubspotutk is already present)
  • open up your page inspector
  • click the console tab
  • paste this code into your dev console
    document.cookie.split(';').find(c => c.includes('hubspotutk'))​

This should return a value and not “undefined”. My result:

' hubspotutk=de33c49d02ae603...'

Hey @alyssamwilie @TomM2 @GiantFocal, do you have any additional suggestions or troubleshooting tips for @ShadSuper?

Thank you very much for taking a look! — Jaycee

3

Thanks Jaycee. Yes, as noted in my original request “despite hubspotutk cookie being set to our TLD and available at the time of submission”, the cookie value is set in the browser window. It may not be available in the iframe.

4

Hey @ShadSuper yes this is due to your iframe, the iframe doesn’t have the HubSpot tracking code within it so it’s not going to track user info.

To my knowledge I haven’t seen a way around this due to the dynamic creation of both the HubSpot form and the iframe.

Unless your HubSpot form is set as a raw html form it will also load within an iframe, which will give you an iframe within your iframe and it’s not possible to edit this iframe so you can’t pass data to it.

If you have it set as a raw html form, you also won’t be able to style it unless you can add css inside your webflow iframe.

There *may* be some custom JS to achieve this, but to my knowledge it’s not possible. You could try something like this.

The only other options would be to use another form integrated with your HubSpot form if it’s possible to embed another one outside of an iframe.

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

5

Thanks for this reply Tom. I am actually already passing in values to the iframe and populating the hidden form field values for my utm parameters which are hidden form fields in my HubSpot form and they are being recorded correctly with the newly created contact record. Assuming I can pass the value of the hubspot cookie down to the hubspot form, where do I add it? As a new hidden form field? The form editor requires a Contact field to map to and hstrackinguid is not one of the available fields on the contact record.
I can pass the value to the iframe, but where shoudl it be passed in the HS form?

6

Hi @ShadSuper
Could you please outline how you’re passing in the utm parameters to an iframe embedded form?

7

Thanks for this reply Tom. I am actually already passing in values to the iframe and populating the hidden form field values for my utm parameters which are hidden form fields in my HubSpot form and they are being recorded correctly with the newly created contact record. Assuming I can pass the value of the hubspot cookie down to the hubspot form, where do I add it? As a new hidden form field? The form editor requires a Contact field to map to and hstrackinguid is not one of the available fields on the contact record.
I can pass the value to the iframe, but where shoudl it be passed in the HS form?