Help: Javascript Snippet + Google Tag Manger to fill hidden field from cookie value

bpotter
Contributor

Hello!

 

I have read this article, but it's a bit over my head implementing the solution: https://community.hubspot.com/t5/Content-Design-Questions/Javascript-Cookie-Values-passed-into-Hubsp...

 

I'm using some JavaScript code in Google Tag Manager that reads a stored cookie, then puts that cookie's value in the field in my HubSpot form using the form name I tell it to. I have attached the javascript file to this post.

 

This is the page I'm using to test it: https://amsunsolar.com/test-hubspot-form/?gclid=123456 I've confirmed the cookie is being stored in the browser and the Google tag is firing. I think it has something to do with the form being in an iframe and I don't know how to target the field in the iframe.

 

This is the Javascript snippet. I modified it (line 33) to target the specific field name because it's tied do a Salesforce custom field. Hence the "__c":  https://pastebin.com/mbFZspkV

 

Any help would be appreciated!

0 Upvotes
8 Replies 8
dennisedson
Community Manager

@bpotter

does your form script look something like this 

   hbspt.forms.create({ 
    portalId: 'XXXXXX',
    formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
    onFormReady($form, ctx){
   	assignTrackingParameterToCookie('gclid', 'hubspot');  
   	}
  })


the functions can go in a js file on the site.  they wont be called until the form is loaded.  you have to wait for the form to load before the script will work.

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes
bpotter
Contributor

It doesn't. But, now that I know that's how you work with the JavaScript embed code (not the Wordpress shortcode), I'll give that a shot and post results.

0 Upvotes
bpotter
Contributor

This is what my embed code looks like now:

 

<!--[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: "4945119",
	formId: "5d7fdf6d-964b-4825-b563-c23465f042bb",
	onFormReady($form, ctx){
   	assignTrackingParameterToCookie('gclid', 'hubspot');  
   	}
});
</script>

Chrome is throwing this error in the console:

Couldn't find target container #hbspt-form-1543608428963-1875615099 for HubSpot Form 5d7fdf6d-964b-4825-b563-c23465f042bb. Not rendering form onto the page

 

0 Upvotes
dennisedson
Community Manager

@bpotter,  sorry if i confused you, you still need the rest of the code from that javascript block you had. it just need to be loaded on the page either in the footer or in a referenced js file.  

my console is saying that the assignT... function is not defined which indicates that this is not on the page:

function getCookie(name) {
  var value = '; ' + document.cookie;
  var parts = value.split('; ' + name + '=');
  if (parts.length == 2)
    return parts.pop().split(';').shift();
}
 
function setCookie(name, value, days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = '; expires=' + date.toGMTString();
  document.cookie = name + '=' + value + expires + ';path=/';
}
 
function getParam(p) {
  var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
 
function assignTrackingParameterToCookie(fieldParam, formType) {
  var field = getParam(fieldParam),
    inputs;
  if(field) {
    setCookie(fieldParam, field, 365);
  }
  if(formType == 'gform') {
    inputs = document.querySelectorAll('.' + fieldParam + ' input[type="text"]');
    assignCookieValueToFormInput(fieldParam, inputs);
  } else if(formType == 'hubspot') {
    inputs = document.querySelectorAll('.hs-input[name="gclid__c"]');
    assignCookieValueToFormInput(fieldParam, inputs);
  }
}
 
function assignCookieValueToFormInput(fieldParam, inputs) {
  var field = getCookie(fieldParam),
    length = inputs.length;
  if(field && length) {
    for(var i = 0; i < length; i++) {
      inputs[i].value = field;
    }
  }
}

make sure to add that somewhere

 

 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes
bpotter
Contributor

I think what's happening is the HubSpot form is being loaded in an iframe. I'm researching now how to target inputs in an iframe, but I don't think I can because of cross-origin script blocking..

bpotter
Contributor

To be clear, that javascript code is being loaded on the page using a Google Tag. But the HubSpot form is in an iframe on the page (this is a wordpress site). So, I can execute functions from the code in my console, but not when I select the fields from the form, because they are in an iframe..

0 Upvotes
bpotter
Contributor

So, I think because I'm embedding in a WordPress site. I can't seem to get any jQuery functionality to work in the embed code. Such as:

 

<!--[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: "4945119",
	formId: "5d7fdf6d-964b-4825-b563-c23465f042bb"
	onFormReady($form, ctx){
    $('input[name="gclid__c"]').val('Brian').change();
   	}
});
</script>

dennisedson
Community Manager

@bpotter, did you toggle to unstyled in the form options?  That should pull not as an iframe

https://knowledge.hubspot.com/articles/KCS_Article/Forms/How-do-I-style-my-embedded-form 

click the style your form...external stylesheet

 

on another note, unless you have set it up, you will have to use jQuery('.element')  rather than $('.element')

 

hope this gets you somewhere.  sorry for delay in response!

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!