How can I include UTM parameter data in my Webflow form submission to track sources like social media and Google?

If you want to track UTM parameters in your Webflow form submissions, you'll need to capture these parameters and include them when the form is submitted. Here's how you can do it:

​

1. Use Custom Code to Capture UTM Parameters

• Access your Webflow project settings and go to the Custom Code section.
• Add the script in the Footer Code section that detects UTM parameters (e.g., utm_source, utm_medium, utm_campaign) from the URL and stores them in cookies or local storage.

​

2. Create Hidden Fields in Webflow Form

• In your Webflow form, add hidden input fields for each UTM parameter you want to track (e.g., hidden-utm-source, hidden-utm-medium, hidden-utm-campaign).
• Set the ID of these fields to match the parameter names for easy reference.

​

3. Populate Hidden Fields with UTM Data

• Use JavaScript (added in the Custom Code section or embedded on the page) to retrieve UTM data from cookies or local storage when the page loads.
• Set the value of each hidden input field in the form with the corresponding UTM data.

​

4. Test Your Form Submission

• Publish your site and test the form by visiting your site URL with UTM parameters (e.g., ?utmsource=facebook&utmmedium=cpc).
• Submit a form and check the submissions in Webflow to ensure that the UTM data is included.

​

Summary

To track UTM parameters in Webflow form submissions, capture the parameters using custom JavaScript, and store them in cookies or local storage. Then, populate hidden form fields with these values before the form is submitted. This allows you to include the UTM tracking data with each form submission, providing insights into the sources and mediums that drive traffic to your site.