Guide · 6 min read
Order forms with live totals: how to build one
Updated 2026-09-17
TL;DR
A live-total order form uses number fields for quantity and price per item, a calculated field that sums them as the person types, and clear formatting so the running total reads as money, not just a number.
An order form without a visible running total makes people do math in their head or wait for a confirmation email to find out what they're paying. A live total removes that uncertainty and catches input mistakes (an extra zero on a quantity field) before submission instead of after. This guide covers the structure: fields, the formula, and small details that make the total trustworthy.
Structure the fields first
Each orderable item needs a quantity field (number) and, if pricing varies, a price field or a fixed value you reference directly in the formula. Keep quantity and price as separate fields rather than one combined text field, since a calculated field needs clean numeric inputs to work with.
For a fixed catalog of items, a select field per item with the price built into the option, plus a quantity field, is usually simpler than asking people to type prices themselves.
Build the calculated total
A calculated field can reference each quantity and price field in a formula and update the total live as someone fills in the form, before they ever reach submit. For multiple line items, the formula sums each item's quantity times its price, then adds them together.
If you charge tax or a flat shipping fee, add those as their own step in the formula rather than folding them silently into a single line, so the breakdown stays legible if you ever need to explain a total to a customer.
Show a breakdown, not just a number
A single total with no context reads as arbitrary. Where possible, show a subtotal, tax, and shipping as separate calculated values, even if only the final total is prominent, so the number is self-explanatory rather than something a customer has to trust blindly.
Reduce input errors
Number fields should enforce sensible limits, like a minimum of 0 and a reasonable maximum for quantity, so a typo doesn't silently produce a total that's off by a factor of 100. Required fields on anything that feeds the total prevent a blank quantity from breaking the calculation.
What happens after submit
An order form isn't a payment processor by itself; it typically collects the order details and total, then either redirects to checkout or sends the details to whoever fulfills the order (via email notification or a webhook to another system). Set expectations in the success message so people know what happens next, whether that's an invoice, a payment link, or a confirmation call.
In YeetForm, calculated fields update totals live as someone fills in quantities and prices, using a formula that references the other fields directly, and a webhook can forward the completed order to another system once it's submitted.