> For the complete documentation index, see [llms.txt](https://docs.humblytics.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.humblytics.com/how-to-track-custom-form-submissions/hubspot-forms/framer-how-to-track-hubspot-form-submissions.md).

# 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>
```

3. 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 **<support@humblytics.com>** and we’ll guide you through.