How can I track a form's source in Webflow using hidden fields?

TL;DR

Add hidden input fields in the Webflow form to capture UTM parameters and the referrer URL.
Use JavaScript to extract URL parameters and populate the hidden fields.
Test by submitting the form with UTM parameters in the URL and reviewing the collected data.
Optionally, use localStorage to persist tracking data across pages.

To track a form's source in Webflow, you can use hidden fields that capture URL parameters or referral data. Here's how you can set it up:

1. Add Hidden Fields to Your Webflow Form

Go to the Form Block in Webflow Designer.
Add a New Input Field, then set its Type to Hidden.
Set the Name/ID to something relevant, like utm_source, utm_medium, or referrer_url.
Repeat for any other tracking fields you need.

2. Use JavaScript to Populate Hidden Fields

Insert JavaScript to extract URL parameters and set them into the hidden fields.

Go to the Page Settings where the form exists.
Add the following script inside the Before tag area:

<script>document.addEventListener("DOMContentLoaded", function() {    const params = new URLSearchParams(window.location.search);    // Set UTM parameters if they exist    document.querySelectorAll("input[name='utm_source']").forEach( input => input.value = params.get('utm_source') || '' );    document.querySelectorAll("input[name='utm_medium']").forEach( input => input.value = params.get('utm_medium') || '' );    document.querySelectorAll("input[name='utm_campaign']").forEach( input => input.value = params.get('utm_campaign') || '' );    // Capture and store referrer URL    document.querySelectorAll("input[name='referrer_url']").forEach( input => input.value = document.referrer );});</script>

3. Test Your Form with Sample URL Parameters

Open your webpage with a test URL, e.g.,
https://yourwebsite.com/form-page?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale
Fill out the form and submit it.
Check the form submission in Webflow’s Forms dashboard or your integrated tool (e.g., Zapier, Airtable) to confirm that the UTM fields are recorded.

4. Store Tracking Info Across Pages (Optional)

If users navigate between pages before submitting the form, store UTM parameters using localStorage:

<script>document.addEventListener("DOMContentLoaded", function() {    const params = new URLSearchParams(window.location.search);        // Save UTM parameters in localStorage    ['utm_source', 'utm_medium', 'utm_campaign'].forEach(param => {        if (params.get(param)) localStorage.setItem(param, params.get(param));    });    // Retrieve stored values and set hidden fields    document.querySelectorAll("input[name='utm_source']").forEach(input => input.value = localStorage.getItem('utm_source') || '' );    document.querySelectorAll("input[name='utm_medium']").forEach(input => input.value = localStorage.getItem('utm_medium') || '' );    document.querySelectorAll("input[name='utm_campaign']").forEach(input => input.value = localStorage.getItem('utm_campaign') || '' );});</script>