# 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):

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

   ```html
   <!-- 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! 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.humblytics.com/how-to-track-custom-form-submissions/tally.so/framer-how-to-track-tally.so-form-submissions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.