Capture cookie info with hidden form fields

[marclosper]

Hi guys,

I'm trying to capture cookie info from these cookies:

• STYXKEY-huddleReferer
• STYXKEY-huddleSource
• STYXKEY-huddleTracker

I've insersted each of the below as hidden form fields:

• where_hear_about_huddle__c
• search_cookie_source__c
• search_cookie_medium__c

I've udpated the Hubspot embed code as below but I'm unable to pull through the cookie data...

<!--[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: "MY-HUBSPOT-ID-XXXX",
    formId: "MY-FORM-ID-XXXX",
    onFormSubmit: function($form) {
      jQuery('input[name="web_activity_most_recent__c"]').val('Request_a_Demo_Generic').change();
      jQuery('input[name="search_cookie_source__c"]').val(readCookie('STYXKEY-huddleSource')).change();
      jQuery('input[name="search_cookie_medium__c"]').val(readCookie('STYXKEY-huddleReferer')).change();
  jQuery('input[name="where_hear_about_huddle__c"]').val(readCookie('STYXKEY-huddleTracker')).change();

    },
    redirectUrl: "/get-started/confirmation/"
  });
</script>

The cookies are being created and capturing info - snapshot below:

Any help with be much appreciated.

Thanks,

Marc

[cbarley]

Hi @marclosper , can you reply with the page you're working on and your HubID? Thanks!

[marclosper]

Hey @cbarley , sure please see below:

Page: https://www.huddle.com/get-started

ID: *removed*

Before the switch we had it all setup in Marketo with workflows & smart lists - code  snipet below:

<script src="//app-lon03.marketo.com/js/forms2/js/forms2.js"></script> 
<form id="mktoForm_1184" class=""></form> 
<script> 
MktoForms2.loadForm("//app-lon03.marketo.com", "MKT-ID", 1184, (function(form){ 
form.setValues({ 
"Web_Activity_Most_Recent__c":"Downloaded_Huddle:Secure_by_Design_ISO", 
"Where_hear_about_Huddle__c":readCookie('STYXKEY-huddleTracker') 
}); 
form.onSuccess(function(values, followUpUrl){ 
location.href = "/sites/default/files/white-papers-files/huddle_security_whitepaper_mar_2016.pdf";
return false; 
}); 
})); 
</script>

So just basically need the value of the "where_hear_about_huddle__c" input to be set to the value of the STYXKEY cookie upon form submission..

Any help/direction will be really appreciated.

Thanks,

Marc

[cbarley · Accepted solution]

Hi @marclosper , this seems fine to me. How are you getting the cookies from the page? I'm using this function on my page to get the Cookies by name:

window.getCookie = function(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

Then, I change the value of the hidden field on submit:

hbspt.forms.create({
   portalId: "3430672",
   formId: "983fd305-bdd3-40be-bc25-59be5f5650a8",
   css: "",
   onFormSubmit: function($form){
      $("input[name='cookie']").val(getCookie("hubspotutk")).change();
   },
   redirectUrl: "http://www.playtimepottery.net/redirect"
});

This worked for me as you can see on my contact: http://prntscr.com/mv4b7n

If you check out this page and inspect it with Chrome Dev Tools you can see the code for yourself: https://www.playtimepottery.net/on-form-submit

That said, the issue is definitely with how you're grabbing the cookies. When I plug readCookie('STYXKEY-huddleTracker') into the console, I get undefined. I'd go ahead and use the code I wrote above, which works, instead of the readCookie function as it doesn't appear to be behaving as expected. 

[marclosper]

Legend! Thanks so much for your help @cbarley . The script to read the cookies worked like a charm! 

[ianong]

Hi Connor,

i saw the solution you provided here. can i check how can i implement this.

i am using hubspot CMS and CRM. Would like to push hubspotutk ID to a hidden field too.

[cbarley10]

Hi @ianong , I'm no longer a HubSpot employee but i'd still be happy to help out. The JS snippet I provided should certainly work for any form that you're embedding onto a page. If you're embedding the form, you must use the callbacks like onFormReady or onFormSubmit since forms are dynamically loaded to a page with JavaScript and simply placing the JS on your page won't guarantee the form is loaded on the page yet. You should also make sure that the "name" attribute in your JS like my example:

$("input[name='cookie']").val(getCookie("hubspotutk")).change();

exactly matches the internal value of your hidden form field.

Finally, you should also be sure to toggle the "unstyled form" button for your form as styled forms are loaded in via an iFrame and the callbacks cannot be utilized:

http://prntscr.com/odv2z5

If this all checks out, I'd be happy to help if you send over a page with your form on it so I can take a look at your code. If I can't troubleshoot further, I'm sure @IsaacTakushi , @Derek_Gervais  or @lscanlan can help you out here (sup guys?).