Integrate Tally forms in Webflow

In many cases, opting for a third-party solution for forms is a smart choice—not just for performance reasons, but also for better abstraction. Many marketing team members are focused solely on gathering data for events, campaigns, and tracking. When forms are scattered across a website, keeping track of them all can be challenging.

That’s why I find Tally particularly useful for more complex websites. Some key advantages include:

• User-friendly multi-step forms – Improved UX out of the box.
• Centralized form management – View all active forms in one place.
• No developer dependency – Add or remove fields without coding.
• Clear data summaries – See aggregated insights (e.g., total gluten-free selections).
• Better form UX – Sleek design without extra effort.
• Flexible if/then logic – Easily adapt forms based on user input.
• Improved spam handling – Avoid common issues in Webflow’s native forms.
• Capture partial submissions – Get data even if a form isn’t fully completed.
• Progress indicators – Show users how far along they are.
• Auto-save fields – Reduce frustration by remembering inputs.

Now that the benefits are clear, how do we implement Tally?

I recommend using a custom component combined with a custom script. This approach makes it easier to manage and ensures all implementations can be quickly located by checking the component usage across the project.

‍

This custom component makes it easy for your Webflow team to add forms directly in the Designer. It includes an embed URL and three hidden fields, which provide essential context when the form is submitted to the backend and eventually passed to Salesforce or another third-party system.

In this example, the hidden fields are pre-filled with relevant values, but their real power lies in their flexibility. If you’re using this form inside a Webflow Collection, you can dynamically link CMS data to the form submission. This allows you to:

• Automatically associate form submissions with specific pages, campaigns, or users.
• Pass product or service details into the submission data.
• Track where a form was submitted without requiring manual input.

By structuring the component this way, your team gains the ability to reuse it across multiple forms while ensuring each submission carries the right metadata—without requiring ongoing developer intervention.
‍

Inside the component, we use a custom element to structure the iframe required for embedding the Tally form. Additionally, there’s a div containing specific attributes—this is the key to dynamically binding CMS fields to the form.

These attributes are automatically converted into query strings and appended to the Tally form URL. Once the form loads, Tally picks up these values and maps them to the hidden fields inside the form. This approach ensures that each form submission carries the right contextual data without requiring manual input.

Example Use Case:

Let’s say we’re embedding this form inside a Webflow Collection List—we could dynamically pass details like:

• Campaign ID – To track which marketing campaign led to the submission.
• User ID or Email – To link submissions to specific users.
• Product or Service Name – To associate the form response with a particular offering.

Implementation

Below is a sample snippet of custom code to achieve this. If you’re using multiple forms per page, you may need to modify it slightly to prevent conflicts. However, in this case, since the properties we want to pass remain consistent, this setup works smoothly:

‍

if (Tally) {
  Tally.loadEmbeds();

  const tallyElement = document.querySelector('.tally-attributes');

  if (tallyElement) {
    const attributes = tallyElement.attributes;
    const params = {};

    for (let i = 0; i < attributes.length; i++) {
      const attr = attributes[i];
      if (attr.name !== "class") { // Exclude class attribute
        params[attr.name] = attr.value;
      }
    }

    addQueryParams(params);
  }
}

function addQueryParams(params) {
  const url = new URL(window.location.href);

  // Loop through the object and set parameters
  Object.keys(params).forEach(key => {
    url.searchParams.set(key, params[key]);
  });

  // Update the URL without reloading the page
  window.history.replaceState(null, "", url);
}

‍

By leveraging this method, you can ensure that every form submission includes valuable context, making it easier to track, analyze, and integrate with tools like Salesforce, Pipedrive, or Google Analytics. Plus, since everything is handled at the component level, marketers can manage forms without requiring developer assistance.

‍

Want to take this further? If you're interested in expanding this component and logic to include UTM parameters, feel free to reach out! Send me an email at johan@wambay.com, and I’ll be happy to share insights on how to integrate tracking seamlessly.