import { MdxImage } from "@/components/MdxImage";

import FilledHiddenFields from "./filled-hidden-fields.webp";
import HiddenFieldResponses from "./hidden-field-responses.webp";
import HiddenFields from "./hidden-fields.webp";
import InputHiddenFields from "./input-hidden-fields.webp";

export const metadata = {
  title: "Hidden Fields",
  description: "Add hidden fields to your surveys to capture additional data without requiring user inputs!",
};

# Hidden Fields

Hidden fields are a powerful feature in Formbricks that allows you to add data to a submission without asking the user to type it in. This feature is especially useful when you already have information about a user that you want to use in the analysis of the survey results (e.g. `payment plan` or `email`)

<Note>Hidden fields are now available in the Formbricks in-app and website surveys as well</Note>

## How to Add Hidden Fields

### Enable them in the Survey Builder

1. Edit the survey you want to add hidden fields to & switch to the Questions tab and scroll down to the bottom of the page. You will see a section called **Hidden Fields**. Make sure to enable it by toggling the switch.

<MdxImage
  src={HiddenFields}
  alt="Enable Hidden Fields"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

2. Now click on it to add a new hidden field ID. You can add as many hidden fields as you want.

<MdxImage
  src={InputHiddenFields}
  alt="Add Hidden Fields"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

<MdxImage
  src={FilledHiddenFields}
  alt="Filled Hidden Fields"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

### Set Hidden Field

<Col>
<CodeGroup title="Example Screen from which the User filled it">

```sh
formbricks.track("my event", {
  hiddenFields: {
    screen: "landing_page",
    job: "Founder"
  },
});
```

</CodeGroup>
</Col>

## View Hidden Fields in Responses

These hidden fields will now be visible in the responses tab just like other fields in the Summary as well as the Response Cards, and you can use them to filter and analyze your responses.

<MdxImage
  src={HiddenFieldResponses}
  alt="Hidden Field Responses"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Use Cases

- **User Metadata**: You can add hidden fields to capture user metadata such as user ID, email, or any other user-specific information.
- **Survey Metadata**: You can add hidden fields to capture other metadata, e.g. the screen from which the survey was filled, or any other app specific information.
