Building calculators

The builder is a drag-and-drop canvas: add fields from the palette, set them up on the right, and watch the running total update in the live preview. This page covers the field types and how prices attach to them.

Field types

Alovio Calculator ships with twelve field types — input fields the visitor fills in, and structural fields you use to lay the calculator out.

Input fields

• Number — a numeric box with optional min, max and step.
• Slider — the same value as a draggable slider, with min/max/step.
• Quantity — a numeric stepper (− / +) for whole-number counts.
• Dropdown — a single choice from a list. Each option can carry a price.
• Multiple choice (radio) — pick one option, optionally with images. Each option can carry a price.
• Checkboxes — pick several options, optionally with images. Each option can carry a price.
• Toggle — an on/off switch with a single price when on.
• Text — a single-line text field (for notes, names, references — not used in math).

Structural fields

• Heading — a title to group fields; leave the label empty to use it as a divider.
• HTML — a block of your own formatted text or markup.
• Formula — a computed field that shows a calculated value. See Formulas.
• Step — a section divider that groups fields under a label (and powers the multi-step wizard in Pro).

Prices on fields

There are two ways a field adds to the total:

• Per-option prices — on dropdowns, multiple-choice and checkbox fields, give each option its own price. Selecting it adds that amount.
• A single price — a toggle adds its price when switched on.

For anything that depends on a quantity — “£12 per square metre”, “$5 each” — use a formula to multiply a number, slider or quantity field by a rate.

The running total

As the visitor makes choices, a live summary shows the line items and a total. Totals use decimal-safe math, so they round cleanly to the currency you configure in Embedding & themes — and the server recomputes every submitted quote independently, so the price a visitor sees is the price you receive.

Field extras

• Help text — add a hint under any field.
• Conditional logic — show, hide or require a field based on other answers. See Conditional logic.
• Export / import — save a whole calculator to JSON and import it on another site.

Next

• Add math: Formulas.
• Show fields only when relevant: Conditional logic.
• Start from a ready-made build: Templates.