Show and Hide Fields with Conditional Logic

Goal

Build a Project Cost Calculator that stays simple for most visitors, but reveals extra costs and discount fields in Advanced mode — and shows a hint when the project value crosses $2,000.

How it works

Part 1 — Project Cost Calculator (Basic vs Advanced)

1. Add the title and mode selector

From the Elements sidebar:

Click Edit Options on the radio:

The Value column becomes the View Mode name — use lowercase, no spaces.

2. Add shared inputs

Add two Number widgets (visible in both modes):

3. Add Advanced-only inputs

Add two more Number widgets:

4. Switch View Mode when the mode changes

1. Select the Calculation mode radio.
2. Under On Change, click Add action.
3. Find Toggle View Mode and click Connect.

Calcopolis sets the active View Mode to the selected option Value (basic or advanced). No tag configuration is needed.

5. Hide Advanced fields in Basic mode

For Extra costs and Discount:

1. Select the widget.
2. Expand Visibility → set Show to Conditionally.
3. In Active mode is:, type advanced — must match the radio Value, not the label.

Repeat for Discount.

6. Add the total (one Result widget)

Add a Result widget from Elements → Results Widgets → Result:

Basic mode is a single product:

total = hours * hourly_rate

Advanced mode adds extra costs and a percentage discount. Write it as one formula that references only the input Name values — hours, hourly_rate, extra_costs, discount_percent, and calc_mode:

= if(
  calc_mode == "advanced",
  (hours * hourly_rate + extra_costs) - (hours * hourly_rate + extra_costs) * discount_percent / 100,
  hours * hourly_rate
)

In Basic mode, extra_costs and discount_percent stay hidden; the if() branch returns hours * hourly_rate. In Advanced, the same formula adds extra costs and applies the discount percentage.

7. Set the initial View Mode and auto-calculate

1. In the builder toolbar, click Options.
2. Under Initialization:
3. Active view mode → basic
4. On init → Run calculation on load
5. Click Save as draft.

8. Recalculate when inputs change

Select Number of hours. Under On Change, add Calculate.

Repeat for Hourly rate, Extra costs, and Discount — so totals and visibility messages stay in sync.

9. Test in Preview

1. Switch to Preview.
2. Basic — only hours and hourly rate; Extra costs and Discount hidden.
3. Select Advanced — both extra fields appear; change Discount to 10 and confirm Total updates.
4. Switch back to Basic — advanced fields hide; Total falls back to hours × hourly_rate.

Part 2 — Show a discount hint above $2,000 (formula)

Show a short note when the project value (hours × hourly rate, before extras) exceeds $2,000 — letting visitors know a volume discount may apply.

1. Add the message

Add Custom Text with:

Volume discounts may apply when the project value exceeds $2,000.

Place it below the inputs and above Total project cost.

2. Set formula visibility

1. Select the text widget.
2. Expand Visibility → Show → Conditionally.
3. Leave Active mode is: empty.
4. In Formula result is positive, enter:

= hours * hourly_rate > 2000

The message appears only when labor cost alone is above $2,000 (e.g. 40 h × $50 = $2,000 — not shown; 50 h × $50 = $2,500 — shown).

3. Test

In Preview, try:

The hint works in Basic and Advanced — it depends on hours and rate, not on the mode selector.

Verify

In Build mode, the canvas toolbar shows Active mode: toggles when the form uses View Modes — handy for checking visibility without Preview.

Troubleshooting

See also

• Building Your First Calculator — quotes, results, and leads
• Understanding Formulas and Variables — IF() and variable order
• Radio — On Change and Visibility
• Result — currency formatting
• if() Function — branch formulas by mode