How to add hidden fields to forms for tracking

Hidden fields let you include additional data in a form without users seeing or interacting with it. They’re useful when you want more context about a submission without changing the form’s appearance.

When hidden fields are useful

Hidden fields work well for tracking where submissions come from.

For example, if you have multiple landing pages with forms that all send data to the same webhook or Google Sheet, you can add a hidden text field with values like page-1 or page-2. This makes it easy to see which page generates the most submissions.

Note: Hidden fields in Framer don’t automatically bind to UTM parameters. UTM tracking for form submissions is available on Scale and Enterprise plans. You can also use a code override to pass UTM parameters into hidden fields if needed.

How to add hidden fields

Follow these steps to add a hidden input field that will be included in form submissions without being visible to users.

1. Select your Form component on the canvas.

2. Add an Input field to the form.

3. Select the input field, then open the right-hand panel.

4. Enable the “Hidden” property.

5. Set a Name for the input field. This name is what appears in the form submission.

6. Remove the label, if present, to keep the field fully invisible.

Note: Don’t hide the input using the Visible property. Invisible inputs are excluded from form submissions entirely. Always use the “Hidden” setting to ensure the field is included in the submitted data.