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.
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.
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.
The range slider label and default value is changed in the ‘Basic’ tab:
The minimum and maximum restrictions are changed in the ‘Advanced’ tab:
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.
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:
Click ‘Save & Close’ to save the field.
Preview the Form
Next, click ‘Preview’ to try the form.
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!
