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.