Humblytics
  • Overview
    • Introduction to Humblytics
    • Features Overview
    • Frequently Asked Questions
    • Pricing Plans
      • Plus Plan
      • Business Plan
      • Scale Plan
      • Enterprise Plan
  • How to Get Started
    • Create a New Account
    • Adding Webflow Analytics to Your Site
    • Adding Framer Analytics to Your Site
  • How to Track Custom Form Submissions
    • How to Track Typeform Submissions in Framer
    • How to Track Cal.com Booking Submissions in Framer
    • How to Track Typeform Submissions in Webflow
    • How to Track Cal.com Booking Submissions in Webflow
  • How to Track Custom Click Events
    • How to Track Custom Click Events on Any Website with Humblytics
    • How to Add Custom Event Tracking for Framer Sites
    • How to Add Custom Event Tracking for Webflow Sites
  • Understanding Your Data
    • Understanding Site Traffic
    • Understanding Pages Data
    • Understanding Forms Data
    • Understanding Click Data
  • Split Testing Overview
    • Setting Up a Split Test
    • How to Create an A/B Page Variant
    • How to Analyze Split Test Data
    • Using the Humblytics A/B Split Test Sample Size Calculator
  • Campaign Tracking with UTM Links
  • Support & Resources
    • Resources
  • Privacy
Powered by GitBook
On this page

Was this helpful?

  1. How to Track Custom Form Submissions

How to Track Typeform Submissions in Webflow

If you use Typeform to collect leads or survey responses on your Webflow site, tracking submissions is critical for measuring conversions and optimizing performance. With Humblytics, you can track Typeform completions as custom form events—without using cookies, code-heavy workarounds, or Google Tag Manager.

This guide walks you through embedding a Typeform in Webflow and triggering a submission event in Humblytics.


Why Track Typeform Events in Humblytics?

  • Monitor conversion rates from embedded forms

  • Attribute submissions to specific campaigns or traffic sources

  • Set goals in funnels or A/B split tests

  • Maintain privacy compliance with no cookies or banners


Step-by-Step: Track Typeform Submissions in Webflow

Here’s how to embed Typeform in your Webflow project and hook into submission tracking.

1. Add the Typeform Embed

In Webflow:

  • Open your project in the Designer

  • Drag an Embed element into your page

  • Paste the following code:

<!-- 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 your actual Typeform ID (found in your Typeform share link).

2. Add Humblytics Submission Tracking

Just below the embed, add this tracking script in the same Embed block:

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

💡 You can rename "custom-form" to something more descriptive like "pricing-typeform" to organize multiple tracked forms.


View the Data in Humblytics

Once live:

  1. Open your Humblytics dashboard

  2. Go to Conversions or Forms

  3. Look for "custom-form" in the list of tracked events

  4. Filter by page, referrer, or device to dig deeper into user behavior


Benefits of This Setup

  • Cookie-free tracking: No consent banners required

  • Works on any plan: Even the $9/month tier supports custom events

  • No-code setup: Just a single embed block in Webflow

  • Real-time insights: View submissions in your dashboard immediately


Optional Enhancements

  • Combine this with funnels to see how Typeform fits into the full user journey

  • Use A/B testing to compare Typeform placements or CTAs

PreviousHow to Track Cal.com Booking Submissions in FramerNextHow to Track Cal.com Booking Submissions in Webflow

Last updated 11 days ago

Was this helpful?