Interactive calculator section for estimating ROI, savings, or custom costs.
Calculator
The Calculator section provides an interactive calculator allowing visitors to estimate a return on investment (ROI), potential savings, or a custom cost. A powerful conversion tool that engages the visitor and demonstrates the value of your offer.
How It Works
The visitor enters values in the input fields. The result is calculated in real time based on the configured formula (addition, multiplication, subtraction, or custom formula). All without page reload.
Main Settings
| Setting | Description | Options |
|---|---|---|
| Operation | Type of calculation | Addition / Multiplication / Subtraction / Custom |
| Custom formula | Custom mathematical expression | Text (e.g., (A * B) - C) |
| Layout | Form layout | Vertical / Horizontal |
| Result format | Result display format | Number / Currency / Percentage |
| Currency | Currency symbol | EUR / USD / GBP / Custom |
| Result prefix | Text before the result | Text (e.g., "You save") |
| Result suffix | Text after the result | Text (e.g., "per year") |
| Result animation | Animated counter for the result | On / Off |
Available Blocks
| Block | Description |
|---|---|
| Heading | Section title |
| Text | Description / instructions |
| Calculator Input | Numeric input field |
| Button | CTA button (e.g., "Get a quote") |
Calculator Input Block
Each input field is a block with these parameters:
| Field | Description |
|---|---|
| Label | Field name (e.g., "Current monthly budget") |
| Placeholder | Hint text in the field |
| Default value | Pre-filled value |
| Min | Minimum allowed value |
| Max | Maximum allowed value |
| Step | Increment (e.g., 10, 100) |
| Type | Text field / Slider / Select |
| Variable | Variable letter (A, B, C, D) |
Custom Mode (Custom Formula)
Custom mode allows you to define a free mathematical formula using variables A, B, C, D corresponding to the Calculator Input blocks.
Formula examples:
| Formula | Description |
|---|---|
A + B | Simple addition |
A * 12 | Annualized value |
(A * B) - C | Calculation with subtraction |
A * B * 0.3 | With fixed coefficient |
(A - B) / A * 100 | Savings percentage |
Use Cases
Savings Calculator
- Horizontal layout
- Input A: "Current monthly expense" (slider, 0-5000)
- Input B: "Number of months" (select, 6/12/24)
- Formula:
A * B * 0.30 - Prefix: "You save"
- Format: Currency EUR
- Button: "Start saving"
ROI Calculator
- Vertical layout
- Input A: "Monthly revenue" (text field)
- Input B: "Current conversion rate %" (slider, 0-10)
- Input C: "Estimated improvement %" (slider, 0-50)
- Custom formula:
A * (B / 100) * (C / 100) * 12 - Suffix: "in additional revenue per year"
Price Estimator
- Horizontal layout
- Input A: "Quantity" (slider, 1-1000)
- Input B: "Product type" (select with unit prices)
- Operation: Multiplication
- Format: Currency
- Button: "Request a quote"
💡Pre-fill the fields with realistic values that show an impressive result. The visitor will immediately see the value without having to enter anything.
⚠️The custom formula uses a secured client-side
eval. Only basic mathematical operators and variables A-D are allowed. There is no risk of code injection.ℹ️The counter animation (when the result changes) creates a "slot machine" effect that draws attention. It is automatically disabled if
prefers-reduced-motion is active.