Framer Forms Hidden Fields: Track Every Submission's Source

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

A Framer form hidden field is an input the visitor never sees that stores a value with the submission, such as utm_source. Add one hidden input per UTM parameter, fill it from the page URL with a small script or Framer's field settings, and keep the values in a cookie so they survive page changes before the form is sent.

1. Add hidden inputs named after each UTM parameter.
2. Fill them from the URL when the page loads.
3. Save the values so a later page still has them.
4. Map the fields to your CRM or form destination.
5. Test with a tagged URL.

A tagged ad or post brings the visitor to your Framer page, the hidden fields are filled, and the submission reaches your CRM with its source.

Step 1: add hidden inputs to the Framer form

Open the form in the Framer editor and add an input for each parameter you want: utm_source, utm_medium, utm_campaign, utm_term, utm_content. Set each to hidden, or place a hidden input through a code component if your version of the form builder doesn't offer a hidden type. Framer's forms help pages have the current options.

The field name matters more than the label. Use the exact parameter names so your CRM mapping stays simple.

Step 2: fill the fields from the URL

If the builder doesn't read URL parameters into hidden fields on its own, add a small script in Site Settings, then Custom Code (end of body):

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

Framer pages render on the client, so if the form appears after the script runs, re-run it after navigation or with a short delay.

Step 3: keep the values across pages

Visitors rarely land on the page with the form. sessionStorage keeps values for one tab session. A first-party cookie lasts longer. Our guide to persisting UTM parameters across pages compares the options and their consent implications.

Step 4: send the source to your CRM

Framer can send submissions to email, a webhook, or tools like HubSpot and Zapier. Map each hidden field to a matching property in the destination and create those properties first.

Step 5: test it

Open your site with ?utm_source=test&utm_campaign=framer-test, click to another page, submit the form, and check the submission shows "test". The general method is in capturing UTM parameters in hidden fields.

That's the manual setup. To skip it, pre-register for Trakt and every Framer submission arrives with its source attached.

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

The script runs before the form renders. A new form is published without the fields. A field name gets a typo. The visitor arrives on the blog, not the contact page.

How Trakt closes the gap

Trakt adds auto-injected hidden UTM fields to every form on your Framer site and keeps the source in a first-party cookie, so the campaign survives page changes. Trakt works with all AI-built and no-code sites, keeps the first touch, syncs source and revenue into your CRM, and sends new-lead alerts by email and Slack.

Manual vs. Trakt, by requirement

FAQ

Does Framer support hidden fields in forms?

Framer's form builder lets you add inputs and control their visibility, and you can always add a hidden input with a code component. Check Framer's current help pages for the exact field types in your plan.

How do I capture UTM parameters in a Framer form?

Add hidden inputs named after each UTM parameter and fill them from the page URL with a short script. Save the values so they survive navigation.

Why are my Framer hidden fields empty?

Usually the script ran before the form rendered, the visitor arrived on another page first, or the field name doesn't match the parameter. Test with a tagged URL across two pages.

Can I send Framer form submissions to HubSpot with UTMs?

Yes, map each hidden field to a HubSpot contact property in the integration or through a webhook. Create the properties first.

Do I need cookie consent for storing UTMs?

It depends on where your visitors are and how you store the data. A first-party cookie for attribution usually falls under your consent banner's analytics category. Check with your own adviser.

Is there a no-code way to track Framer form sources?

Yes. Trakt adds auto-injected hidden UTM fields to Framer forms and keeps the source across pages without a script.

What to do first

Submit your Framer contact form from a page you reached through ?utm_source=test. If the submission is blank, add the hidden fields before your next campaign goes live.