CalcBuilder Tutorial

By default Calc Builder stacks the fields one under another. The Form Layout screen lets you arrange them with your own HTML.

Placeholders

Drop ##variable## where each field’s input should render. The Fields to include list on the left shows the exact placeholder for every field. Wrap them in Bootstrap grid markup:

<div class="row g-3">
  <div class="col-12"><label class="form-label fw-bold">Bill amount (€)</label>##bill##</div>
  <div class="col-6"><label class="form-label fw-bold">Tip %</label>##tip_percent##</div>
  <div class="col-6"><label class="form-label fw-bold">People</label>##people##</div>
</div>

• Any placeholder you leave out is still submitted (add it as a hidden field or it keeps its default) — but usually you include every field.
• Set the form width and whether the calculate button sits inside the layout or after it on the Preferences tab.
• The same ##variable## syntax works for inline results, so you can show a live value between the inputs.