Webflow – How to Track Typeform Submissions

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

You need: the Humblytics script installed on your Webflow site, and your Typeform form ID. See Typeform for where to find it.

1. Add the embed

1. In the Webflow Designer, open the page, press A to open the Add panel, and drag a Code Embed element where the form should go.

2. Paste this code:

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

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

2. Click Save & Close.

ADD GIF HERE

Already have a Typeform embed? Keep it, and add data-tf-on-submit="onTypeformSubmit" to its <div>, plus the last <script> block.

2. Publish and test

1. Click Publish and choose your live domain.

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?

• Test on your published domain, not the Webflow Designer or preview.

• Check that the function name in data-tf-on-submit matches the one in the script exactly: onTypeformSubmit.

• Using more than one Typeform on the same page? Give each its own function name, such as onDemoSubmit and onQuizSubmit.