Humblytics
  • Overview
    • Introduction to Humblytics
    • Features Overview
    • Frequently Asked Questions
  • How to Get Started
    • Create a New Account
    • Add Humblytics Analytics to a Custom / Self-Hosted Site
    • How to Add Humblytics Analytics to Your Weblow Site
    • How to Add Humblytics Analytics to Your Framer Site
  • Split Testing Overview
    • How Humblytics Split Testing Works - Under the Hood
    • How to Setup a Split Test
    • Creating A/B Page Variants for Split Testing
    • How to Analyze Split Test Data
    • Using the Humblytics A/B Sample‑Size Calculator
    • Deciding How Long to Run an A/B Test
  • How to Track Custom Form Submissions
    • GoHighLevel
    • Tally.so
      • Webflow – How to Track Tally.so Form Submissions
      • Framer – How to Track Tally.so Form Submissions
      • Custom/Self-Hosted – How to Track Tally.so Form Submissions
    • Typeform
      • Webflow – How to Track Typeform Submissions
      • Framer – How to Track Typeform Submissions
      • Custom/Self-Hosted – How to Track Typeform Submissions
    • Cal.com
      • Webflow – How to Track Cal.com Booking Submissions
      • Framer – How to Track Cal.com Booking Submissions
      • Custom/Self-Hosted – How to Track Cal.com Booking Submissions
    • Hubspot
      • Framer – How to Track HubSpot Form Submissions
      • Custom/Self-Hosted – How to Track HubSpot Form Submissions
      • Webflow – How to Track HubSpot Form Submissions
  • How to Track Custom Click Events
    • How to Track Click Events on Custom / Self‑Hosted Site
    • How to Add Custom Event Tracking for Webflow Sites
    • How to Add Custom Event Tracking for Framer Sites
  • Understanding Your Data
    • Understanding Site Traffic
    • Understanding Pages Data
    • Understanding Click Data
    • Understanding Forms Data
    • Understanding Heatmap
    • Understanding Funnels
  • Campaign Tracking with UTM Links
Powered by GitBook
On this page

Was this helpful?

  1. How to Track Custom Form Submissions
  2. Typeform

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

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

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

Measure, optimise, and scale—cookie-free—using Humblytics.

PreviousFramer – How to Track Typeform SubmissionsNextCal.com

Last updated 2 days ago

Was this helpful?