How to create a calculator
Step-by-Step Guide
Last updated
Step-by-Step Guide
Last updated
In this manual, we will review the following:
To create a new calculator follow WP Dashboard > Cost Calculator and click the Create button to create a new calculator.
If you do not have any saved calculators, in the Calculators tab there will be only Create and Import options.
The "Create" button opens the Templates library and you can select one of them or create a blank calculator to start from scratch:
You can also use one of the prebuilt ready-to-use calculators using the templates. Refer to this manual for more information:
The calculator elements will appear on the left. Begin adding desired elements to your new form.
You can rename the calculator by clicking the Pencil icon:
There are two ways to add elements to the calculator - clicking on the elements and drag and drop:
After adding a new element to your calculator, this element's settings will be provided to fill. Add all necessary data to the dragged element and save your work.
All elements have unique settings. To learn about the settings and functionalities of the elements' refer to this section:
Add other elements to your calculator due to wish. As an example, you can check the built calculator below, with two extra elements added: Checkbox and Basic Slider Button
Add the Formula field and write down your formula to calculate the total cost. You can have more than one formula field as well:
Do not forget to add at least one formula element to your calculator at the end to make your calculator work properly. If you do not add a formula element to your calculator, the sum of all fields will be shown as the total cost.
To learn more about how to design your formulas correctly, refer to this manual:
To change element settings, in the Calculator editor, click on the necessary element field:
On the right sidebar, there will be the element's available settings. Set them according to your needs, and click on the Save button:
To duplicate an element hover on the item and click the duplicate icon:
The element will be duplicated with an additional (copy X) name saving all the settings of the duplicated element. You can rename and re-adjust its settings:
You can easily change the order of the elements in the calculator using drag & drop function:
The order of the Formula element among other elements means nothing, you can put it in any place. Anyway, it will be displayed in the Calculation Summary section. However, the order of the Formula element within other Formula elements (if you have more than one formula element in the calculator) is important. It defines in which order these elements will be shown on the Calculation Summary.
To delete an element, just click on the trash icon in the element field:
You will get a warning notification and after your approval, the element will be deleted:
Before deleting an element first make sure you have not used this element in your Formula. If you delete an element that has been used in your formula, its value will be changed to 0 automatically.
Moreover, if this element is used in Conditions, all of the associated connections will also be lost.
Note that there is an automatic backup function in the Cost Calculator:
The Preview feature allows you to see your changes or additions before saving the form. It is useful when you doubt adding your calculator form to the page directly so that you can check it before publishing.
You can see how your Calculator looks anytime using the Preview button.
It is recommended to refresh the page when you cannot see preview results at once.
After clicking the preview button, you will see the popup board. The Preview of the calculator will be available for both desktop and mobile views.
On the left side of Desktop Preview, there will be elements you added to the calculator. On the right side of Preview, you will see the values of each element relatively and the total description. The Total description will show the value due to your created formula.
NOTE
You can preview the changes anytime. But do not leave the calculator without Saving the changes. In most cases, users believe the preview and close the calculator without saving it. However, the changes you make will not affect the calculator you pasted on your website unless you click on the Save button.
Created calculators can be inserted into the pages. You can learn how to do it by following this manual:
