Creating an online calculator is easier than it looks: you add a few fields, describe the calculation once, and the visitor sees the result on the page. In this guide we build a deposit calculator step by step. The same approach works for any calculator with fields and a formula, from a repair estimate to a delivery price.
What you will build
If you are looking for how to make a website calculator, this is a good first project. The visitor enters the deposit amount, the annual interest rate and the term, and sees how much money they will get at the end. Calculators are available on the Gold plan and higher, and on any plan without a subscription fee. Check the current terms on the prices page.
The formula
We use the simple interest formula:
Here S is the amount the depositor receives at the end of the term, P is the initial amount, I is the annual interest rate in percent, t is the number of days the interest is accrued, and K is the number of days in the year (365 or 366). For a deposit of 100,000 at 10.5% for six months (182 days) the result is S = 100,000 + 100,000 × 10.5 × 182 / 365 / 100 = 105,235.62. We will check that our calculator gives the same number.
Step 1. Create a blank form
Log in to your account and open the list of forms.
Click “Create Form”.
On the Template Selection screen, choose “Blank template” and click “Create New Form”. In the window that opens, enter the Form Name and click “Save”. The name is shown in the title of the form; if you do not need it, you can hide the title in the settings. After that you land on the “Fields” page, where all the elements of the calculator are created.
Step 2. Add the fields
Our calculator needs three fields: the deposit amount (a Number field or a Slider), the annual interest rate (a Number field) and the deposit term (a Dropdown or a Single choice). To add a field, drag the element you need from the list on the left to the central area of the builder.
For the term we use a drop-down list with four options: 1 month, 3 months, 6 months and 12 months. Make all three fields required, so the calculation never runs on empty values.
Step 3. Add the formula
Now add the “Formula” element, where the whole calculation is set up.
Open its settings: here you can change the name of the element, add a prefix or a suffix and choose how numbers are formatted. On the result screenshot below the dollar sign is a prefix. “A number of symbols after comma” is 0, so the total is rounded to a whole number. Set it to 2 if you want to see cents. Then click “Calculation formula”.
The dialog title is “Setting of calculation formula”. Following our formula, we need to write:
deposit amount + deposit amount × annual interest rate × deposit term / 365 / 100
To put a form element into the formula, click “Add element” and pick the field. To keep the formula compact, the editor shows the ordinal number of each element instead of its name, but if you hover over a number, the name appears.
On this screenshot the formula line is only the product: field 1 × field 2 × field 3 / 365 / 100. That returns the interest alone, about 5,236. To get the amount the depositor receives, as on the result screenshot, add the deposit amount once more at the start, with a plus: deposit amount + deposit amount × rate × term / 365 / 100.
The deposit term needs special attention because it is a list. The formula needs a number of days, so for each option we have to say how many days it means. Click the gear icon next to the field and enter the value for each answer:
| Answer in the list | Value in the formula (days) |
|---|---|
| 1 month | 30 |
| 3 months | 90 |
| 6 months | 182 |
| 12 months | 365 |
Click “Save”, and you return to the formula window. Click “Save” there as well, and the formula is ready.
Step 4. Check the result
Open the form and try it. For 100,000 at 10.5% and the 6-month option the exact result is 105,235.62. The screenshot shows $ 105236: with zero digits after the decimal the amount is rounded, and the dollar sign is a prefix. Set “A number of symbols after comma” to 2 to see 105,235.62. If you prefer, you can turn the deposit amount into a slider and limit the minimum and maximum amount. Both ways work, so choose the one that is more convenient for your visitors.
Step 5. Add a condition to the formula
The calculator above is the simplest version. When the result depends on several parameters, use logical expressions in the formula. Click the condition icon in the formula editor, and a condition is added to the formula. Open its settings with the gear icon and click “Add expression”.
As an example, we set that if the deposit amount is less than 50,000, the value 0.95 is returned to the formula, or 1 (so that the condition does not affect other deposit amounts). In this case the result for small deposits is lowered by 5%. In the formula, the condition is replaced by the number of the first expression that turns out to be true. This opens a lot of possibilities: tiered discounts, different rates for different regions, extra charges for urgent orders.
Embed the calculator on your site
When the calculator works, open the “Publish” tab, copy the code and paste it into your page. The same code works on any site and CMS, and you can also open the calculator from a direct link or show it in a pop-up window. If you change the formula or the prices later, you edit them in your account, and the calculator on the site updates without a new code. More about the options is in the article how to add a calculator to a website.
If you would rather not build it yourself, the online calculator builder has ready templates, and our specialists can set up a calculator for you.
