Passing UTM parameters and refferal url with the developer Embed code

[JeetuDubey]

I am using developer embed code to embed hubspot form in my site . 

I want to track UTM params with reffreal url but it is not happeing there. 

I have used custom JS to pass cookie values to the hidden values but it is not passing with the form.

The code I tried :

const $refPageURL = jQuery('input[name="0-1/referral_page_url"]');

$refPageURL.val(sessionStorage.getItem("customReferrer"));

$refPageURL.change();

Even when I tried keeping the value inside a visible text field, it was automatically cleared on click because HubSpot’s form script reinitializes the field inputs on interaction.
After further inspection, I discovered a hidden field named hs_context, which contains all field values in JSON format. This JSON object is what HubSpot actually uses for submission — meaning any custom values set through regular inputs are overwritten by what’s inside hs_context at the time of submit.
I attempted to inject our custom data directly into the hs_context object, and while the field shows the correct value in the form, HubSpot still doesn’t allow these script-injected values to persist through submission. This behavior appears to be part of HubSpot’s built-in data validation and security layer.
Code : 

var contextField = jQuery("input[name='hs_context']");

var contextData = JSON.parse(contextField.val());

var customReferrer = sessionStorage.getItem("customReferrer") || "Default Referrer";

contextData.fieldValues["0-1/referral_page_url"] = customReferrer;

contextField.val(JSON.stringify(contextData));

Please let me know the best way to pass custom values with the hubspot form so it can get submitted with the form

[evaldas · Accepted solution]

Hi @JeetuDubey,

In order to work with the HubSpot forms, you will need to use the global form events:

https://developers.hubspot.com/docs/api-reference/global-form-events/guide

For legacy forms: 

https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms

Hope this helps!

[Christensen · Accepted solution]

Hey @JeetuDubey, when using the embed code of a form, you need to consider that it will be loaded in an iframe and modifying values inside an iframe is not best practice. You'll run into cross-origin restrictions and it's generally a security nightmare.

I would suggest you try this suggestion as a workaround that's been proven to work in another thread: https://community.hubspot.com/t5/Tips-Tricks-Best-Practices/How-to-pass-UTM-parameters-to-HubSpot-fo...

[evaldas · Accepted solution]

Hi @JeetuDubey,

In order to work with the HubSpot forms, you will need to use the global form events:

https://developers.hubspot.com/docs/api-reference/global-form-events/guide

For legacy forms: 

https://developers.hubspot.com/docs/cms/start-building/features/forms/legacy-forms

Hope this helps!