search

Custom/Self-Hosted – How to Track Typeform Submissions

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

hashtag
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

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

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

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

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

hashtag
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