How to Capture UTM Parameters in Webflow Forms Automatically

To track your marketing attribution accurately, you must capture UTM parameters directly within your Webflow forms before sending them to your CRM. Start by adding hidden input fields inside your Webflow form block, naming them precisely after your tracking variables: utm_source, utm_medium, utm_campaign, utm_term, and utm_content. By embedding a lightweight JavaScript snippet in your page or global site settings, Webflow will automatically parse the visitor's URL query strings upon landing and inject those tracking values into the corresponding hidden fields seamlessly when the form is submitted.

‍

<script>‍document.addEventListener("DOMContentLoaded", function() {     
  // Function to get query parameters by name     
  function getQueryParam(param) {           
  const urlParams = new URLSearchParams(window.location.search);           
    return urlParams.get(param);    
  }     
  // List of UTM parameters to track     
  const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];     
  // Loop through and populate hidden form fields     
  utmParams.forEach(function(param) {         
    const paramValue = getQueryParam(param);           
    if (paramValue) {                 
      // Looks for inputs with matching ID or Name attributes                 
      const targetField = document.querySelector(`input[name="${param}"], input[id="${param}"]`);                 
      if (targetField) {                       
        targetField.value = decodeURIComponent(paramValue);                 
      }           
    }     
  });});
</script>

Once your Webflow form successfully captures hidden UTM data, you can seamlessly route this information to HubSpot using Make.com without writing complex API integrations. Create a new scenario in Make using a "Watch Form Submissions" Webflow trigger, which instantly captures incoming form data as a webhook payload. Next, add a HubSpot "Create or Update a Contact" module to your workflow, mapping the standard contact information along with your custom Webflow UTM fields directly to your matching HubSpot contact properties to preserve clean, multi-touch attribution data.

‍

Automating the pipeline between Webflow, Make, and HubSpot bridges the gap between top-of-funnel acquisition and bottom-of-funnel conversions, giving revenue teams complete visibility into marketing ROI. Instead of guessing which campaigns drive high-value leads, this closed-loop data flow ensures every closed-won deal in HubSpot is mapped back to its exact organic or paid source. Implementing this specific tech stack fundamentally improves data integrity, eliminates manual entry errors, and empowers growth marketers to scale ad spend efficiently based on real revenue metrics rather than vanity clicks.

‍

Want this built for you?

Webflowforge builds Webflow automation services that connect your forms, CMS, and CRM for service companies and SaaS teams. Prefer to skip the setup? Tell us about your project and we'll scope it with you.

Related guide: Webflow + HubSpot + Stripe: Fixing PLG Data Silos with n8n