How to create a calculator

Create a calculator

You can go to Dashboard > Cost Calculator and click the Create button in order to create a new calculator.

The "Create" button opens Templates library and you can select on of them or create a blank calculator to start from the scratch:


If you previously imported the Templates, you can add a new calculator by clicking Create new button at the top right of the dashboard.

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

Adding elements

There are two ways to add elements to the calculator:

Clicking on the elements:

or just drag and drop an element into your form:

After adding a new element to your calculator, that element's settings will be provided to fill. Add all necessary data to the dragged element and save your work.

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


Do not forget to add at least one formula element to your calculator at the end to make your calculator works properly.

The example above shows the sum of all the elements of the calculator. Here you can create various formulas by adding available Fields and Operators by clicking on them.

Please create a correct formula in Total element, paying attention to element field IDs, opening and closing paratheses in nested formulas. Otherwise, incorrect results may appear in the calculation summary.

Editing, duplicating, and deleting an element

If you want to change element settings, in the Calculator editor, click on the necessary element field:

and click the Save button after setting all the options you wanted:

To duplicate an element hover on the item and click the duplicate button:

To delete an element, just click on the trash icon in the element field:

More detailed information on each element is provided in the Calculator Elements section.

Preview Calculator

You can see how your Calculator looks anytime using the Preview button.

This button allows you to see your changes or additions before saving the form. It is really useful when you have a doubt about adding your calculator form to the page directly so that you can check it before publishing.


The preview button works only after Saving the calculator. It is recommended to refresh the page when you cannot see preview results at once.

After saving, press the Preview button to check your work and you will see the popup board. The Preview of the calculator will be available for both desktop and mobile views.

Desktop Preview:

Mobile Preview:

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.

Let's check how our sample calculator is working.

As you can see, the calculator is working correctly.

Created calculators can be inserted into the pages that you can review how to do it in Insert calculators into the page section.

Last updated