HubSpot Form Embed Code Example

If you are using the external HubSpot Form Embed code on your site you will need to make some tweaks to it so you can capture the Google Client ID.

The HubSpot Form Embed code requires a few minor modifications before you can start capturing Google Client ID's.

Ensure:

• Your Google Analytics tracking code is firing in the header of your page
• JQUERY is loaded in the header of your page
• Modify your embed code as per below (swap out the ID's in bold below with your own)
• This will not work with on free HubSpot accounts

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

//Create HubSpot form:
hbspt.forms.create({
  portalId: "435515",
  formId: "e1ace71b-b99c-46b6-8189-98a4d18c463a",

  //Add these functions to your embed form code to populate the Google Client ID field:
  onFormReady: function($form) { 
    var clientId = getClientId();
    $form.find('input[name="google_client_id"]').val(clientId).change(); 
  },
  onFormSubmit: function($form) {
    var clientId = getClientId(); 
    $form.find('input[name="google_client_id"]').val(clientId).change(); 
  } 

});

//Function to get the Google Client ID
function getClientId() {
  try {
    var trackers = ga.getAll();
    var i, len;
    for (i = 0, len = trackers.length; i < len; i += 1) {
      if (trackers[i].get('trackingId') === "UA-43199819-1") { 
        return trackers[i].get('clientId');
      }
    }
   } catch(e) {} 
   return '';
}

</script>

Here is a working example (use view page source to check out the code).

Parts to modify: