How can I capture UTM parameters to track my marketing campaign?

Knowing who submitted a form on your website is important — but understanding how they got there adds a whole new level of insight. By capturing UTM parameters, you can trace a submission back to a specific campaign, platform, or source, such as a Google ad, a LinkedIn post, or an email newsletter. This allows you to see which channels are driving real results, so you can invest more strategically in what’s working and cut back on what isn’t. It’s a simple change that can make your marketing data much more actionable.

UTM parameters are tags added to URLs that help you identify where your website traffic is coming from — whether it’s a specific email, ad, or social post. They’re essential for understanding which marketing efforts are working.

If you'd like to track UTM data (like source, medium, and campaign) and capture it in your forms, we can set this up on your site.

We’ll typically:

• Add a script to store UTM parameters in a browser cookie or local storage

• Modify the form fields to include those parameters when someone submits a form

• Send that data to your CRM or email tool along with the submission

How to Implement this in Weblfow?

With a little custom code and some hidden inputs, you can easily start capturing UTM data in Webflow. This approach uses name attributes to store the information, which works seamlessly even if you have multiple forms on a single page.

1. Create Hidden UTM Fields in Your Webflow Forms

First, we’ll add hidden input fields to store each UTM parameter.

In Webflow Designer:

• Open your form
  
• Add five plain text input fields
  
• Set each one to Hidden and give it the following Name attributes:
  
  • utm_source
  • utm_medium
  • utm_campaign
  • utm_term
  • utm_content

Example HTML:

<input type="hidden" name="utm_source">
<input type="hidden" name="utm_medium">
<input type="hidden" name="utm_campaign">
<input type="hidden" name="utm_term">
<input type="hidden" name="utm_content">

2. Add JavaScript to Capture & Populate UTM Parameters

Next, we’ll grab UTM parameters from the page URL and automatically insert them into every form on the page.

Add this example script in your Page Settings → Before </body> tag (or in your site-wide embed if you want it on all pages):

<script>  

	function getUTMParameters() {   
		const urlParams = new URLSearchParams(window.location.search);    	
		const utmFields = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];    	
	const utmData = {};‍  

	utmFields.forEach(param => {     	
	const value = urlParams.get(param);    		
		if (value) {       
		utmData[param] = value;     
		} 
	});‍   

	return utmData; 
	}‍  	

	function populateUTMFields() {   
		const utmData = getUTMParameters();‍   	
			document.querySelectorAll('form').forEach(form => {  		
			Object.entries(utmData).forEach(([key, value]) => {    
			const input = form.querySelector(`[name="${key}"]`);   
			if (input) {     		
			input.value = value;  
			}  	
		});   
	}); 
	}‍

document.addEventListener('DOMContentLoaded', populateUTMFields);

</script>‍

3. Test Your Setup

Once implemented, it’s important to test that UTM data is being captured correctly.

Step 1: Add test UTM parameters to your page URL

https://yoururl.com/contact-us?utm_source=testsource&utm_medium=testmedium&utm_campaign=testcampaign&utm_term=testterm&utm_content=testcontent

Step 2: Open DevTools → Inspect the form → Verify the hidden fields contain the test values.

Step 3: Submit the form and check your CRM or email tool to confirm that the UTM values are recorded with the submission.

Why it’s useful:

You’ll know not just who submitted the form — but how they found you.

✅ If you're running ads or multi-channel campaigns and want to set this up, reach out to us and we’ll take care of it.