Populating hidden form fields with information stored in cookies

Hey @jennaovett , I hope you’re keeping well :slightly_smiling_face:

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:

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! :slightly_smiling_face:

Best,

Cathal