WS Form - Create an Online Savings Calculator

Create an Online Savings Calculator

As well as creating forms, WS Form can also be used to create useful online calculators.

In this example we’ll show you how to create a calculator that shows potential savings per employee for an insurance company. The same method can be used to create all manner of savings calculators.

Demo

Create a New Form

We’ll start by creating a blank form. To do this, click ‘Add New’ from the WS Form menu, then click the ‘Blank’ template.

WS Form - Online Calculator - Add Form

We’ll change the name of the form to ‘Insurance Savings Calculator’ at the top of the layout editor.

Add a Range Slider Field

Next we’ll add a Range Slider field that allows the user to choose the number of employees. To do this, click and drag the range slider field to the form. You can also just click the ‘Range Slider’ button in the side bar.

WS Form - Online Calculator - Add Range Slider

By default, a range slider has a value from 0 to 100. Obviously we’re not going to want to show savings for 0 employees so we’re going to change the range slider settings to have the following values:

  • Default value: 2
  • Minimum value: 2
  • Maximum value: 500

We can change the settings of the range slider by clicking the settings icon.

WS Form - Field Settings Icon

The range slider label and default value is changed in the ‘Basic’ tab:

WS Form - Online Calculator - Setting Label and Default Value

The minimum and maximum restrictions are changed in the ‘Advanced’ tab:

WS Form - Online Calculator - Minimum and Maximum Settings

Click ‘Save & Close’ to save the settings.

Add a Text Editor Field

Next we need to create a field where we can show the results of the calculation. To do this, we’ll add a Text Editor field.

WS Form - Online Calculator - Add Text Editor Field

In this example, our savings calculation is as follows:

Total Savings = Number of Employees x 200

To perform the calculation we are going to use the #calc variable. The #calc variable to create the savings calculation is:

#ecommerce_price(#calc(#field(54) * 200))

This returns the value of the range slide multiplied by 200 in a neat currency format. By using #calc it also ensures the calculation is re-assessed every time the Range Slider is changed.

Let’s break that down!

#ecommerce_price(price) returns the price in a currency format. The currency format matches the WS Form currency setting, or the setting in WooCommerce if that is installed and activated.

#calc(calculation) allows you create calculated values. Learn more.

#field(54) returns the current value of field ID 54. You would change ’54’ to whatever the ID of your range slider is. In this example, this will return a value between 2 and 500.

Let’s add some copy around this calculation to make it easier to read. The completed code is shown below:

Your total monthly savings will be #ecommerce_price(#calc(#field(54) * 200)) for #calc(#field(54)) employees.

We’ll add this to the Text Editor field:

WS Form - Online Calculator - Text Editor Content

Click ‘Save & Close’ to save the field.

Preview the Form

Next, click ‘Preview’ to try the form.

WS Form - Online Calculator - Preview

To add the form to you website, you first need to publish the form. To do this, simply click the ‘Publish’ button.

To add your form to a web page, follow these instructions.

Feel free to style the form further using the customize appearance feature or with your own custom CSS. You can also use the layout editor ensure your form is mobile responsive.

As you can see, creating an online calculator is very easy! It takes just few minutes to set up. If you are interested in the topic of online calculators, make sure you check out our calculator templates for more ideas!