Hidden Fields

Introduction

Hidden fields are a type of field not visible to the user. They are used for storing and processing data that the user does not need to see or interact with. Note that hidden fields are different from fields that are made hidden or invisible using conditional logic.

If you were building a regular HTML form a hidden field would look like this:

<input type="hidden" name="field_name" value="value"/>

Luckily, with Formcrafts you don’t need to write any code to add hidden fields to your form. You can add them via the form editor.

Adding a hidden field

You can add a hidden field via Add Field → Hidden on the form editor page. A hidden field has two configuration options: the label of the field, and the value.

When you click on the cog icon to edit the field you can see the field ID on the top-left corner. Note this field ID as we will use it below.

Setting the field value

Since the field doesn’t ask for user input, you can set the value of the hidden field in a few different ways:

Static value

If you want the hidden field to always have the same value, you can simply type it in the value field when editing the field in the form editor.

A static value can be a simple string, like yes or no. It can also contain field references, like @Your name or @Email.

Prefilled value

A common use case for hidden fields is to prefill them with data from the URL. This can be done by adding a query parameter to the form URL that contains the value you want to prefill.

For example, if you want to prefill a hidden field with the value 123, you can add ?field4=123 to the URL.

When using URL prefill you can either use the field ID or the field label. If our hidden fields is labelled username you can use ?username=123 to prefill the field.

Here is an example of prefilling name and using that to personalize the form:

Learn more about form prefilling here.

Calculated value

You can use math calculations in the value of a hidden field. This allows the hidden field to store the result of a math formula which can contain inputs from other fields.

In the above example we have two input fields, with the IDs field1 and field2. We are using a hidden field to store the sum of the two input fields. The value of the hidden field is set to {field1 + field2}.

Now if you want to reference the sum again (example in another rich text field) you can simply reference this hidden field, instead of having to use the math calculation in multiple places.

One good example to look at is our mortgage calculator form ↗, which uses hidden fields to calculate and store the Future value factor.

Conditional value

You can use conditional logic to set the value of a hidden field.

For example, saw we are building an approval form. In the backend we use the value of the hidden field labelled manual_approval to determine if the form needs manual approval.

In the above example, we are setting the value of manual_approval to yes if either of the two conditions are met:

1. The Amount is greater than 1000.
2. The Amount is greater than 500 and Request type is Initial.

Debugging

While hidden fields are not visible to the user, you can still see them and their value when viewing the form in test mode. Test mode is accessed by clicking on Preview on the form editor screen. This can be useful for debugging purposes.

Here is our mortgage calculation form’s preview mode, showing hidden fields that store the future value and monthly amount: