Passing Cookies To Hidden Form Fields

[disruptiveads]

Hi all,

I have a question that maybe you all can help with. 

I have a hidden field on my form to capture UTM paramters. I typically do this through the creation of a Cookie on my website to capture and store the data - and then input it into the hidden form fields using the input id.

However, HubSpot doesn't seem to have an input id on hidden form fields - meaning that the Cookie I've created can't put the information into the hidden field - as you can see below.

I've done this same setup for lots of forms, and HubSpot is the first one I've run into that doesn't have an input id for the hidden form fields. 

How can I capture the data in the hidden field without an input id?

[Derek_Gervais]

Hey @disruptiveads ,

The name property of each input on a HubSpot form is the same as the internal name of the corresponding HubSpot property. Updating the value using jQuery is pretty straightforward:

$('input[name="firstname"]').val('Brian').change(); 

If you're looking to use only vanilla JavaScript, you could try something like this:

document.querySelector("input[name='firstname']").value = "Brian";

Check out the following forms doc for more info on how to work with HubSpot forms: https://designers.hubspot.com/docs/building-blocks/forms

[disruptiveads]

Hey @Derek_Gervais ,

Thanks for the response. I tried adding that code to Google Tag Manager, but it still didn't pull in the cookie value (I adjusted the names - but nothing happened.)

Any clues as to why that wouldn't work? 

[Derek_Gervais]

Hey @disruptiveads ,

I'm not super familiar with the ins-and-outs of Google Tag Manager, but a common issue here is form-related code executing before the HubSpot form has been fully loaded on the page.

To rectify this, you can either customize the form embed code, or listen for a global form event. Check out the docs linked here:

https://developers.hubspot.com/docs/methods/forms/advanced_form_options

https://developers.hubspot.com/global-form-events

[disruptiveads]

@Derek_Gervais, let me give a little bit more context.

I have a cookie set up on my website to capture the following UTM parameters:

• gclid
• fbclid
• gacid
• utm_source
• utm_program
• utm_campaign
• utm_content
• utm_term

Here is the code I am using to capture the UTM parameters as cookies:

<script>
  
function createCookie(name,value,days) {
    var expires = "",
    baseDomain = '.pattern.com';
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
   //now setup cookie
    document.cookie = name + "=" + value + expires + "}; domain=" + baseDomain + "; path=/";
}

  
createCookie("fbclid","{{url - fbclid}}",30);
createCookie("gacid","{{url - gacid}}",30);
createCookie("gclid","{{url - gclid}}",30);
createCookie("msclkid","{{url - msclkid}}",30);
createCookie("utm_campaign","{{url - utm_campaign}}",30);
createCookie("utm_content","{{url - utm_content}}",30);
createCookie("utm_device","{{url - utm_device}}",30);
createCookie("utm_program","{{url - utm_program}}",30);
createCookie("utm_source","{{url - utm_source}}",30);
createCookie("utm_keyword","{{url - utm_keyword}}",30)
  
 </script>

I've used this code on multiple websites and it works to capture the UTM parameters. 

I then typically use this code to add the cookie value to the hidden fields on my form:

<script>
(function () {
  var selector = "#input_1_14"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - fbclid}};
};
      var selector = "#hs-messages-hide-welcome-message"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - gacid}};
};
      var selector = "#lastname-655a4135-b40e-4492-ac12-1d3d0d4d1f52_5785"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - gclid}};
};
   var selector = "#input_1_8"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - msclkid}};
};
       var selector = "#input_1_8"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_campaign}};
};
       var selector = "#hs-input"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_content}};
};
       var selector = "#input_1_8"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_device}};
};
       var selector = "#input_1_12"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_program}};
};
       var selector = "#utm_source-655a4135-b40e-4492-ac12-1d3d0d4d1f52_1235"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_source}};
};
       var selector = "#input_1_10"; //Enter your CSS Selector for the hidden field here
      if(document.querySelector(selector)){
      document.querySelector(selector).value = {{cookie - utm_keyword}};
};
 
})();
</script>

The "#input_1_10" is usually how I direct the cookies into the correct hidden form fields. This is typically the input id. 

With HubSpot hidden forms, the input id does not exist. 

So now, I cannot pass the cookie information into the HubSpot form field and I need to be able to do that. 

I hope this clarification helps.

[TLevytalll]

Hi, is there any solution to the problem above?

Is there an easy way to ensure that all utm parameters will be sent to Hubspot via cookie to hidden form fields with corrisponding 5 utm fields in Hubspot? For example, if I have a fully dynamic utm tagged Google ads final destination url, and I have all these utms configured in Hubspot, will I be able to drill down Hubspot reports without using the default utm_campaign that the Hubspot system uses? Can I just see the utms in Hubspot that were stored in the final destination url in my Google ad?

[disruptiveads]

@Derek_Gervais  Thanks for the links.

I still havne't been able to get it to work. I think maybe one issue is that my form is not embedded, it is built in through a HubSpot landing page. 

Because of that, I can't access the embed code.