Webflow Hidden Fields for UTM Tracking

How do you add a hidden field to a Webflow form?

To add a hidden field to a Webflow form, drop an Embed element inside the form block and write a hidden input such as <input type="hidden" name="utm_source">. Webflow stores it with the submission like any other field. A short script then fills the hidden fields from the page URL, and saves the values so they survive page changes.

1. Add an Embed element inside the form.
2. Write one hidden input per UTM parameter.
3. Add a script that fills them from the URL.
4. Save values for visitors who browse first.
5. Publish and test with a tagged URL.

A tagged link opens your Webflow page, the hidden inputs are filled, and the submission reaches your CRM or sheet with its source.

Step 1: add the hidden inputs with an Embed

Inside the Form Block, add an Embed (Code Embed) element and paste:

<input type="hidden" name="utm_source">
<input type="hidden" name="utm_medium">
<input type="hidden" name="utm_campaign">
<input type="hidden" name="utm_term">
<input type="hidden" name="utm_content">

Custom code embeds need a paid site plan. Webflow's custom code help has current plan details.

Step 2: fill them from the URL

Add this in Site settings, then Custom code, Footer code:

const keys = ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"];
const p = new URLSearchParams(location.search);
keys.forEach((k) => {
  if (p.get(k)) localStorage.setItem(k, p.get(k));
  const v = localStorage.getItem(k);
  document.querySelectorAll(`input[name="${k}"]`).forEach((el) => { if (v) el.value = v; });
});

Step 3: keep values across pages

The script above uses localStorage, which keeps the last tagged visit until cleared. Read persisting UTM parameters across pages for cookie and session options, and consent.

Step 4: test

Visit yoursite.com/?utm_source=test, open another page, submit the form, then check the submission in Webflow's form submissions list. Values flow on to Zapier, Make or your CRM like any other field.

The general method lives in capturing UTM parameters in hidden fields.

That's the manual route. To skip it, pre-register for Trakt and each Webflow submission arrives with its source attached.

Why Webflow hidden fields break in practice (and how Trakt helps)

Someone duplicates a form without the Embed. A plan downgrade removes custom code. A new landing page goes out with a different form.

How Trakt closes the gap

Trakt adds auto-injected hidden UTM fields to every Webflow form, keeps the source in a first-party cookie, syncs source and revenue into your CRM, and sends new-lead alerts by email and Slack.

Manual vs. Trakt, by requirement

FAQ

Does Webflow have a hidden field?

Not as a Designer element. You add one with an Embed element containing an HTML hidden input, and Webflow saves it with the submission.

How do I track UTM parameters in a Webflow form?

Add hidden inputs named after each UTM parameter and fill them from the URL with a footer script. Store the values so visitors who browse first still carry them.

Why do my Webflow hidden fields come through empty?

The script may not be published, the input names may not match, or the visitor reached the form without tags. Check the published HTML and test across two pages.

Do Webflow hidden fields need a paid plan?

Custom code embeds generally require a paid site plan. Check Webflow's current plan pages.

Can I send Webflow UTM fields to HubSpot or a CRM?

Yes. Hidden fields are part of the submission, so Zapier, Make or a native integration can map them to CRM properties.

Is there a way to track Webflow form sources without code?

Trakt adds auto-injected hidden UTM fields to Webflow forms and carries the source across pages, with no embed to maintain.

What to do first

Open your published contact page, view source, and search for utm_source. If it isn't inside the form, add the Embed before the next campaign.