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

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

Embed a Typeform on any custom or self-hosted site with a small snippet that records each completed form in Humblytics.

{% hint style="info" %}
**You need:** the Humblytics script in the `<head>` of your site, and your Typeform form ID. See [Typeform](/how-to-track-custom-form-submissions/typeform.md) for where to find it.
{% endhint %}

## 1. Add the embed

Paste this into your page's HTML or template where the form should appear:

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

<script>
  // Runs when someone finishes the form
  function onTypeformSubmit() {
    window.Humblytics.trackFormSubmission("demo-request");
  }
</script>
```

Replace `YOUR-FORM-ID` with your form ID, and `demo-request` with the name you want to see in Humblytics.

**Using React or another framework?** Typeform's `@typeform/embed-react` package takes an `onSubmit` prop. Call `window.Humblytics.trackFormSubmission("demo-request")` inside it.

## 2. Deploy and test

1. Deploy your site.
2. Open the live page in a private window and complete the form.
3. In Humblytics, go to **Observe → Analytics → Forms** and look for your form name within a minute or two.

**Not showing?**

* Check that the function name in `data-tf-on-submit` matches the one in the script exactly.
* The function must be global. Don't wrap it in a module or another function.
* If your site uses a Content Security Policy, allow `embed.typeform.com` and `form.typeform.com`.