How to Use Hidden and Calculated Field Types

This tutorial describes an application of the Hidden and Calculated field types in JetFormBuilder Forms to calculate values using formulas.

Hidden and Calculated Field Types

Let’s clear up what the Hidden Field means. In fact, the name speaks for itself. This field can contain the value that will not be visible on the front but can be used for calculations.

Calculated Field helps you make any calculations using math formulas based on macros and display the result on the front end. You can take the values for the formulas either from meta fields created previously for your custom post or from the fields filled on the front end by users.


If you take the value of the Hidden Field for the formula, be aware that it is attached to some meta field. The formula will work correctly only on those pages or posts where that meta field is added. For instance, the JetEngine’s meta fields can be used.

Let’s consider an example of using these fields. We’ll create a short form for a product purchase.

Build a Form

Initially, go to WordPress Dashboard > JetFormBuilder > Add New to build a form.

We delete all the default fields to build a form from scratch.

primary form view

Primarily, we add a Number Field to display the product’s price. Complete its FIELD LABEL and FORM FIELD NAME fields.

We also set this field as required by pushing the asterisk-shaped button above the field.

price field

Then, we scroll down to the Value tab and set the DEFAULT VALUE to “20,” the value that will be set as default in this Number Field when opening the form. 

Feel free to manually set any needed value here or push the “Dynamic Content Tag” button to see the available options for dynamic data pulling.

default value

Then, we place one more Number Field in the editor. This time, it will be called “Quantity” and will let users pick the number of the needed items.

Here, we complete the FIELD LABEL and FORM FIELD NAME fields as well.

quantity field

Also, we complete the MIN VALUE and MAX VALUE fields in the Field tab with the numbers that will limit the entered quantity.

min and max value

Now, we add the Hidden Field. In this tutorial, we’ll create a field for tax, which will be further added to the final price so that visitors won’t see the “Tax” field separately on the front end, but its value will be used in the formula calculating the “Total Price.”

Initially, we complete the FIELD LABEL and FORM FIELD NAME fields.

Next, we select the “Current Post Meta” as the FIELD VALUE option and input the meta field name ID into META FIELD TO GET VALUE FROM.

tax field

This value stands for pulling data from the meta field. 

It can be filled in by opening the post editor of the post type to which the meta field is attached. In the given case, we use JetEngine’s meta box attached to the default WordPress “Pages.”

tax field for the page

Now, back in the form, we add a Calculated Field to see how the Hidden Field can be used with it. 

This field’s purpose is to calculate the total price of the product, including tax. 

So, complete the FIELD LABEL and FORM FIELD NAME fields of this Calculated Field.

calculated field

Right in the Calculated Field, we should input a math formula, which will further calculate the product’s total price depending on the quantity a visitor selects and the tax.

calculated field value

In this particular case for our tutorial, the calculation formula consists of product quantity multiplied by the product price plus tax:


where %tax_field% is a Hidden Field.


The formula will work correctly only if you use the fields with number values.

Also, we set the CALCULATED VALUE PREFIX in the Field tab. It will be displayed on the front end later.

calculated value prefix

The last field we added is called Action Button, and it will serve as the submit button for the form.

When your form is ready, click the “Publish” button.

action button block

Add a Form to the Page

Go to the page editor where you want to place the form. It can be either Gutenberg, Elementor, or Bricks page builders.

Find the JetForm block/widget/element and place it on the page.

Once the page is customized, press the “Publish/Update” button to save the result.

form in gutenberg

Check the Form on the Front End

Open the page on the front end to see the form in work.

price form on the front end

In our case, the “Price” and “Quantity” fields are visible, and the “Tax” field is not; however, in the total calculation formula, its value is considered.

We can describe it as a math formula:

20 (“Price”) * 1 (“Quantity”) + 5 (“Tax” (Hidden Field)) = 25

If a visitor changes “Quantity,” the formula still calculates the total price considering the “Tax” value.

price form in action

That’s all. Now you know how to use Hidden and Calculated Field types to create formulas based on the values from the JetFormBuilder form fields on your WordPress website.