Learn how to start creating web calculator in 2 minutes

With Calculoid, creating a calculator from scratch is so easy. Learn how to create a basic web calculator in this short video.


This video tutorial explains how to create ready-to-embed calculator in just 2 minutes. Learn how to add and edit fields, customize calculator design, check the preview and publish calculator to your website.

1. Create fields

First, you have to add fields. Click on the type of field you want to add to the calculator. For our calculator, we need Slider field, Radio box field, and Formula field. Then resize each field to fit into the calculator and move them by drag and drop to the right place. To change the name of the field just click on the Edit icon n the field you wish to edit.

Slider field represents a selected number value. Radio box field is used to select one from many options. Go to the options section to insert the name with value, and add as many new options as you need. The Formula field represents result calculated from the values of the other fields. In the formula section, we create formula just by clicking on fields and math operators.

Online Store Calculator Template -

2. Customize design

Next, you can change the design of the calculator. Select a colour scheme with the colour of the background and alignment for all text in our calculator. In advanced design, there are more options to customize the size, the font-weight, colour and alignment of each type of text. For our calculator, we need to highlight the name of the field more, therefore, we set the Field name font-weight to 500.

Online Store Calculator Template -

3. Preview calculator

You can test the calculator instantly in the editor, and if you want to check how calculator will look on the different device, go to the preview. In the preview, you can see the calculator in a desktop, tablet or a mobile view. If your calculator is ready and looks good, the final step is to embed the calculator to your website.

Online Store Calculator Template -

4. Publish to website

To publish a calculator it needs to be set as finished. Then copy the embed code and insert it in your page content to show calculator on your website. And that´s it, an interactive web calculator in a matter of minutes thanks to Calculoid.

Online Store Calculator Template -

Additional information

Start Free Now

Create your own web calculator in a matter of minutes.
Test all features in the 30-day free trial. 

Sign Up Free

No credit card or installation needed