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

# Framer – How to Track Typeform Submissions

Embed a Typeform in Framer with a small snippet that records each completed form in Humblytics.

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

**Why this snippet looks different:** Framer runs code from an **Embed** component inside its own frame, separate from your page. So instead of calling Humblytics directly, the snippet sends a message up to your page, where Humblytics records it.

## 1. Add the embed

1. In Framer, click **Insert**, add an **Embed** component where the form should go, and set its type to **HTML**.
2. Paste this code:

```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 and tells your page about it
  function onTypeformSubmit() {
    window.parent.postMessage(
      { type: "formSubmission", formName: "demo-request" },
      "*"
    );
  }
</script>
```

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

<mark style="background-color:pink;">ADD GIF HERE</mark>

## 2. Publish and test

1. Click **Publish**.
2. Open your live site 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?**

* Test the published site, not the Framer editor or preview.
* Keep `type: "formSubmission"` exactly as written. Only change the `formName`.