# Custom/Self-Hosted – How to Track HubSpot Form Submissions

### **Why track HubSpot forms?**

* Measure lead-gen conversion rates directly inside Humblytics
* Attribute submissions to campaigns, traffic sources, A/B tests
* Preserve a cookie-free, privacy-compliant analytics stack—no banners required

***

### Prerequisites

* Your pages already load the global **`hmbl.min.js`** script (36 kb, async).
* You have the standard HubSpot embed snippet for your portal & form IDs.

***

### Step-by-Step Setup

#### 1 · Embed the HubSpot form

Paste the HubSpot embed wherever the form should render (HTML template, CMS block, component):

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

Publish / deploy your site.

***

#### 2 · Hook into the submission event

Add the **`onFormSubmit`** callback inside the same snippet (or in a new `<script>` block directly after it):

```html
htmlCopyEdit<script>
hbspt.forms.create({
  region:  "na1",
  portalId:"YOUR_PORTAL_ID",
  formId:  "YOUR_FORM_ID",
  onFormSubmit: function ($form) {
    window.Humblytics.trackFormSubmission("hubspot-lead");  // rename as needed
  }
});
</script>
```

*Use a descriptive label*—e.g., `"pricing-demo-request"`—if you track multiple HubSpot forms.

***

#### 3 · Verify in Humblytics

1. Submit the form once on the live site.
2. Open **Dashboard → Conversions / Forms**.
3. Locate **`hubspot-lead`** (or your custom label). Data appears within \~30 s.

***

### Key Benefits

| Benefit             | Detail                                    |
| ------------------- | ----------------------------------------- |
| Cookie-free         | No consent banners or CMP required        |
| Real-time           | Submissions populate dashboards instantly |
| Works on every plan | Lite tier and up support custom events    |
| Zero extras         | No GTM, plugins, or additional libraries  |

***

#### Optional Enhancements

* **Funnels:** use the label as the final step to see pre-submit drop-off.
* **Experiments:** set the label as your success goal to A/B-test form placement, copy, or CTA design.

***

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/custom-self-hosted-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.