Populating hidden form fields with information stored in cookies

[jennaovett]

Hello HubSpot Community,

I am trying to store the following values in a cookie (or various cookies) and later use the cookie to populate hidden fields on an embedded HubSpot form:

1.) UTM parameters

2.) GCLID (this could be included in UTM parameters, but wanted to call it out specifically as it’s a key value I’m seeking to collect)

3.) Google’s Client ID: _ga (I think this is set by Google already, but am having trouble extracting it)

I have read numerous articles on how to accomplish this and believe I understand the concept  — the point of setting these cookies is to ensure we don’t lose the data when the user visits multiple pages of our website before converting on a form. I also understand that if a user enters the site with UTM parameters in the URL and, without leaving that page, submits a form we will get these values no problem... so that is a non-issue. 

So far, I think I’ve been able to set and store the cookie(s), but I have not been able to populate the form fields with this information. I’ve tried editing the code directly, as well as using GTM to set, store and extract the cookie information without success. That said, I am an intermediate coder at best and my understanding of GTM is limited so it’s hard for me to troubleshoot efficiently. 

I’ve currently removed any code and paused all GTM tags because nothing was working, but the form I am using to test this process lives here: https://headrushtech.com/jenna-test (ignore the styling). I plan to hide the fields, but for now have left them visible to make testing easier. 

Some of the main methods I have tried include:

• Store GCLID in Cookie and Send to Hubspot
• How to capture UTM Parameters in a Cookie and transfer them to a (hidden) Form Field - YouTube
• Solved: HubSpot Community - Re: Send event from hubspot to google analytics also set form field when...
• HubSpot Community - Pass cookie information to the form - HubSpot Community
• HubSpot Community - Help: Javascript Snippet + Google Tag Manger to fill hidden field from cookie va...

I've created the necessary contact properties and know that the name needs to match exactly when I use it in the code:

• utm_campaign
• utm_medium
• utm_source
• utm_content
• utm_term
• gclid
• cid

I have also toggled on the "set as raw HTML form" setting for the form I am using.

Additionally, thought I’d mention that we use Magento for our CMS (this seems kind of non-stardard so not sure if it's causing any issues?) Also, our website is poorly coded in my opinion and I'm seeing a lot of errors in Console that might prevent this process from working, though I'm really not sure. 

It would be really appreciated if you don’t point me to another community post, as I feel like I’ve read through so much and just need help with my specific situation / MarTech stack. 

I'm hoping someone can tell me what specifically I need to create in GTM (tags, triggers, variables, etc.) and/or what specifically I need to add to the form embed code and where / in what order.

Thanks in advance for your help!!!!

[cathalhopper]

Hey @jennaovett , I hope you're keeping well 🙂

Before diving in to this I think you may find it easier to use the submit form data API as you can create a custom HTML form and submit the information you want in HubSpot via the API, allowing you more freedom to customise the form as desired.

You can use the methods outlined in this external article: https://stackoverflow.com/questions/10730362/get-cookie-by-name
to get cookie values for submitting via API/adding to the form input fields via JS.

Otherwise to answer your question you can target the input fields on the form using javascript to pass the cookie information to them, to fill them out.

For example targeting a visible field can be done using the input ID with document.getElementyByID
Here's an example for the input field for your gclid:
document.getElementById("gclid-d0cafa60-0992-43f0-aa2d-7edc0fbd3728").value = "Hello, here is input in the gclid field";

Hidden fields don't have Ids, so in those cases you will fill them out using the input name HTML values:
document.querySelector('input[name=gclid]').value = "Hello, different input";

You can get Id or name values by inspecting the fields in dev tools or the input names will generally be the same as the internal values for the properties.

You can get cookie values by using either of the functions outlined in the first two responses in this external article which covers this very well! https://stackoverflow.com/questions/10730362/get-cookie-by-name
Where they list an option via iterating over an array, or using regex - just wanted to mention this as you said you had some trouble extracting the _ga cookie.

So the end result might look something like adding this javascript to your page/embed code:
document.querySelector('input[name=cid]').value = getCookie("_ga"); 
Which would fill out your hidden cid field with the cookie value for _ga.

If adding to the embed code you will want to add  onFormSubmit: function($form) {
// YOUR SCRIPT HERE
} as outlined in the developer docs to the embed code.

For UTM parameters the easiest way is probably to use the URL search params interface:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
I'm not familiar with GTM so can't assist there, if anyone has any advice regarding that please drop it here!

Hopefully this helps! 🙂 

Best,

Cathal

[jennaovett]

Thanks for the thorough response, Cathal! 

For starters, I am trying to see if I can get any one of these values passed through to the form field on submission. I tried implementing your example for the cid, and you should now be able to see the code I'm using on my test page: https://headrushtech.com/jenna-test

And, here it is for your convenience:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "5957371",
formId: "d0cafa60-0992-43f0-aa2d-7edc0fbd3728",
onFormSubmit: function($form) {
document.querySelector('input[name=cid]').value = getCookie("_ga");
}
});
</script>

I went ahead and made the cid field hidden, as this is how it will ultimately need to be (good to know this does make a difference in how things are coded — appreciate you calling out that difference!).

Sadly though, it's not passing the _ga cookie into the cid hidden field. That said, I haven't actually set the _ga cookie as I was under the impression Google automatically does this. But, maybe that is not the case? What's perhaps confusing is that when I inspect the page after entering the site through a Google search I can see the _ga cookie, so I asummed it's set and stored and all I need to do is get it. Can you confirm? 

Regardless, I think I could still use some guidence on setting and storing the cookie as well. 

Thanks in advance for looking at this!!!!! 

[cathalhopper]

Hi @jennaovett , glad I could be of help!

