On this page

Jump to any section using the links below

Hubhus includes built-in calculators that allow you to perform mathematical and percentage calculations directly inside templates, booking forms, automations, and HTML components. These tools are useful for calculating totals, discounts, VAT, fees, or any other dynamic values. This article explains how to use each calculator type and how to format the resulting numbers.

1. Basic calculations using @calc

The simplest way to perform a calculation is the @calc[term]@endcalc expression.

Example:

@calc[(2+2)*3]@endcalc

This evaluates the expression and outputs the result.
Supported operations include addition, subtraction, multiplication, division, and parentheses.

Use this when you only need a single expression and do not require formatted output.

2. Using <hh-calculator> for complex expressions

The <hh-calculator> component provides a more flexible way to evaluate expressions and format the result. It supports:

• Multiple operations

• Parentheses

• Precision control

• Custom decimal separators

Example:

<hh-calculator precision="2" decimalSeparator=".">
    (1250.75 + 249.25) / 2
</hh-calculator>

The output is formatted using the selected precision and decimal separator.

Use this when you need clean, formatted output for emails or templates.

3. Percentage calculations with <hh-calculator.percentage>

Hubhus also provides a percentage calculator for common percentage expressions.

Example:

<hh-calculator.percentage precision="2" decimalSeparator=".">
    50% of 525.50 kr.
</hh-calculator.percentage>

This supports expressions such as:

• “x% of y”

• “x% discount on y”

• “Add x% to y”

This component is ideal for dynamic quotes, VAT, discounts, or commissions.

4. Formatting numbers with <hh-number.format>

When you need to format numeric output, especially currency, you can use:

<hh-number.format
    input-decimal-separator="."
    output-decimal-separator=","
    decimals="2"
/>

This lets you control:

• Decimal precision

• Input and output decimal separators

• Consistent formatting across templates

Use this when you need readable currency values or standardized numeric formatting.

5. Decimal separators and precision

All calculators allow you to specify:

precision="2"
decimalSeparator="."

This ensures the value renders exactly as required.
Common patterns:

• For Danish formatting: decimalSeparator=","

• For international formatting: decimalSeparator="."

• For currency: precision="2"

Make sure all connected calculations use matching settings for consistent output.

6. Using calculations in booking forms

Calculations can be used inside booking form HTML components or confirmation texts.
Common use cases include:

• Showing dynamically calculated prices

• Summing selected add-ons

• Calculating estimated time or duration

• Displaying totals during confirmation steps

Place calculator components in:

• Part 3 (confirmation step)

• Part 4 (after booking is completed)

• Or inside HTML components reused across forms

Complex logic can also be combined with JavaScript and saved into hidden fields if needed.

7. Displaying calculated prices in emails

All calculator outputs can be used inside email templates, such as:

Your total price is:
<hh-calculator precision="2" decimalSeparator=",">
    %base_price% + %installation_fee%
</hh-calculator>

Or with percentage calculations:

Applied discount:
<hh-calculator.percentage precision="2">
    10% discount on %total_price%
</hh-calculator.percentage>

This ensures emails show accurate, dynamic values even when calculations depend on custom fields or booking choices.

Summary

Hubhus calculators provide powerful tools for generating dynamic numeric values inside templates:

• @calc[…]@endcalc for simple expressions

• <hh-calculator> for formatted expressions

• <hh-calculator.percentage> for percentage operations

• <hh-number.format> for formatting and rounding

These tools can be used in emails, booking forms, automations, HTML components, and internal templates to produce clean, reliable, and dynamic output.

? Common searches

web form • form setup • booking form • form builder

? Also known as

web form • input form • data capture

Related articles

How to add custom fields to booking forms
How to format dates and calculate time differences
How to use custom fields in automation and triggers
How do I create custom fields?
How do I manage SELECT fields and dropdown options?