Calculation fields automatically compute a value based on other fields in your form and display the result in real time. As a visitor selects options, enters quantities, or adjusts values, the calculated result updates on the page, with no page reload. This is essential for order forms, pricing calculators, quote builders, and any form where visitors need to see a computed number before they submit.
The power of calculation fields is that they turn a static form into an interactive tool. Instead of asking visitors to do math in their heads, your form does it for them. This reduces errors, builds confidence, and makes the submission decision easier.
When to Use Calculation Fields
| Use case | What gets calculated | Example |
|---|---|---|
| Order forms | Line totals and grand total | 3 T-shirts at $25 each = $75.00 |
| Quote request forms | Estimated price based on selections | Base price + add-ons – volume discount |
| Health forms | BMI, calorie intake, dosage | Weight in kg / (height in m squared) |
| Financial forms | Loan payments, interest, tax | Monthly payment on a $200,000 mortgage at 6.5% |
| Event registration | Total cost for tickets | 2 VIP tickets at $150 + 3 General at $50 = $450 |
| Construction estimates | Area, volume, material quantities | Length x Width = Square footage |
Building a Pricing Calculator Step by Step
You are a web design agency and want a quote calculator on your website. Here is how to build it.
- Create a new form titled “Website Design Quote Calculator.”
- Add a Dropdown field labeled “Website Type”. An option has no separate value: it is one line of text in the Options (one per line) box, and a Dropdown, Radio or Checkbox option is read as a number from the beginning of that text (an option such as “Basic (5 pages)” with no number first counts as 0). So start every line with its price:
2000 Basic (5 pages)4000 Standard (10 pages)8000 Premium (20+ pages)
- Add a Checkbox field labeled “Additional Services” with these options, the price first again (each ticked option adds its number, an option that is not ticked adds nothing):
500 SEO Setup1500 E-commerce300 Blog Setup800 Custom Animations
- Add a Radio field labeled “Timeline” with the multiplier first:
1 Standard (4-6 weeks)1.5 Rush (2-3 weeks)
- Now drag a Calculation field from the PRO section into the form.
- Set the label to “Your Estimated Quote.”
- In the formula field, enter:
({website_type} + {additional_services}) * {timeline}. Use the token chips shown under the Formula box; Fillin Forge accepts both field IDs and sanitized labels, so a field labeled “Unit Price” can be referenced as{unit_price}. - Set Prefix to
$so the result displays as a dollar amount. - Set Decimal places to 2 so the result shows two decimals.
- Set Suffix to empty (or “USD” if you want to clarify the currency).
- Save the form.
When a visitor selects “4000 Standard (10 pages)”, ticks “500 SEO Setup” and “300 Blog Setup”, and picks “1.5 Rush (2-3 weeks)”, the quote shows $7200.00: (4000 + 500 + 300) * 1.5 = 7200, with the prefix and two decimals. The result has no thousands separator.
Formula Reference
| Operation | Symbol | Example formula | Result |
|---|---|---|---|
| Addition | + | {quantity} + {shipping} | Sum of both fields |
| Subtraction | — | {subtotal} - {discount} | Subtotal minus discount |
| Multiplication | | {quantity} {price} | Product of both fields |
| Division | / | {total} / {people} | Cost per person |
| Parentheses | () | ({base} + {extras}) * {tax_rate} | Controls order of operations |
| Fixed numbers | any number | {subtotal} * 1.08 | Adds 8% tax |
| Percentage off | multiply by decimal | {subtotal} * 0.9 | 10% discount |
More Formula Examples
| Use Case | Formula | Result Example |
|---|---|---|
| Simple total | {quantity} * {price} | 150 |
| Subtotal plus shipping | {subtotal} + {shipping_fee} | 165 |
| Percentage discount | {subtotal} * 0.9 | 135 (10% off) |
| BMI calculator | {weight_kg} / ({height_m} * {height_m}) | 24.5 |
| Area in square feet | {length} * {width} | 200 |
| Total with tax | {subtotal} * 1.08 | 108 (8% tax) |
| Cost per person | {total_cost} / {group_size} | 45 |
> Tip: Label your calculation fields clearly so visitors understand what the number represents. Instead of just “Total,” use “Estimated Total (before tax)” or “Your Monthly Payment.” A clear label builds trust and reduces confusion.
> Good to know: Without PRO, the Calculation field type is not available. If you need computed values on the free plan, you would need to handle calculations on your own after submission.
Common Mistakes to Avoid
- Typing token names by hand and misspelling them. Use the token chips in the Calculation settings whenever possible. Fillin Forge resolves both field IDs and sanitized labels, but
{unit_price}and{unitprice}are different tokens. - Dividing by a field that could be zero. If a visitor leaves a Number field at zero and your formula divides by it, the result is undefined. Add validation to require a minimum value of 1.
- Forgetting that Checkbox fields sum their values. If a visitor checks multiple checkboxes, the calculation uses the sum of all checked values.
[Screenshot: An order form showing a Calculation field at the bottom displaying “$150.00” based on the quantity and price fields above it, updating in real time]
—