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

[bpotter]

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!

[dennisedson]

@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.

[bpotter]

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

[dennisedson]

@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

[bpotter]

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

[bpotter]

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]

@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!

[bpotter]

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]

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.