Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Add hidden fields (e.g., utm_source, referrer) to your Webflow form.
  • Use JavaScript to auto-fill these fields with UTM parameters from the URL or the referrer URL.
  • Save, publish your site, and test that submissions include the tracking data.

To track the source of a form submission in Webflow, you can use hidden form fields combined with custom JavaScript or UTM parameters. Here’s how to set it up:

1. Add Hidden Fields to Your Webflow Form

  • Open your form in the Webflow Designer.
  • Drag a Form Block (or open an existing form).
  • Add hidden form fields using the "Add Field" panel.
  • Set the Field Type to Hidden.
  • Give each field a clear Name and ID such as:
  • utm_source
  • utm_medium
  • utm_campaign
  • referrer

2. Capture UTM Parameters via JavaScript

To auto-fill the hidden fields with UTM values:

  • Add the following JavaScript to your Page Settings → Custom Code → Footer section:
  • This script reads UTM parameters from the URL and assigns them to the hidden fields.
  • Sample code concept:
  • Parse window.location.search
  • For each UTM (like utm_source), match it to a corresponding hidden field by ID.
  • Use document.getElementById('utm_source').value = ... to assign values.

3. Capture Referrer URL (Optional)

To log the referring page (if no UTM tags are present):

  • In the same script, use:
  • document.getElementById('referrer').value = document.referrer
  • This captures the URL of the page that led the visitor to your form page.

4. Save and Publish Your Site

  • Save all form and script changes.
  • Publish your Webflow site to test the actual implementation.
  • Open a URL with UTM parameters (e.g., ?utm_source=facebook) and check that the values auto-fill the hidden inputs.

5. Validate via Form Submissions

  • Submit a test form.
  • Check your form submission entries in Webflow’s Forms tab or your connected tools (e.g., Zapier, Make, integrations).
  • You should see the hidden field values alongside the submission.

Summary

To track a form's source in Webflow, add hidden form fields and use JavaScript to auto-populate them with UTM parameters or the document.referrer. This lets you track which marketing channels or links contributed to form submissions without altering user-facing fields.

Rate this answer

Other Webflow Questions