How to Track Hubspot Forms

This article outlines which type of Hubspot Forms can be tracked, and the recommended method for setting up tracking.

Table of Contents
Introduction to Hubspot Form Tracking
How to Set Up Tracking for Hubspot Standard Forms
How to Validate that Your Hubspot Forms are Tracking

Which Forms Can Be Tracked?

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.

❌ Hubspot Meeting Forms cannot be tracked

❌ Hubspot Chat Box cannot be tracked

✅ Hubspot Standard Forms can be tracked, but requires custom code

Hubspot Meeting Forms

Hubspot Meeting Forms are not trackable. Since the forms are in an iFrame, and Hubspot does not allow access to the Javascript of the form, the tracking code cannot be added.

As an alternative, please consider switching to Calendly or another trackable meeting scheduling form.

Hubspot Chat Forms

Hubspot Chat Forms are not trackable. Since the forms are in an iFrame, and Hubspot does not allow access to the Javascript of the form, the tracking code cannot be added.

Hubspot Standard Forms

Hubspot Standard Forms are trackable. However, to track these forms, it requires a special setup.

Follow the instructions below to set up tracking for your Hubspot Standard Forms..

How to Set Up Tracking for Hubspot Standard Forms

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 that your Hubspot Forms Tracking

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.

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