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

To track the source of a form submission in Webflow, you can use hidden fields within your form. This allows you to collect valuable data about where your users are coming from without them needing to enter this information manually.

​

1. Add Hidden Fields to Your Form

• Select your form on the Webflow page.
• Add a new form field by dragging the "Hidden" field type from the Elements Panel.
• Name the hidden field appropriately (e.g., source, campaign, etc.).

​

2. Modify Page URL to Include Parameters

• Update your marketing or direct links to include query parameters that specify the source (e.g., ?source=google_ads).
• Use different parameters for different campaigns or sources.

​

3. Use JavaScript to Populate Hidden Fields

• Access the Page Settings from the Designer.
• Go to the "Custom Code" area and add a small script in the "Before </body> tag" section:

  ```javascript

  <script>

    const urlParams = new URLSearchParams(window.location.search);

    const sourceParam = urlParams.get('source');

    if (sourceParam) {

      document.querySelector('input[name="source"]').value = sourceParam;

    }

  </script>

  ```

​

4. Test the Form Submission

• Publish your Webflow site and test by visiting the page with the query parameters in the URL (e.g., yourpage.com?source=google_ads).
• Submit the form and check if the source information is captured in your form submissions.

​

Summary

By adding hidden fields and a small JavaScript snippet, you can track the source of form submissions in Webflow. Adjust your URLs to include source parameters, and the script populates the hidden field accordingly. This technique helps you understand where your traffic is coming from efficiently.