# Custom/Self-Hosted – How to Track Typeform Submissions

### Track Typeform Submissions on Custom / Self-Hosted Sites with Humblytics

If you embed Typeform on a custom-built site—whether it’s a static Jamstack deployment, a PHP app, or a hand-rolled HTML page—Humblytics can record every submission as a custom event with **zero cookies** and **no third-party tag managers**.

***

#### Why Track Typeform Events in Humblytics?

* **Monitor conversion rates** on landing pages and microsites
* **Attribute completions** to specific campaigns or traffic sources
* **Set goals** in funnels or A/B split tests for deeper insight
* **Stay privacy-compliant**—no consent banners required

***

#### Prerequisites

1. Your **Typeform ID** (found in the share URL).
2. The **Humblytics global tracking script** already present in the site’s `<head>`—added once to a base template, layout component, or `index.html`.

> **Already see page-view data in Humblytics?** Perfect—your global script is active and ready.

***

#### Step-by-Step: Track Typeform Submissions on Custom Sites

Follow the same two-snippet approach you’d use in Webflow—just paste the code into your HTML template.

1. **Add the Typeform Embed**

   ```html
   <!-- Typeform -->
   <div data-tf-on-submit="submit" data-tf-live="YOUR-TYPEFORM-ID"></div>
   <script src="//embed.typeform.com/next/embed.js"></script>
   ```

   🔁 Replace **YOUR-TYPEFORM-ID** with the actual ID from your Typeform share link (`https://form.typeform.com/to/abcdef` → `abcdef`).
2. **Hook in Humblytics Submission Tracking**\
   Directly below the embed, add:

   ```html
   <!-- Humblytics custom tracking begins -->
   <script>
     function submit({ formId, responseId }) {
       // Track the event in Humblytics
       window.Humblytics.trackFormSubmission("custom-form");
     }
   </script>
   <!-- Humblytics custom tracking ends -->
   ```

   💡 Rename **"custom-form"** to something descriptive (e.g., `pricing-typeform`) if you’ll track multiple forms.
3. **Deploy / Publish**
   * **Static sites:** Push to Git and redeploy (Netlify, Vercel, Cloudflare Pages).
   * **Server-rendered apps:** Commit and redeploy via your CI/CD pipeline.
   * **FTP / cPanel:** Upload the updated file.

That’s it—Humblytics will start logging form completions as soon as traffic hits the page.

***

#### View the Data in Humblytics

1. Log in to your **Humblytics** dashboard.
2. Navigate to **Conversions → Forms**.
3. Look for **"custom-form"** (or your chosen label) in the event list.
4. Apply filters (page, referrer, device) to analyse performance.

***

#### Benefits of This Setup

| Advantage                | Detail                                                      |
| ------------------------ | ----------------------------------------------------------- |
| **Cookie-free tracking** | No consent banners required.                                |
| **Works on every plan**  | Even the $9/month tier supports custom events.              |
| **Lightweight**          | Only the 36 kb Humblytics script—no GTM or extra libraries. |
| **Real-time insights**   | Submissions appear immediately in your dashboard.           |

***

#### Optional Enhancements

* **Funnels:** See how Typeform sits in the broader conversion journey.
* **A/B Testing:** Compare form placement, copy, or CTA colours.
* **Custom properties:** Pass extra metadata (e.g., plan tier) via `window.Humblytics.track("pricing-typeform", { tier: "pro" })` inside the `submit()` callback.


---

# 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/typeform/custom-self-hosted-how-to-track-typeform-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.
