Capture cookie info with hidden form fields

SOLVE
marclosper
Participant

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:

 

Screenshot 2019-03-07 at 13.24.16.png

 

Any help with be much appreciated.

 

Thanks,

Marc

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
cbarley
Solution
HubSpot Alumni

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. 

 

View solution in original post

0 Upvotes
6 Replies 6
cbarley
HubSpot Alumni

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

0 Upvotes
marclosper
Participant

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

0 Upvotes
cbarley
Solution
HubSpot Alumni

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. 

 

View solution in original post

0 Upvotes
marclosper
Participant

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

ianong
Member

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.

0 Upvotes
cbarley10
Contributor

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?).