Javascript Cookie Values passed into Hubspot Form

[bpotter]

Hello!

I have read this article, but it's a bit over my head implementing the solution.

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":

// Pass Tracking Parameters to a Form on Another Page Using GTM
// http://zackphilipps.com/store-gclid-cookie-send-to-hubspot/

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;
    }
  }
}

assignTrackingParameterToCookie('gclid', 'hubspot');

Any help would be appreciated!

[bpotter · Accepted solution]

Here is the "solution" I discovered:

You cannot target elements within an iFrame. You must embed the form without formatting so it is directly on the page. Once you do that, you can manipulate the DOM elements. In other words, you can't mess with the form with JavaScript/jQuery when you embed it in a Wordpress site using a shortcode or other embed method.

[mier]

Could you please elaborate more on the steps you have followed?

[jennysowyrda]

@Jsum and @tjoyce is this something you have any experience with? 

Thanks,
Jenny