From this tutorial, you will get knowledge of how to work with Hidden and Calculated field types to create math formulas in order your visitors could use Forms on the frontend.
Hidden and Calculated field types
Let’s clear up what Hidden field type means, however, the name speaks for itself. In this field, you may add information which won’t be visible on the frontend, but the data you specified will be used in math formula for calculations.
Consequently, let’s see what Calculated field type means. With the help of this field type, you can make any calculations using math formulas based on macros and display the result on the frontend. Here, you have an option to use data from either meta fields created previously for your custom posts, or from Form fields you created.
Using Hidden and Calculated field types
Let’s consider an example of using these fields. We’ll create a short Form for a product purchase.
Step 1 – Beforehand we created fields to display product’s Price:
Step 2 – Now, let’s create Hidden field type. In this tutorial, we’ll create a field for Tax, which further will be added to the final price, so that on the frontend visitors won’t see Tax field separately, but its value will be considered in the formula calculating Total Price.
Create a new field and select Hidden from the dropdown list in the Type:
and input Name value:
Step 3 – Next, in the Field Value select Current Post Meta and input meta field name ID:
This value stands for pulling data from your Custom Post Type meta field. Let’s see where it can be located:
Step 4 – Now, let’s create a Calculated field type and see how Hidden field type can be used there. We assume this field’s purpose is to calculate the total price of the product, including tax. Create a new field and select its type as Calculated and input a name for it.
Step 5 – In the Calculation Formula field, you need to input a math formula, which will further calculate the product’s total price depending on the quantity a visitor selects. Plus, we need it to consider tax and summarize the final price accordingly.
In this particular case for our tutorial, our Calculation Formula consists of Product Quantity multiplied by the Product Price plus Tax:
where %FIELD::Tax% is a Hidden field type.
Step 6 – Add Calculated Value Prefix, which will be displayed on the frontend and click Apply Changes button:
Step 7 – When your Form is ready, click Publish button:
Step 8 – Let’s see how it works on the frontend:
where Price and Quantity are visible, and Tax field is not, however, in the Total calculation formula its value is considered.
If we describe 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 tax value:
That’s all! Now you know how to use Hidden and Calculated field types to create formulas based on the values from the form fields. Hoping, you’ll enjoy managing your forms and create them effortlessly!