Articles on: Contact forms
This article is also available in:

Creating a calculator in a contact form

The calculator in contact forms allows you to automatically calculate values based on the form fields filled in by the website visitor.


You can select the form fields required for the calculation and write the formula to be used for the calculation. Your customer will then be able to see the calculation result immediately after filling in all the required form fields. This value will also be sent along with all the information after the contact form is submitted.


Alternatively, you can hide the form submission button, and the calculator will serve purely as a calculation tool for website visitors.


In this article, we will look at an example of how you can create and use a calculator on your website.


Contents:


First, you need to add a Contact Form element where the calculator will be located. To do this, you can use our instructions.


Calculator field settings


Hover over the contact form and click on it to open its settings. In the Items tab, you can manage existing fields and add new ones:

Tip: You can learn more about form field settings in our article.


Note: The fields we will discuss below are used specifically for calculations — however, your contact form may also contain other fields, such as for entering the customer's name, phone number, etc.


To create your own calculator, you will have access to the following fields:


Dropdown list, Radio button, Checkbox


  1. Add the appropriate field and configure it as needed: give it a name, select options, make it mandatory if necessary, etc.


  1. After creating the field, activate the Use for calculations option and specify an arbitrary variable name for this field, which you will later use in the calculation formula:

  1. Next, for each added option, you can specify the desired value (numerical value) that will be used in calculations when this option is selected:


Number


This field supports only numeric values: digits, commas, and decimal points.


Similar to the fields described above, add it to your form, activate the Use for calculations option in the settings, and set the variable name:


Creating a calculation formula


  1. To create a formula and display the calculation results, you need to add the Calculation formula field and go to its settings.


  1. In the settings for this field, you need to write a formula for calculations that will use the previously created variables and symbols + (addition), - (subtraction), * (multiplication), / (division), and () to perform the necessary arithmetic operations:

Note: if the calculator uses optional fields and the visitor does not select or enter a specific value, the value of the corresponding variable in the formula will be 0. It is important to consider this if you use multiplication in your formula.


Tip: The order of arithmetic operations determines the sequence of calculations: first, the operations in parentheses are performed, then multiplication and division, and finally addition and subtraction.


  1. After creating the formula, you can also customize the display of calculation results:

  • enter a standard value that will be added before the calculation is performed — for example, the number 0, or it can be the base cost of your services, to which the cost of selected additional services or something else will be added;
  • add a specific text or symbol that will be displayed before and/or after the calculation results.


  1. Standard field settings are also available for the field — you can add a specific description and hide the field if necessary:

Important: if you hide the Calculation formula field, the calculation results will also be sent when the form is submitted by the client, and you will be able to see them in the site settings in the Form Management section and in notifications about new responses to email/messengers, etc.


Tip: Use our instructions for editing the appearance of the contact form if you need to change its design.


Examples of use


For the first example, we will add a calculator for calculating the cost of printing an advertising banner depending on its size with the following fields:

When creating the formula, we take into account that the cost of printing a banner is calculated based on its area. To determine the area, you need to multiply the width by the height — as a result, we get a value in square meters (m²).


Since the price is indicated per 1 m², the resulting area must be multiplied by the cost of printing one square meter (in our example, this is 20 USD). As a result, we get the following formula using our variables:


height*width*20


For the second example, we will add a website creation cost calculator with the following fields:

In the example of our website cost calculator, we need all the options selected by the visitor to be added up, so the first part of the formula will look like this, using variables:


site_type+design_type+addons


Here, the customer will enter a number in the “Number of pages” field, so we need to specify in the formula what value to multiply this number by (i.e., the cost of 1 page). For example, let's say the cost of one page is 100:

pages*100


As a result, we get the following formula, which allows the user to calculate the cost of creating a website:


site_type+design_type+addons+pages*100





Updated on: 02/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!