CalcBuilder Tutorial

▶ A 90-second video walkthrough of this example (English audio & subtitles). The written steps below cover the same ground.

A complete minimal calculator: enter the bill, the tip percentage and the number of people; get the tip, the total and the amount per person.

This is the PHP code version. The exact same calculator with no code at all — a downloadable Excel workbook does the maths — is in the next tutorial.

1. Create the calculator

Add → Name Tip Calculator → Save.

2. Form fields

On Form Fields add three fields, all Type = Number:

• bill — label “Bill amount (€)”, 2 decimals, default 100
• tip_percent — label “Tip %”, 2 decimals, default 15
• people — label “Number of people”, 0 decimals, default 2

3. PHP code

$tip_amount = $bill * $tip_percent / 100;
$total      = $bill + $tip_amount;
$per_person = ($people > 0) ? $total / $people : $total;

$tip_amount = number_format($tip_amount, 2);
$total      = number_format($total, 2);
$per_person = number_format($per_person, 2);

4. Exit Layout

<div class="p-3 border rounded" style="max-width:420px">
  <div class="d-flex justify-content-between mb-2"><span>Tip (##tip_percent##%)</span><strong>##tip_amount## €</strong></div>
  <div class="d-flex justify-content-between mb-2"><span>Total to pay</span><strong>##total## €</strong></div>
  <hr>
  <div class="d-flex justify-content-between"><span>Each of ##people## pays</span><strong style="font-size:1.4rem">##per_person## €</strong></div>
</div>

5. Preferences & publish

On the Preferences tab set the button text to “Calculate tip” and turn on calculate on load. Then create a menu item of type Calc Builder and select the calculator on the Options tab. (Optional: add a CalcBuilder module in a sidebar.)

Result

With the defaults it shows Tip 15.00 €, Total 115.00 €, 57.50 € each — and recalculates as the visitor changes any field.

No coding? The spreadsheet version of this calculator gives the identical result with an uploaded .xlsx and an empty PHP box.