How do I get my HubSpot Forms Tracking?

This article outlines the recommended method for getting your Hubspot Forms Tracking using a Custom Tracking Code.

Table of Contents:

• Introduction to Hubspot Form Tracking
• How to Add Custom Code on Your Hubspot Form
• How to Validate Your Hubspot Forms Tracking Setup

Introduction to Hubspot Form Tracking

This guide will walk you through the general steps involved in adding a custom tracking code to your HubSpot Forms. Please note that specific implementation details may vary depending on your HubSpot account setup and form editor.

What Forms Cannot Be Tracked?

1. Hubspot Meeting Forms Cannot Be Tracked
2. Hubspot Chat Box Cannot Be Tracked

The two forms listed above cannot be tracked because they are in an iFrame, which means our standard Wicked Tracking Code will not reliably track the email submissions from this form. Additionally, because we do not have a way to edit the HTML/Javascript of the forms, we cannot add custom code. Unfortunately without the access to add custom code, which is required for advanced setups, these types of forms cannot be tracked.

Why Does a Standard Tracking Setup Not Work for Hubspot Forms?

Since standard Hubspot forms are also in iFrame, the Wicked Tracking Code, as I said above, will not reliably work. However, with standard Hubspot forms, you can edit the embedded code (due to the URL source), which can then be used to add custom HTML/Javascript. After you add your custom code to the embedded form, your Hubspot Form will then reliably track email opt-ins. 

What do I need to do to get my Hubspot Form Tracking?

To track standard HubSpot Forms, you need to replace the Embedded Hubspot Form Code with some custom code. To do this, simply copy the custom code provided below. After that is completed, you will then need to update this code's portalID and formID values your Forms values. Then, paste this updated code directly into the HTML of your webpage. Let's get started.

How to Add Hubspot Forms Custom Code

In these steps, since each web provider has a different way of accessing the HTML, we'll simply be using WordPress as an example. In this example, we're editing a Test Form and validating its tracking before going live. Let's go ahead and get started,

1. In WordPress, create a Test Form
   1. Go to the Navigation Bar
      
   2. Create/Select a Test Form (screenshot)
      
   3. Go to the Forms HTML JavaScript editor
      
2. Copy and paste the following code
   • <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"> </script>

     <script> hbspt.forms.create({ region: "na1", portalId: "xxxxxx", formId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", target: "#hbspt-form-1", onFormReady: function($form) { let hsIframes = document.getElementsByClassName('hs-form-iframe'); for (const i in hsIframes) { if (hsIframes[i].contentDocument) { let inputs = hsIframes[i].contentWindow.document.getElementsByTagName('input'); for (j in inputs) { if (inputs[j].type && inputs[j].type.match(/text|email|hidden/i) !== null) { inputs[j].addEventListener('input', function(e){ console.log('Event caught'); console.log(e.currentTarget.value); console.log(validateEmail(e.currentTarget.value)); if (validateEmail(e.currentTarget.value)) { console.log('wrPush sent'); window.parent.postMessage({ 'func': 'wrPush', 'message': e.currentTarget.value }, "*"); } }); } } console.log('Added to the iframe ' + i) } } }, }); function validateEmail(email) { if (email === null || email === '') { return false; } const re = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/i; return re.test(email); } </script>

   • Example:
     

3. Now, in HubSpot, locate and copy the Forms Embed Code
   
   1. Navigate to the Hubspot "Forms" section.
   2. Locate and select your Hubspot Form.
   3. Got to your Hubspot Forms "Embed Code" section
      
   4. Copy the HubSpot Form ID and portal ID from the embed code.
      
      
      
4. Now, in WordPress, identify and replace the custom codes Form ID and portal ID with the copied Hubspot values. 
   
   1. portalId: "xxxxxx"
   2. formId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      
      
5. Publish your changes 

After you've published your changes, you'll need to validate that the test form is working properly and that the tracking setup is also successfully working. In the next section, we'll discuss how to validate your Hubspot Forms tracking, to ensure it's tracking reliably. 

How to Validate Your Hubspot Forms Tracking Setup

The purpose of validating your Hubspot forms tracking setup is to ensure that it's tracking reliably and providing you with the highest quality data possible. To validate your HubSpot form, you'll need to run a live network test. Although this test may sound difficult, it's a rather easy process.

Read the step-by-step instructions for the test here:

How to Validate Your Opt-In Form Using Using the Inspect Network Test

Once you have finished the live test, you will see one of two results: 

1. If your live test passes, then you are good to go! Please publish your form.
2. If your live test fails, which means that you do not see a index.php?WickedClientID= response, then your opt-in is probably not tracking. Please reach out to support@wikedreports.com for further validation.

That's it. If you have any additional questions, then please reach out to our support team. We are always happy to help!