How to Capture UTM Parameters in Webflow Forms

Learn how to capture UTM parameters in Webflow forms using JavaScript and cookies. Track ad campaigns, referral sources, and marketing performance with this step-by-step guide.

By
Joshua McSorley
5 min
Share this post
computer with landmark indicating tracking UTM data

Tracking UTM parameters in Webflow forms is crucial if you’re running marketing campaigns, paid ads, or referral programs. Without capturing UTM data, you’re left guessing where your leads are coming from.

Recently, I worked with a Webflow client who ran multiple paid ad campaigns. They had a single form across their entire website but needed to track where each lead came from, whether it was from a Google ad, a Facebook ad, or an email campaign. Instead of creating different forms for each campaign, we used a simple JavaScript solution to capture UTM parameters and store them in a cookie for tracking across multiple visits.

In this guide, I’ll show you how to capture UTM parameters inside Webflow forms using a hidden field, JavaScript, and cookies.

Why Capture UTM Parameters?

UTM parameters help answer:

Where did this lead come from? (Google Ads, Facebook, email, etc.)

What campaign drove the conversion? (Spring sale, retargeting, referral, etc.)

Which marketing channel is performing best?

By storing UTM data in a cookie, you can:

✔️ Track users across different pages, even if they don’t fill out the form on their first visit.

✔️ Ensure attribution accuracy, even if UTM parameters disappear when a visitor navigates to another page.

Step-by-Step Guide

To capture UTM parameters in a Webflow form, we’ll:

1️⃣ Add hidden fields to your Webflow form.

2️⃣ Use JavaScript to store UTM parameters in a cookie.

3️⃣ Auto-fill the form with UTM data when the user submits.

Step 1: Add Hidden UTM Fields to Your Webflow Form

1️⃣ Open your Form Block in Webflow.

2️⃣ Add an Embed element inside the form.

3️⃣ Inside the embed, paste this HTML to create hidden form fields for UTM parameters:

<input type="hidden" class="utm_source" name="utm_source" value="">
<input type="hidden" class="utm_medium" name="utm_medium" value="">
<input type="hidden" class="utm_campaign" name="utm_campaign" value="">


This ensures that the UTM data gets stored inside the form submission.

Step 2: Add JavaScript to Capture UTM Parameters

Now, let’s add the JavaScript that:

✔️ Captures UTM parameters from the URL

✔️ Stores them in a cookie (so they persist across pages)

✔️ Auto-fills the form with UTM values

Go to Page SettingsCustom Code and paste this inside the <body> section:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
const my_utmParameters = [
  "utm_source", 
  "utm_medium", 
  "utm_campaign"
];

function getAllUrlParams() {
  return Object.fromEntries(new URLSearchParams(location.search));
}

var cookieExist = Cookies.get('Lead');
var cookieData = null;
try {
  cookieData = cookieExist ? JSON.parse(cookieExist) : null;
} catch (e) {
  console.error("Error parsing UTM cookie:", e);
}

var urlParams = getAllUrlParams();
var isEmpty = jQuery.isEmptyObject(urlParams);

window.onload = function () {
  if (!isEmpty && cookieData === null) {
    console.log("Case 1 - parameters & no cookie exist => Create Cookie");
    createLead();
  }

  let compare = is_this_utm_equal_to_cookie_utm_values();

  if (!isEmpty && cookieData !== null) {
    if (!compare) {
      console.log("Case 3 - lead exists, but with different params");
      Cookies.remove('Lead');
      createLead();
    } else {
      console.log("Case 2 - lead exists with these params");
    }
  }

  if (isEmpty && cookieData !== null) {
    console.log("Case 4 - cookie exists but page without any UTM params");
  }

  // Ensure values are set after updates
  setUTMformValues();
};

function createLead() {
  var lead = { parameters: urlParams };
  Cookies.set('Lead', JSON.stringify(lead), { expires: 30 });

  // Short delay to allow cookie to update before setting form values
  setTimeout(setUTMformValues, 100);
}

function is_this_utm_equal_to_cookie_utm_values() {
  let updatedCookieData = Cookies.get('Lead') ? JSON.parse(Cookies.get('Lead')) : null;
  if (!updatedCookieData || !updatedCookieData.parameters) return false;
  for (const utm of my_utmParameters) {
    if (updatedCookieData.parameters[utm] !== urlParams[utm]) {
      return false;
    }
  }
  return true;
}

function setUTMformValues() {  
  const empty_param_case = "null";
  let updatedCookieData = Cookies.get('Lead') ? JSON.parse(Cookies.get('Lead')) : null;

  for (const utm of my_utmParameters) {
    set_utm_field(utm, updatedCookieData);
  }
}

function set_utm_field(utm_type, updatedCookieData) {
  let utm_value = updatedCookieData?.parameters?.[utm_type] || empty_param_case;
  let utm_nodes = document.getElementsByClassName(utm_type);
  if (utm_nodes.length > 0) {
    for (let i = 0; i < utm_nodes.length; i++) {
      utm_nodes[i].value = utm_value;
    }
  }
}
</script>


🔹 This script stores UTM parameters in a cookie for 30 days.

🔹 If the visitor navigates away but later submits the form, the UTM values persist in the form submission.

Step 3: Test & Verify

✅ Publish your Webflow site.

✅ Open the page with a UTM-tagged URL, such as:

https://yourwebsite.com/?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale

✅ Submit a test form and check the submission data in Webflow. You should see the captured UTM values!

Real-World Use Case

For my solar industry client, this solution helped them:

🔹 Track which ad campaigns were generating the most leads.

🔹 Understand which traffic sources led to the highest conversions.

🔹 Avoid manual work, the system automatically filled in UTM data across all forms.

Without this, they had no visibility into whether leads were coming from Google Ads, Facebook Ads, or organic search.

What’s Next?

Now that you know how to capture UTM parameters in Webflow forms, you might also want to track which exact page the form was submitted on.

If you’d like to capture both the URL and UTM parameters, check out my previous blog post where I walk through how to capture the page URL inside a Webflow form. This is especially useful if you’re using the same form across multiple pages but need to know exactly where submissions are coming from.

👉 How to Capture the URL of a Page in Webflow Forms

Next, I’ll cover how to pass this data to your CRM or email marketing tool, so you can track leads beyond the Webflow dashboard.

Stay tuned!

Have questions? Connect with me on LinkedIn and send me a message.

Written By

Sign up for our newsletter

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.