As you already know, the Calculated field works with formulas. You set the counting algorithm, and the result is shown in a separate row automatically after the user inserts some numbers to the appropriate fields. However, the capabilities of the Calculated field can be sufficiently expanded if you combine its features with the functionalities that other fields offer. In this tutorial, we will see how the Hidden and Repeater fields work together with the formulas. 

Hidden and Calculated field

A Hidden field can be used to add to the formula some values that are not taken from the form fields. As it is obvious from its title, the value you will add in such a way will be invisible to the user. For example, you can create a Hidden field that will include tax value and use it to count the total price. 

Let’s assume you want to create a form for a renting site and automatically count the total price according to the number of visitors, the price for the concrete room per visitor, and the tax.

1 Step— Create a form with necessary fields

In your website’s dashboard go to the JetForms > Add New. Give the form a title and add all the necessary blocks – a Number field, a field for the price (in this example, it will be the Radio field), Hidden and Calculated fields.

In the Radio field’s Fill Options From drop-down window, you should choose the “Manual Input” option. The Labels of the items have to match the titles of the rooms. Put the price per visitor in the Value and Calculated fields. 

The Hidden field can be filled in two ways. The first is to type the tax or tax coefficient manually. This way will be perfect if you have a static tax value that you have to pay for every room. In this case, choose the “Manual Input” option in the Field Value drop-down menu and type the value into the Value bar. In this tutorial, we will add 10% of the total price as a tax, so the Value is “0.1”. 

Besides that, you can use the value of the meta field for the Hidden form field. It will be possible if you have the JetEngine plugin or any other addon that can create custom post types and custom meta fields. For example, you have a different tax value for every room you offer for rent. In this case, you have to choose the “Current Post Meta” option in the Field Value select. Afterward, type the slug of the tax meta field into the Meta Field to Get Value From bar. Certainly, you will have to create the Custom Post Type and custom meta field for taxes first. 

2 Step— Add the formula

It is time to add the formula to the Calculated field text area. The formula for this tutorial’s example looks like that:

%FIELD::number%*%FIELD::room_price%+%FIELD::number%*%FIELD::room_price%*%FIELD::hidden_tax_percent%

It multiplies the number of visitors and the price while adding 10% of that sum as a tax afterward (the total price multiplied by the coefficient we put as a hidden value). If you use the static number as a tax, just add the macro code of the Hidden field instead of adding the percentage. 

3 Step— Do the styling

If you have the JetStylemanager plugin, you can customize the form and make it more attractive. The appearance of every field should be changed separately, so click on it and then hit the “Block Style” button. 

The resulting form can look like this, for example:

When you are done creating the design of the form, click the “Publish” button.

4 Step— Place the form on the page

Open the page where you would like to have the form in the Gutenberg Editor. Click the “Add block” button and insert the Form block into the page. In the Choose Form drop-down menu, select the form you’ve just created. Push the “Update” button and go take a look at the frontend. 

As you can see, the calculations are done right. The price for the room1 was set to “120”.

120*2+120*2*0.1=264

If the Choose the room option is changed, the calculation result will change as well. 

Repeater and Calculated field

There are several ways of combining Repeater and Calculated fields. Let’s take a closer look at each of them.

The Calculated field outside of the Repeater

The first option is to make the Calculated field count the number of repeaters added by the user. A new repeater appears when the user hits the “Add New” button and fills in the fields that the repeater contains. When you place the Calculated field after the Repeater field and use the repeater’s name in the formula (%FIELD::repeater’s_name%), it will show the number of repeaters the user added. You can also use that number to calculate more complicated formulas.

As an example, let’s take the Rent form from the previous part of the tutorial. Instead of the Number field put the Repeater with a single Text field. The user doesn’t have to type in the number of visitors but add them in the repeater by listing their names. Afterward, the Calculated field will multiply the number of added visitors by the price of the chosen room. 

On the frontend it will look like that:

So, there are two visitors and the price per visitor for the room1 is set to “120”. As you can see, the calculations are correct.

The Calculated field inside the Repeater

The second option is to place the Calculated field as one of the fields inside the repeater. In this case, the Calculated field will count the formula separately for every item of the repeater.

As an example, let’s create an event registration form. The repeater will contain the “Name of the family” Text field, two Number fields for adults and children, and the Calculated field that will add the number of adults and children to show the number of visitors from this very family that will attend the event. Here’s how it will work:

The Calculated field both inside and outside of the Repeater

When you place the Calculated field only outside of the repeater and use the repeater’s name as a formula, it will count the number of items added. However, you can make it count the sum of the calculations performed inside the repeater.

Open the settings of the Repeater field and unfold the Field Settings section. In the Manage repeater items count drop-down menu, choose the “Custom” option.

The Calculation Formula for Repeater text area will appear on the top of the Repeater field block. Copy the formula from the Calculated field into that text area.

Use the name of the repeater field as a formula in the outside Calculated field.

Here’s how it will work on the frontend:

That’s it, now you know how to combine the Calculated field with the Hidden and Repeater fields within the JetFormBuilder plugin. Good luck creating convenient forms!