Retrieving UTM Parameters and Adding Hidden Inputs to Forms

Intro

This guide walks through how to retrieve UTM parameters from the URL and dynamically append them as hidden input fields within a Webflow form. By targeting the correct form element, the hidden inputs can be seamlessly added—only when UTM data is present—ensuring the form still functions normally otherwise. This technique strengthens marketing attribution and analytics, making it easier to assess the effectiveness of campaigns. Before publishing, be sure to review the custom code for accuracy and proper implementation.

‍

‍

Custom code

Example code that can be used to look for UTM parameters and add them to the target form.

// Wait for the DOM to be fully loaded before executing the script
window.addEventListener("DOMContentLoaded", function () {
  // Get the form element by its ID
  const form = document.getElementById("form");

  // If the form doesn't exist on the page, stop execution
  if (!form) return;

  // Define a whitelist of allowed UTM parameters for security
  const allowedParams = new Set([
    "utm_source",
    "utm_medium",
    "utm_campaign",
    "utm_term",
    "utm_content"
  ]);

  // Parse the URL's query string into key-value pairs
  const params = new URLSearchParams(window.location.search);

  // If there are no query parameters, exit early
  if ([...params].length === 0) return;

  // Loop through each query parameter
  params.forEach(function (value, key) {
    // Only process parameters that are explicitly allowed
    if (!allowedParams.has(key)) return;

    // Sanitize the value by removing potentially dangerous characters
    // This keeps only alphanumeric characters, underscores, dashes, and spaces
    const sanitizedValue = value.replace(/[^\w\s-]/g, "").trim();

    // Skip appending if the sanitized value is empty
    if (!sanitizedValue) return;

    // Create a hidden input field with the sanitized key and value
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = key;
    input.value = sanitizedValue;

    // Append the hidden input to the form
    form.appendChild(input);
  });
});

‍

Cloneable

Inspect and clone this project to investigate/test as needed: https://webflow.com/made-in-webflow/website/hidden-utm-params-in-form.

‍

Considerations

Form Element Targeting

• Ensure the form ID is correct: The script uses document.getElementById("form"). In Webflow, form elements often have auto-generated IDs unless explicitly set.
  • Fix: Use a specific, unique ID set manually in Webflow or switch to document.querySelector("form") if there's only one form on the page.
• Avoid ID conflicts: If multiple forms exist with the same ID, only the first match will be targeted—others will be ignored.

UTM Parameter Integrity

• Case sensitivity: URLs might include UTM parameters in varying cases (e.g. utm_source vs UTM_Source). Normalize if needed.
• Parameter noise: This script will append all URL parameters, not just UTMs. If you want to capture only marketing-related ones, you might want to filter:

Behavior in Edge Cases

• No parameters: Script exits silently—this is good. But logging might help during debugging.
• Form doesn’t exist: Also exits safely, but consider adding a dev console warning to catch misconfigurations.

Security and Data Handling

• Data trust: UTM parameters come from the user’s URL—never trust them blindly. If this data is later sent to third-party services or used in reports, sanitize or validate as needed.
• PII leak risk: If someone passes email or sensitive info as a query param (e.g., ?email=john@example.com), it will be captured and submitted. You may want to filter or block unexpected fields.

Strategic Use

• Analytics alignment: Ensure the captured UTM data matches what's expected in your analytics platform (GA4, HubSpot, etc.).
• Multi-page flows: This script works only on the page where the user lands. If the form is on a different page, consider storing UTMs in sessionStorage or cookies for retrieval later (if applicable).