ROI Calculator Pro for HubSpot

What ROI Calculator Pro Does

ROI Calculator Pro is an interactive calculator module for HubSpot. It lets visitors adjust inputs — sliders, number fields, dropdowns, or toggles — and see real-time results calculated by a safe formula engine. Results animate with a count-up effect, and the calculator state can be shared via URL parameters. An optional HubSpot form integration captures leads after they see their results.

Everything is configured from the HubSpot editor: inputs, formulas, outputs, form settings, and the full visual design. No code required.

Input Types

Each calculator input is defined in a repeater field with full control over its behavior and appearance.

• Slider — a range input with configurable min, max, step, and default value. The track fill updates in real time. Prefix and suffix text appear in the value display (e.g. "$5,000" or "25 hrs").
• Number Input — a standard number field with optional prefix/suffix rendered inside the input border. Supports min, max, and step validation.
• Dropdown — a select menu with comma-separated label:value pairs (e.g. "Small:10,Medium:50,Large:100"). The numeric value is used in formulas.
• Toggle — an on/off switch with configurable on/off values and display labels. Useful for yes/no multipliers (e.g. "Annual billing? Yes/No" with values 0.8/1).
• Read-only — a non-interactive display field. Useful for showing fixed values like tax rates or base prices that are also used in formulas.

Every input has a unique field ID (snake_case), used to reference it in output formulas. Optional tooltip text adds a hover "?" icon with an explanation.

Formula Engine

Output values are computed from formulas using a safe recursive descent parser — no eval() or Function() constructor. The parser supports:

• Arithmetic — +, -, *, /, % (modulo)
• Parentheses — for grouping: ({a} + {b}) * {c}
• Unary minus — negative values: -{discount}
• Comparison — >, <, >=, <=, ==, != (returns 1 or 0)
• Ternary — condition ? value_if_true : value_if_false
• Functions — round(), floor(), ceil(), abs(), min(), max(), if(condition, then, else)
• Variables — {field_id} references any input value, constant, or previous output

Constants are defined separately with a name and value. They are available in all formulas alongside input values. Output values are also stored in state, so later outputs can reference earlier outputs.

Result Cards

Each output renders as a card in a configurable grid (1, 2, or 3 columns). Cards display an optional FontAwesome icon, the computed value, and a label. One or more cards can be marked as "primary" — these receive a highlighted background (accent color by default) for visual emphasis.

Output formatting options include: number (integer with commas), currency (currency symbol prefix), percent (value + % suffix), and decimal (fixed decimal places). Each output also supports a custom prefix and suffix for additional context.

URL Sharing

When "Include in shareable URL" is enabled on an input, its current value is written to the page URL as a query parameter. Visitors can copy the URL (via the Copy Results Link button) and share it — when someone opens the link, the calculator initializes with the shared values and shows the same results.

URL parameters are updated in real time as inputs change, using history.replaceState() to avoid page reloads. Only inputs with URL sharing enabled are included.

HubSpot Form Integration

Enable the form integration to capture leads after they calculate their ROI. Three trigger modes control when the form appears:

• Show on Page Load — the form section is visible immediately below the results
• Show After First Interaction — the form appears after the visitor adjusts any input
• Show on CTA Click — a button appears below the results; clicking it reveals the form

The form section includes a heading, subheading, the embedded HubSpot form, and a thank-you message that replaces the form after submission. All text is configurable from the Content tab.

Style System

Every visual property is controlled from the Style tab in the HubSpot editor. The module uses CSS custom properties internally, all derived from field values.

• Container — max width, padding, background color, border color, border radius, shadow (none/sm/md/lg), panel gap
• Colors — 24 color fields covering accent, heading, subheading, input labels, input values, slider track/fill/thumb, input borders/focus, toggle on/off, result card background/border/value/label/icon, primary card background/text, tooltip, CTA button (default + hover), and form section background. All support opacity.
• Typography — base font picker (inherits from theme if available), plus individual sizes for heading, subheading, input labels, input values, result values, result labels, and CTA button
• Result Cards — border radius, padding, shadow (none/sm/md), hover effect (none/lift/glow)
• Input Controls — gap between inputs, input border radius, slider thumb size, slider track height, tooltip radius
• Responsive — configurable tablet breakpoint. Below this breakpoint, side-by-side layouts stack vertically and result grids collapse to single column.

Layout Options

Two layout modes are available:

• Side by Side — inputs on the left, results on the right. Three panel ratios: 50/50, 60/40, or 40/60. Ideal for desktop-first calculators where users want to see inputs and results simultaneously.
• Stacked — inputs above, results below. Better for simpler calculators, mobile-first designs, or dark-themed layouts where you want full-width impact.

On mobile (below the tablet breakpoint), both layouts stack vertically. When "Sticky Results on Mobile" is enabled, the results panel sticks to the top of the viewport as the user scrolls through inputs.

Technical Details

• Zero dependencies — vanilla JavaScript, no jQuery, no external libraries except FontAwesome for result card icons
• Safe formula parsing — recursive descent parser with tokenizer. No eval(), no Function constructor, no code injection vectors. Only arithmetic, comparisons, and whitelisted math functions.
• Accessible — ARIA labels on all interactive controls, role="switch" on toggles, focus styles on all inputs, keyboard-navigable throughout
• Animated count-up — results animate from previous value to new value using requestAnimationFrame with cubic easing. Respects prefers-reduced-motion.
• Instance isolation — all CSS scoped with a unique instance ID via HubL docs. Multiple calculators on the same page work independently.
• Any template — works on website pages, landing pages, blog listings, and blog posts. No theme dependency. Includes its own complete stylesheet.
• URL state management — uses URLSearchParams and history.replaceState for shareable calculator state without page reloads
• Output chaining — output values are stored in state after calculation, so later outputs can reference earlier outputs in their formulas