There’s nothing more disheartening than missing out on a potential opportunity due to form abandonment or website drop-offs.

FormTracks helps you capture partial entries and convert extra leads from your existing web form in just a few clicks.

Apart from helping you capture 100% of leads that fill out your forms, our plug-n-play solution also enables you to increase your conversion rate with power-ups (i.e. Save & continue later, Auto follow-up emails )

Learn more about how-to easily track, optimize & convert more leads from your forms, with FormTracks. It takes just 90 seconds to setup, and you’ll never miss another opportunity™

Here’s how to track abandoned forms & partial entries in HubSpot Forms:

<aside> 💡 FormTracks is the first & only form-field level tracking solution for HubSpot Forms!

</aside>

Troubleshooting HubSpot Forms + FormTracks tracking

(Important Pre-Requisite)

By default, HubSpot Forms renders forms in iFrames when embedded in an external website or page — unlike most all forms, which are simply HTML elements (ie. <form>, <input>, <select>…) added directly to your webpage. Browsers limit the information shared between iFrames (ie. your embedded HubSpot form) and parent frames (ie. your website), which is why it is so tricky to track HubSpot forms & fields.

Fortunately, FormTracks has pioneered a couple simple ways to track your existing HubSpot forms without changing much about how your website is set up:

First, our recommended approach — simply replace your current HubSpot form embed code with the special FormTracks + HubSpot Tracking code:

<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.formtracks.com/dist/compile.min.js>", function() { \\
      insiteful_activate("**{{ YOUR INSITEFUL ACTIVATION KEY }}**"); }); \\
      <' + '/' + 'script> ');
      $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(); });
  },
  onFormSubmit: function($form) {
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      win_hs.in_fh = {}; win_hs.in_fe = {}; // insiteful
  }
});
</script>

Important: be sure to replace the unique IDs bolded in green above with the appropriate values from Hubspot & FormTracks, respectively. The unique ID for HubSpot forms can be retrieved from the ‘formId’ attribute in the embed code (or even the editor URL), as seen below, and the portal ID is just above it (read more here, via the HubSpot documentation). Meanwhile, the FormTracks activation key is available when login and navigate to the Install page.

https://cdn2.hubspot.net/hub/2832391/hubfs/Marketing/Lead-Capture/Forms/share-form-guid.png?t=1542882421493&width=640&name=share-form-guid.png

Alternatively, if you’d prefer to use the default FormTracks installation, simply check the “Set as raw HTML form” switch on in HubSpot (as seen below, official docs here), and the new embed code will not include an iFrame. This will remove the browser security restrictions mentioned earlier and allow FormTracks to track your HubSpot forms just like any other web form.

https://cdn2.hubspot.net/hub/2832391/hubfs/Marketing/Lead-Capture/Forms/options-unstyled-form.png?width=507&name=options-unstyled-form.png

That said, choosing this option will remove the default HubSpot styling from your forms, so you may need to add some CSS to re-style them as desired, as seen below. Alternatively, you may be able to add the tracking code directly to your form in HubSpot (rather than via Google Tag Manager, which adds it to the entire website) if you’d like to track the form without changing the default iFrame-based implementation.

Read more about how-to do this from the official HubSpot documentation, here.

How to track HubSpot forms

Ready to start capturing & tracking leads from your forms?  With HubSpot forms and FormTracks, it just takes a couple clicks:

  1. Add your website: Just login to FormTracks & visit the Domains page and add your website where indicated in the screenshot below.

    https://app.formtracks.com/views/assets/img/add-domain.jpg