Creating a Custom Calculator for your Wix website

In this guide, we'll walk you through the process of creating your initial interactive calculator using Wix Calculator Builder. Our focus will be on constructing a calculator for determining the volume of a rectangular shape.

Let's get started building your first interactive calculator!

1. Go to the Wix App Market in the left menu of your Wix website editor.
2. Search for the Calculator Builder by Lumifish and click on Add to site.
3. A basic already prepared calculator will be added to your website. Click on Settings and choose if you want to edit this calculator by clicking on Customize Calculator or choose a calculator from the templates by clicking on Choose a Calculator button.
4. This time, let’s choose to edit the current calculator. Click on Customize Calculator.
5. In the Calculator editor pop-up, you can find the element list on the left, chosen element settings on the right and you can add and delete elements with the button at the top.
6. Delete all of the current elements from the calculator with the red Delete button at the top to start from scratch.
7. Click the + New Entry Field at the top.
8. Here you can see a list of different input field types and tools that can be added to your interactive calculator. This time, let's choose Numeric Input Field. NOTE: All the calculator element settings are available on the right side. To reach them, simply click on the element you want to configure.
9. You can change the label of a numeric input field by adding the preferred name to the input field below the Input field label. For example, this time let's add Width as the input field's name.
10. In the Min. and Max. input fields you can set the lowest and highest value that can be added to the input field by a user. If you don't want to have any limitations set, leave these input fields blank. While rectangular width can't be a negative and we don't want to have limit set on the highest value, let's add 0 to the Min. input field, and leave the Max. input field blank.
11. To explain to your visitors what kind of data you want them to enter, you can add a prefix or postfix to your input field. In our example we want visitors to enter measurement in feet, so let's add feet to the input field below the Postfix label.
12. When we are done with our first input field, let's add a second input field for rectangular length. Click the + New Entry Field (Add New Element) at the top and choose Numeric Input Field again.
13. Repeat steps 9, 10 and 11 to setup this input field. However, add Length as the label of this input field instead of Width.
14. To add a third input field for rectangular height, click the + New Entry Field and this time choose Slider. It's not a typical input field for a volume calculator, but we want to show you how different types of input fields can shape your interactive calculator.
15. Name the input field by adding Height to the input field below Slider field label.
16. Set your slider's range by adding Min. and Max. values. Please note that the slider's Min. and Max. input fields can't be blank! Add 0 as the Min. value, and 1000 as the Max. value.
17. You can add points to your slider to make it easier to use and look better. All points are to be separated by comma. Let's add the following points to your slider - 0, 250, 500, 750, 1000.
18. Finish customizing the slider by adding a postfix. To do so, add feet to the input field below the Postfix label.
19. Now, when you’re done with all needed input fields, let's add the element that outputs the results of your interactive calculator. To do that click the + New Entry Field (Add New Element) at the top and choose Formula.
20. Name your formula field by adding Rectangular tank volume to the Formula field label input field.
21. Add the following formula to the input field below the Formula label - #1 * #2 * #3. How do we get this formula? Every single element of a calculator gets its own ID that consists of a hashtag and a unique number. As you can see, the ID of the Width input field is #1, and the ID of the slider is #3. The conventional formula for finding the volume of a rectangular prism is the following: Volume = Length Height Width. So we replace Length, Height and Width variables with the IDs of the web calculator elements.
22. Finish customizing the formula element by adding a postfix. To do so, add sq. feet to the input field below the Field Postfix label.
23. Close the calculator editor by clicking X at the top right corner and click on Settings.
24. Add a preferred title to the input field below the Calculator Title label.

And you are done creating your first calculator!

For any further questions or assistance, please don't hesitate to reach out to our dedicated customer support team at wix.support@lumifish.com.