How to Capture UTM Parameters in Webflow Forms?

Any sustainable business growth must identify which parts of the business strategy generate the best customers with a positive ROI to focus on the marketing channels that work and ditch those that don’t.

Though if you can’t measure which marketing campaigns generate leads and customers, how will you know where to focus your time and resources?

B2B and other businesses that rely on lead generation can easily measure marketing performance by tracking the UTM source of every lead in your CRM.

This post demonstrates how to capture UTM parameters in Webflow Forms and send that data in the form fields to display them inside your CRM for reporting.

Also read: how to reject non-business emails from Webflow form submissions?

Capture and push UTM to any form in Webflow + store parameters in a cookie when users move from one page to another

Copy-Paste Before body (Per page or entire website)

The code structure:

1. Get URL parameters.
2. Get Webflow form elements by jquery class selector and set the value to this UTM param X.
3. It’s useful to store UTM params inside a cookie (To keep the UTM also if the user goes from page X to Y).

<!-- JS Cookie Library -->
<!-- Source: https://github.com/js-cookie/js-cookie -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

<!-- UTM Cookie Tracking for Tribal -->
<script>
const my_utmParameters = ["utm_source", "utm_medium", "utm_campaign"];

// Get all URL parameters as an object
function getAllUrlParams() {
  return Object.fromEntries(new URLSearchParams(location.search));
}

const cookieExist = Cookies.get('Lead');
const getAllUrlParamsObj = getAllUrlParams();
const getAllUrlParamsJSON = JSON.stringify(getAllUrlParamsObj);
const isEmpty = jQuery.isEmptyObject(getAllUrlParamsObj);

// Case 1: UTM parameters exist, cookie does not exist
if (!isEmpty && cookieExist === undefined) {
  console.log("Case 1 - Parameters found & no cookie exists. Creating cookie.");
  createLead();
  setUTMformValues();
}

// Case 2 or 3: UTM parameters exist and cookie exists
if (!isEmpty && cookieExist !== undefined) {
  const isSame = isUTMEqualToCookieValues();

  if (!isSame) {
    console.log("Case 3 - Cookie exists, but with different UTM values. Resetting cookie.");
    Cookies.remove('Lead');
    createLead();
    setUTMformValues();
  } else {
    console.log("Case 2 - Cookie exists with matching UTM values.");
    setUTMformValues();
  }
}

// Case 4: Cookie exists, no UTM parameters on the page
if (isEmpty && cookieExist !== undefined) {
  console.log("Case 4 - Cookie exists but page has no UTM parameters.");
  setUTMformValues();
}

// Create the cookie with UTM parameters
function createLead() {
  const lead = {
    parameters: getAllUrlParamsObj
  };
  Cookies.set('Lead', lead); // Optional: { expires: 2 } for 2-day expiration
}

// Compare UTM parameters from URL and cookie
function isUTMEqualToCookieValues() {
  const storedUTM = JSON.parse(cookieExist).parameters;
  for (const param of my_utmParameters) {
    if (storedUTM[param] !== getAllUrlParamsObj[param]) {
      return false;
    }
  }
  return true;
}

// Populate UTM fields in Webflow forms
function setUTMformValues() {
  const emptyParamFallback = "null";
  const leadParams = JSON.parse(Cookies.get('Lead')).parameters;

  for (const param of my_utmParameters) {
    const utmNodes = document.getElementsByClassName(param);
    if (utmNodes.length > 0) {
      for (let i = 0; i < utmNodes.length; i++) {
        utmNodes[i].value = leadParams[param] || emptyParamFallback;
      }
    }
  }
}
</script>

Populate UTM parameters in a hidden field inside the form

To do that, insert an embed element inside the form, then add the following javascript code.

<!-- UTM Hidden Fields for Webflow or any HTML Form -->
<input type="hidden" class="utm_source" name="utm_source" placeholder="utm_source">
<input type="hidden" class="utm_medium" name="utm_medium" placeholder="utm_medium">
<input type="hidden" class="utm_campaign" name="utm_campaign" placeholder="utm_campaign">

You can repeat the second step in any form across your website, and you will receive UTM parameters from your marketing campaigns or affiliate links inside your form submissions.

Credit: Siton_Systems