Framer – How to Track HubSpot Form Submissions

Why track HubSpot forms?

• Measure lead‑gen performance directly in Humblytics

• Attribute submissions to specific campaigns and traffic sources

• Set goals inside Funnels or A/B Experiments

• Keep tracking cookie‑free and privacy compliant

---

Prerequisites

Requirement	Check
A HubSpot form (portal + form IDs)	✔︎
Framer project with the Humblytics tag installed	✔︎

If the Humblytics script isn’t yet in your Framer site, follow the Framer installation guide first.

---

Step‑by‑Step: Track HubSpot Submissions in Framer

1 · Add the HubSpot embed

1. In your Framer canvas, select Insert → Embed (or drag an Embed block onto the page).

2. Paste your HubSpot embed code:

<!-- HubSpot Embed -->
<script src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
  region: "na1",             // update if needed
  portalId: "YOUR_PORTAL_ID", // replace with your portal ID
  formId: "YOUR_FORM_ID"      // replace with your form ID
});
</script>

1. Publish your site.

2 · Hook into the submission callback

Edit the embed snippet to include onFormSubmit and call Humblytics:

<script>
hbspt.forms.create({
  region: "na1",
  portalId: "YOUR_PORTAL_ID",
  formId: "YOUR_FORM_ID",
  onFormSubmit: function($form) {
    window.parent.postMessage({
      type: 'formSubmission',
      formName: 'hubspot-lead',
      formId: formId,
      responseId: responseId
    }, '*');
  }
});
</script>

Choose any descriptive label (e.g., demo-request) for tracking.

3 · Verify in Humblytics

1. Publish & open the live Framer URL.

2. Submit the form once.

3. In Humblytics, go to Conversions → Forms and look for hubspot-lead. Data appears within ~30 seconds.

---

Troubleshooting

Issue	Fix
No event appears	Ensure the Humblytics script is in Site Settings → Custom Code → Head and republish.
Event label is wrong	Double‑check the string passed to trackFormSubmission().
Multiple HubSpot forms	Use unique labels (contact-lead, pricing-lead, etc.) per embed.

---

Next steps

• Funnels: Add the form label as the final step to visualise drop‑off.

• Experiments: Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email [email protected] and we’ll guide you through.