I have an urgent issue and am hoping someone here has the answer. I am trying to pass a cookie value into a hidden field when my contact form is submitted.
These are the tools I am using to try and complete this:
HubSpot Form
Google Tag Manager
These are the steps I have taken (this works with other form builders like Gravity Forms, but not with HubSpot forms).
Created a custom field in HubSpot called “msclkid”.
Added the field “msclkid” to my contact form as a hidden field.
Created a cookie on my website via Google Tag Manager that stores the value of the “msclkid” value.
Created a custom html tag that passes that msclkid cookie value into the hidden field “msclkid”.
Everything works in the process except for step 4.
Here is the code I am using to pass the values into my hidden form field. Keep in mind, HubSpot hidden form fields do not have ids, so I am using the name element.
<script>
// msclkid
(function () {
var value = "{{url - msclkid}}" //fill with variable which information should be written into the field
var selector = "input[name='msclkid']" //fill with CSS Selector that identifies the form field
var field = document.querySelector(selector)
if(field){ field.value = value; }
})();
</script>
Does anyone see any issues with my code? The value {{url - msclkid}} is the custom GTM variable for my cookie.
Here is an image of the div for the msclkid:
I’m having the same issue. I am also trying to pass a first-party cookie value into a custom hidden field on HubSpot on form submission. I have searched high and low all over the Hubspot community forums, YouTube, everywhere, and have found no answers. I can’t believe this is not possible. Please somebody from HubSpot respond with an actual solution.
For those trying to figure this out, here is what I got working (does not trigger any of my debug warnings). The part that fails is the very last step of passing the value to Hubspot on submit.
Note: this form is embedded in a modal, hence the event listener when the modal is opened. If you’re form is directly embedded on the page, you might change the event listener to a regular onload or onready event. Also note: you will need to update the code with your Hubspot ID, Form ID, cookie name, and custom hidden field name as you named it in Hubspot.
<div class="modal-body">
<script src="https://js-na2.hsforms.net/forms/embed/developer/REPLACE_WITH_ID.js" async defer></script>
<div class="hs-form-html"
data-region="na2"
data-form-id="REPLACE_WITH_FORM_ID"
data-portal-id="REPLACE_WITH_ID"></div>
<script>
(function(){
// gets cookie value for affiliate_id
function getAffiliateCookie() {
var name = "affiliate_id=";
var decoded = decodeURIComponent(document.cookie);
var parts = decoded.split(';');
for (var i = 0; i < parts.length; i++) {
var c = parts[i].trim();
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var affiliateValue = getAffiliateCookie();
console.log("[Debug] Found affiliate_id cookie value:", affiliateValue);
function runAfterModal() {
setTimeout(function(){
try {
var container = document.querySelector('.hs-form-html[data-form-id="REPLACE_WITH_FORM_ID"]');
if (!container) {
console.warn("[Debug] HubSpot form container not found.");
return;
}
// drill down through hubspot class names to targeted input field, replace with your own
var field = document.querySelector('[data-hs-island="true"] .hsfc-Renderer .hsfc-Form .hsfc-Step__Content .hsfc-Row input[name="0-1/affiliate"]');
if (!field) {
console.log("[Debug] Can't find hidden field affiliate");
}
field.value = affiliateValue || "";
console.log("[Debug] Affiliate field set to:", field.value);
} catch(err) {
console.error("[Debug] Error setting affiliate field:", err);
}
}, 600); // 600ms delay
}
// listen for click to open modal
document.addEventListener("click", function(e) {
var el = e.target;
while (el && el !== document) {
if (el.getAttribute && el.getAttribute("data-target") === "#modalhubspot") {
console.log("[Debug] Detected click on HubSpot modal trigger.");
runAfterModal();
break;
}
el = el.parentNode;
}
});
})();
</script>
</div>
Hi @mbird22 and a big warm welcome! We’re so happy you’ve joined us here.
Thank you for reaching out to the HubSpot Community, and I sincerely appreciate your patience as we got back to you.
Could you share if the form you’re working with was created in the new editor?
In the meantime, here are some helpful resources you might find useful:
- Global form events
- Legacy forms
And let’s see if some of our wonderful experts can chime in as well! Hi @MichaelMa, @Mike_Eastwood and @SteveHTM do you have any suggestions or insights to support @mbird22, please?
Wishing you a fantastic day and thanks you so much!
Bérangère
Hello BérangèreL,
Thank you for responding. I’m new to HubSpot, I didn’t realize there was more than one form editor. After checking, it appears I am using the new editor. I see in the Global Form events resource you shared that there is a setFieldValue method. I have not tried it yet, but hopefully this can solve my problem. I will reply tomorrow when I test.
Thank you again for your help,
Emily
I found a solution! It looks like Hubspot code was re-rendering the form after the modal opened. But after setting some safe guards, everything works. I ended up still using vanilla javascript method to get and set. But in the future will likely clean this up with setFieldValue method, which looks more elegant. Thanks again for your help.
Great to hear you found a solution @mbird22!
Thanks for sharing your approach, and feel free to keep us posted as you refine it further.
Have a lovely day!
Bérangère
