Guides

How to Capture UTM Parameters in Webflow Forms

A Webflow form can capture campaign tags from its page URL and submit them alongside a lead. Start with the fields you need and a clear attribution rule.

Google’s campaign-tagging documentation identifies source, medium and campaign name as core UTM values. The example here also captures term and content. Keep their spelling and capitalization consistent across your campaigns.

Add hidden fields inside the form

Place an Embed element inside the form and add these fields. The name of each field is the key your receiving integration must map to the matching CRM field.

<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">

Hidden inputs travel with a form submission, but visitors can inspect and change them. Treat these values as user-supplied campaign context, not verified evidence of where someone came from.

Read only the campaign parameters

Add this script to the page’s Before </body> custom-code field, after the form fields. It reads the five named keys and fills matching hidden inputs across the page’s forms.

<script>
(function () {
  const keys = ["utm_source", "utm_medium", "utm_campaign",
                "utm_term", "utm_content"];
  const params = new URLSearchParams(window.location.search);
  for (const key of keys) {
    const value = params.get(key) || "";
    const fields = document.querySelectorAll(
      'form input[type="hidden"][name="' + key + '"]'
    );
    for (const field of fields) field.value = value;
  }
})();
</script>

URLSearchParams.get() returns the first value for a key. A missing or empty parameter leaves its field blank. An unrelated parameter, such as a site-search query, does not become attribution data.

Be explicit about cross-page tracking

This example captures the URL on the form page. It does not create cookies, store a previous campaign or carry attribution to another page. If an ad lands elsewhere and the visitor reaches a form without UTM parameters, the fields remain blank.

If you need attribution across pages or sessions, define the first-touch or last-touch rule and implement storage through your site’s reviewed consent and retention setup. Do not silently add a cookie that records every query parameter. The earlier version’s cookie script has been removed from this guide.

Check the submission and CRM mapping

Open a staging form with ?utm_source=newsletter&utm_medium=email&utm_campaign=autumn. Submit a test lead and check the three exact values in the received form data and CRM record. Repeat with no parameters, an unrelated parameter and an encoded value containing a space.

Webflow custom code and third-party form integrations need an end-to-end check on your own published setup. If you also require a work-email prompt, see the Webflow email-domain filter and its receiving-system limits.

The original cookie-based version credited Siton_Systems on the Webflow forum. The replacement above uses a smaller, page-only example.

Ahmed Maher

Ahmed Maher is a marketing and growth leader with a proven track record across telecom, fintech, publishing, charity, government, e-commerce, and sports. He launched Vodafone Egypt’s digital and social media presence in 2008, setting new standards for brand engagement and… More »

Related Articles