When I head to that page and try to run the getCookie(name) function in the console it errors, it looks like you haven't added that function to your JS yet.

You'll want to add that first, you could use the function that is listed here if you did not want to create one from scratch: https://stackoverflow.com/questions/10730362/get-cookie-by-name

The _ga cookie is present, you can see all of the cookies by pressing F12 to open dev tools, head to the console tab > type document.cookie > it will show you the cookies on your browser currently

Once you add that getCookie function to your JS the addition to your embed code should start working!

[timsullivan]

@cathalhopper 

Hi Cathal - is there any reason our form being embedded via iframe on a webflow page might interfere with setting the relevant value? Here's my page:

https://www.greenfig.com/schools/dms/enrollment/forbes-enrollment?gclid=Cj0KCQjwqrb7BRDlARIsACwGad4w...

I'm working with a js developer and we just haven't been able to get a gclid value to insert into the hidden gclid field. Right now we're doing a hacky thing where we target the url values in anything that links to this page and append the gclid to them, which allows hubspot native parameter capturing functionality to get the gclid, but I'd prefer a proper solution. 

Our main question right now is whether the form being embedded in an iframe is the problem. Would be grateful for any light you can shed. 

Tim

[cathalhopper]

Hi @timsullivan ! As far as I understand embedding it as an iframe should not stop this from working.

You will need to use the following code in your case: document.querySelector('input[name=gclid]').value = "valuehere"; as the name of your input field is gclid, and not cid as it was jennaovett.

When using this method the name of your input field will generally be the same as the label in HubSpot, so if the label is gclid you should use name=gclid, if the label were utm_content you should use name=utm_content.

Hopefully that helps 🙂

[jessiew]

@cathalhopper Thanks for your thorough answer here. I am also running into issues when I try to set this up. 

I am using Google Tag Manager to run this script: 

document.querySelector('input[name=gclid]').value = "Hello, different input";

 But it doesn't pass the value "Hello, different input" into my hidden gclid field. 

However, when I ran the same function in the console, it did pass the data into the hidden form field.

My question is, how do I get this to work? 

My biggest assumption is that since I am using Google Tag Manager, the data is not passing to the hidden field because the parent window and the iframe are different websites. The parent page is my website, while the form embed is a HubSpot iframe. This would probably make the data impossible to pass over unless I can embed Google Tag Manager on the HubSpot iframe.

Do you know if it is possible to add the Google Tag Manager code to a specific form?

If not, what is the best way for me to go about getting the cookie to data into my hidden field?

edit: typo

[cathalhopper]

Hey @jessiew  - Looking into this further on external resources I found mention that GTM (or code on your page) can't interact with third party DOM elements which is why you can't interact with that iframe using that code through Google Tag Manager. The code will need to be added to the HubSpot embed code as outlined here by adding in the onFormSubmit function to your embed code:  onFormSubmit: function($form) {
// YOUR SCRIPT HERE
} 

alternatively you can add the GTM code to run on your page which you are iframing from > or the best alternative would be directly adding in the HubSpot form instead of via an iframe if possible.

Hopefully this helps out 🙂

[jessiew]

@cathalhopper Thanks for the reply. 

I actually went a little further into inspecting the form and I have a couple of new pieces of information with you that I thought I would share.

1. The form is embedded on a HubSpot landing page. I don't believe this gives me the option of adding the onFormSubmit function to the embed code.  If I can, I am not sure how to do it, and pointing me in the right direction would be helpful.
2. The form is actually set as a raw HTML form, which I didn't realize earlier.  
   
   

And can you clarify what you mean by this?  I am not sure I am following.

---

alternatively you can add the GTM code to run on your page which you are iframing from > or the best alternative would be directly adding in the HubSpot form instead of via an iframe if possible.

---

[cathalhopper]

Hey @jessiew ! 
You could use the form share/embed code on a HubSpot page instead of the form module, this would allow you to edit the embed code, but this may not be desired > alternatively you could add javascript to your HubSpot page where your form is located, to run the code to edit the form field values.

The ideal time to do this would be after the form loaded, if you try to manipulate HTML dom content before it has loaded it'll error/fail to work.

Because you would not be doing this through an iframe, and it would happen on the page itself, you wouldn't run into the limitation that happened with the iframe. Otherwise instead of adding the form to your page via the iframe of your HubSpot page, you could just directly add the form embed code to your page, which would let you modify the embed code.

Hopefully that helps a bit 🙂

[alivia]

Hello! 
We are using this to gather a cookie id and identify page view logs, super excited to have gotten the code to work.

However now we'd like to have this on all of our landing pages, and therefore add it to a template and not have to put in the form code (since people use different forms on the page). Can we have this trigger for any form on the page? Or get the form id as a variable that's already present on the page?

Thanks!

Alivia

[cathalhopper]

Hi @alivia !

Great to hear you have that working!

After some testing around this I found that you could hypothetically have this on a page template or JS file to trigger on many pages but there are some things to keep in mind around that:

Firstly you'll want to ensure you use something like window.onload to ensure the scripts only load after the form has fully done so - otherwise you might error in the script by trying to assign a null cookie/valid value to a field that doesn't exist.

The other thing to keep in mind is that if you don't have a form on the page and you add this to a script it would throw errors because it's attempting to run for fields that don't exist.

Otherwise you could have a form with hidden fields you want to pass values to, and in the template markup you could have an onload function that adds any values you need to those hidden fields.

One last thing worth mentioning is that changing values on the page level when the code is on the template or a JS file will only work if the fields are hidden. From testing it looks like this is down to how the form gets field values from visible versus hidden fields. If you wanted to modify visible fields you will need to edit the embed code. So if you were attempting to test this with the fields visible first it's worth noting it won't work - it will only work for hidden fields!

Hopefully that helps 🙂