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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.humblytics.com/how-to-track-custom-form-submissions/hubspot-forms/framer-how-to-track-hubspot-form-submissions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.