keyboard_arrow_left Back to Knowledge Base

How to create an interactive calculator

Welcome to Calconic, our innovative calculator builder! This article shows you how to build your first interactive calculator step-by-step. We are going to build a rectangular volume calculator here.

You'll need an active Calconic account to start building your first calculator. If you don't have one yet, don't hesitate to create one. It's absolutely free and for every new sign-up we offer access to all of our premium features for 14 days, so you can try all the Calconic features and familiarize yourself with our innovative calculator builder.

Let's get started building your first interactive calculator!

  1. Login to your Calconic account.
  2. Click Create New on the left side menu.
  3. Click New From Blank.
    Start building new custom calculator
  4. Click the Plus icon (Add New Element) on the right. Add new element to interactive calculator
  5. 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. Add a numeric input field to a custom calculator
  1. You can change the label of a numeric input field by adding the preferred name to the input field below the Element label label. For example, this time let's add Width as the input field's name. Label of the numeric input field
  2. 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. Min./Max. values of the numeric input field
  3. 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. Prefix and Postfix settings

  4. When we are done with our first input field, let's add a second input field for rectangular length. Click the Plus icon (Add New Element) on the right and choose Numeric Input Field again.
    1. Repeat steps 6, 7 and 8 to setup this input field. However, add Length as the label of this input field instead of Width.
  5. To add a third input field for rectangular height, click the Plus icon 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. Add slider element to the custom calculator
  6. Name the input field by adding Height to the input field below Element label. Label of the slider
  7. 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. Min./Max. values of the slider
  8. 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. Slider scale
  9. Finish customizing the slider by adding a postfix. To do so, add feet to the input field below the Postfix label. Prefix and Postfix settings

  10. 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 Plus icon (Add New Element) on the right and choose Formula. Add formula element to the interactive calculator widget
  11. Name your formula field by adding Rectangular tank volume to the Element label input field. Label of the formula element
  12. Add the following formula to the input field below the Formula editor 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. Click here to find more information on how to understand and write formulas for Calconic interactive calculators. Rectangular volume formula for interactive calculator
  13. Finish customizing the formula element by adding a postfix. To do so, add 'sq. feet' to the input field below the Postfix label. Prefix and Postfix settings

  14. Click the Gear icon.
  15. Add a preferred title to the input field below the Calculator Title label. Title of a custom interactive calculator

  16. Click Save.
  17. Click the Inactive icon next to the Save button to activate your calculator. Save and activate the custom calculator

  18. Now your interactive calculator is ready to be embedded to your website. Click the Embed button to get the code snippet for embedding the calculator to your website. Embed the custom calculator
  19. Click + New Site to whitelist your website’s address. Any subdomains (for example, subdomain.example.com) are to be whitelisted separately.
  20. Click Next. Whitelist website address
  21. Copy your web calculator’s code snippet. Once you've copied the code snippet, the next step is to paste it in your page’s HTML source code. How you go about this will depend on the tools you use to edit your site. On our Knowledge base you can find a few tutorials on how to embed your interactive calculator to DIY systems like Squarespace, WIX, Weebly, Webflow, etc. Code snippet of the interactive calculator

Need a hand building your first web calculator? Contact us via email support@calconic.com.

Build calculator for free!