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.

NOTE

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:

%price_field%*%quantity_field%+%tax_field%

where %tax_field% is a Hidden Field.

NOTE

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.

There are two ways the WordPress form Repeater Field value can be used in the formula of Calculated Field – as a Row Count and as a Custom Calculated Value. You can choose how to use it in the Calculate repeater row value drop-down list of the Field Settings menu section.

Rows Count

This option counts the number of items added to the repeater by the user. That number can be used in the WordPress Calculated Field formula.

defining the row value

Let’s assume that you are creating a gift box Order Form. Every user can order several boxes, so you add a repeater there. The price for every box is the same, and you want to show the users the Total Price of their order. To do that, you can put a Calculated Field under the WordPress form Repeater Field and make it multiply the number of boxes by the price. 

setting calculated field data

The price here is “10”, so the number of boxes is just multiplied by 10. Here’s how it will look like on the frontend:

Сustom Calculated Value

If you choose the “Custom” option in the Calculate repeater row value drop-down list, that will add a built-in WordPress calculated field to the repeater.

configuring custom calculated value

This field is just the same as a separate Calculated Field. The formula is added the same way and the same rules apply. In the example, it counts the sum of chosen values assigned to the Radio (“Packing”) and Checkbox (“Sweets”) fields options. The built-in field will calculate the resulting value for every added repeater block according to the formula.

Afterward, when you use the Repeater macro code (%FIELD::gift_box%) in the WordPress Calculated field outside of the repeater, it will insert the sum of calculated values for every WordPress repeater block added by the user.

getting sum of the calculated values on the frontend

On the frontend, it will look like that:

The value of the Hidden Field can be used in the formula of the Calculated Field just as the value of any other field. However, the fact that this field is invisible to the user gives you an opportunity to add some values secretly. For example, with the help of the Hidden Field, you could add taxes to the Total Price formula.

Let’s assume we are creating an Order Form for a gift box. The user can choose which items to put inside, and you want to show the Total Price of the order and include taxes in it.

First of all, create a field with options that will have different values. For example, a Radio Field. Insert the values that will be used in the formula into the Calculate bar.

Now, the Hidden Field. Let’s assume that you have to pay 5% of the item’s price as a tax. So, the Value will have to be set to “0.05”.

The total price of the item will be the price of the item plus 5% of the price for taxes. That’s why the Calculated Field formula will look like that:

%FIELD::gifts_set%+%FIELD::gifts_set%*%FIELD::tax%

Let’s also add a Calculated Value Prefix and Suffix, so that the user will be able to understand which number he/she is being shown.

configuring calculated field

Press the “Publish” button at the top and place the table on the page.

Here’s how it looks like on the frontend:

As in every multi-choice field, the Checkbox Field creates a list of options, and each of those options can have different values. The difference is that the user can select not one but several variants. Still, the value of the Checkbox Field can be used in the formula of Calculated Field.The values you type into the Calculated bar will be used in the formula.

editing options for checkbox and calculated fields

If you use the macro code of the Checkbox Field in the formula, it will insert the sum of values selected by the user.

calculated checkbox form look on the frontend
calculated checkbox form look on the frontend

Here’s how it will look like on the frontend: