Passing UTM parameters and refferal url with the developer Embed code

Develop, Build & Integrate APIs & Integrations
, ,
1

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

2

Hi @JeetuDubey,

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

For legacy forms:

Hope this helps!

3

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-form/m-p/491554/highlight/true#M1584