How to use hidden inputs in Webflow

Setting up some hidden input fields in a form can be useful to include some extra data into the payload to, for example, track where your leads come from. In this brief article, we will show how to add some input fields, make them hidden, and fill them automatically with Javascript.

---

1. Create the Form Inputs

Start by adding your form as usual in Webflow. Inside the form:

1. Add normal Plain Text Field inputs.
2. Name them clearly, for example:
   • utm_source
   • utm_medium
   • utm_campaign
3. Keep them inside a wrapper (e.g. utm_fields) so they’re easy to manage in the Navigator.

These inputs will later be filled via JavaScript, not by the user.

---

2. Hide the Inputs with a Utility Class

Webflow does not offer a way to set the type attribute to hidden in the UI, so we need to use css to hide the inputs.

1. Select each UTM input (or their wrapper).
2. Add a class such as field-label-hidden (or any utility name you prefer).
3. Set the display property to none.

This ensures the fields are still part of the form submission, but never visible or interactive for users.

---

3. Add an Embed to Auto-Fill the Values

Now add a Code Embed element inside the form (or anywhere on the page) and include a small script that reads URL parameters and injects them into the hidden inputs.

This is an example, but it can be done in many different ways, choose your favorite approach:

<script>
  const params = new URLSearchParams(window.location.search);

  ['utm_source', 'utm_medium', 'utm_campaign'].forEach(param => {
    const field = document.querySelector(`input[name="${param}"]`);
    if (field && params.get(param)) {
      field.value = params.get(param);
    }
  });
</script>