Framer – How to Track Tally.so Form Submissions

Humblytics lets you capture Tally.so form completions—embedded right inside Framer—without extra analytics software or cookie banners. Follow this quick guide to wire up conversion tracking in under five minutes.

---

Why Track Form Submissions?

Tracking completions helps you:

• Measure lead conversion from landing pages

• Compare form layouts or CTAs in A/B tests

• Attribute wins to traffic sources, campaigns, or experiments

• Trigger funnel goals automatically in Humblytics dashboards

---

Prerequisites

• A Tally form embedded in a Framer project

• The Humblytics global script already installed on the page (once per site)

Heads‑up: Humblytics is cookie‑free, so you stay privacy‑compliant without consent dialogs.

---

Step‑by‑Step Setup

1. Add the Tally Embed Paste the following block where you want the form to appear in Framer (Embed component → Code view):

   <!-- Tally embed code begins -->
   <iframe data-tally-src="https://tally.so/embed/wo1EaP?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="276" frameborder="0" marginheight="0" marginwidth="0" title="Contact form"></iframe>
   <script>
     var d=document,w="https://tally.so/widgets/embed.js",v=function(){
       "undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])")
       .forEach(function(e){e.src=e.dataset.tallySrc});
     };
     if("undefined"!=typeof Tally) v();
     else if(d.querySelector('script[src="'+w+'"]')==null){
       var s=d.createElement("script");
       s.src=w; s.onload=v; s.onerror=v; d.body.appendChild(s);
     }
   </script>
   <!-- Tally embed code ends -->

2. Relay the Submission Event to Humblytics Directly after the embed, add the Humblytics hook:

   <!-- Humblytics custom tracking begins -->
   <script>
     window.addEventListener("message", function (event) {
       // Forward any Tally postMessage events to the parent → Humblytics
       window.parent.postMessage(event.data, "*");
     });
   </script>
   <!-- Humblytics custom tracking ends -->

   What it does: Tally fires a postMessage when the form is submitted. The listener forwards that data to the parent window, where the Humblytics script automatically logs it as a formSubmission event.

3. Publish Your Framer Site Framer will ship the updated embed and the global Humblytics script in one deploy—no extra steps.

---

Viewing Submissions in Humblytics

1. Log in to your Humblytics dashboard.

2. Go to Forms in the left navbar.

3. Look for the new entry—e.g., "tally-contact-form"—under Tracked Form Events.

4. Apply filters (source, device, date range) to analyse performance or slice results for an A/B test.

---

Troubleshooting Tips

Issue	Fix
No events showing	Confirm both scripts appear after the Tally <iframe> in the published HTML.
Duplicate events	Make sure the listener is not inserted multiple times across nested components.
Form height cutoff	Set dynamicHeight=1 (already in the embed) so Tally resizes automatically.

Happy tracking! 🚀