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:
- 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.
- 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.