Form field level analytics setup

[BobMalarky]

Hello!
Has anyone successfully setup form field level tracking with an embedded hubspot form? For example tracking forms with: Hotjar, Mouseflow, VWO form report, clicktale, etc. Maybe even GA events.

[insiteful]

> Basically you really have to wait for Hotjar and these other tools to support tracking forms that are rendered into the page via javascript …

Can't think of a better way than @derekcavaliero's answer to summarize this: the core challenge with tracking HubSpot forms is the way they are loaded — dynamically on the page by the JavaScript code.

That said, the wait is over!

To solve this, our team at Insiteful recently developed & released a custom tracking code that allows you to easily to track form fields & analytics from your existing HubSpot forms without changing much:

Simply replace your current HubSpot form embed code with the modified tracking code copied below.*

* Important: be sure to replace the placeholders for unique IDs ( ie. {{ YOUR HUBSPOT FORM ID }} ) in the code below with the appropriate values from HubSpot & Insiteful, respectively.  The unique ID for HubSpot forms can be retrieved from the ‘formId’ attribute in the embed code (or even the editor URL) and the portal ID is just above it  (read more here). Meanwhile, the Insiteful activation key is available when you login and navigate to the Install page.

See more detailed steps with screenshots here: How-to track fields in HubSpot Forms: capture partial entries – Insiteful™

Hope this helps! @BobMalarky, please don't hesitate to reach out if you have any questions 🙂

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
   portalId: "{{ YOUR HUBSPOT PORTAL ID }}",
   formId: "{{ YOUR HUBSPOT FORM ID }}",
   onFormReady: function($form){
      window.f = $form;
      $form.append('<script id ="insiteful_1" type="text/javascript">const getScript=(e,t)=>{var a=document.createElement("script"),n=document.getElementsByTagName("script")[0];a.async=1,a.onload=a.onreadystatechange=((e,n)=>{(n||!a.readyState||/loaded|complete/.test(a.readyState))&&(a.onload=a.onreadystatechange=null,a=void 0,n||t&&t())}),a.src=e,n.parentNode.insertBefore(a,n)}; getScript( "https://a.insiteful.co/dist/compile.min.js", function() { \
      insiteful_activate("{{ YOUR INSITEFUL ACTIVATION KEY }}"); }); \
      <' + '/' + 'script> ');// © Copyright. All Rights Reserved, Insiteful (insiteful.co). NO re-distribution, re-sale, modification, or unauthorized use.
      $form[0].ownerDocument.defaultView.eval($form.find("script#insiteful_1").text()); // insiteful
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      window.addEventListener('beforeunload', (event) => { win_hs.saveForm(); });
      window.addEventListener('unload', (event) => { win_hs.saveForm(); });
      var hb_parent = document.querySelector('.hbspt-form iframe').parentElement; hb_parent.insertAdjacentHTML('beforebegin', '<div class="hbspt-form-msg" style="font-size: 13px;line-height: 1.5;font-family: inherit;border-radius: 3px;background: rgb(245, 248, 250);padding: 10px 15px;opacity:0.75;color: #33475b;background-color: rgb(245, 248, 250);border: 1px solid rgb(203, 214, 226);"><strong>NOTE: </strong>Your privacy is important to us. To better serve you, the information you enter in this form is recorded in real-time.</div>');
  },
  onFormSubmit: function($form) {
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      win_hs.in_fh = {}; win_hs.in_fe = {}; // insiteful
  }
});
</script>

[derekcavaliero]

This is a hard problem to solve.

The issue is that HubSpot renders the form into the page with JavaScript after the Hotjar (or any others) script has already loaded. In order to use the form field analytics inside Hotjar, the form needs to be on the page when the Hotjar script is loaded - otherwise it can’t find it.

The only way I think you could get around this would be to delay Hotjar from loading on the site until the form finishes rendering. However, this has more negative effects than positive - all of your recordings/heatmap data will be thrown off because of the delay - or the script may not function properly at all.

Basically you really have to wait for Hotjar and these other tools to support tracking forms that are rendered into the page via javascript - hacking something together like this may cause more harm than good.