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.

PreviousWebflow – How to Track Typeform SubmissionsNextCal.com

Last updated

Was this helpful?