Your marketing team wants an ROI calculator on the website. The kind where a visitor plugs in their current costs, sees how much they would save with your product, and then fills out a form to talk to sales. Every SaaS company with a sales-led motion needs one. Almost none of them have one that works.
The usual options: pay a developer $3,000 to $8,000 to build a custom calculator from scratch. Use a third-party tool like Outgrow or Calconic that costs $50 to $300 a month, injects its own branding, and loads slowly because it is an iframe from someone else's server. Or paste a Google Sheet embed on the page and hope nobody notices.
ROI Calculator Pro is a HubSpot CMS module that lets you build any interactive calculator from the page editor. Define your inputs, write your formulas, style the results, and optionally gate the output behind a HubSpot form. No code. No monthly fees. No third-party scripts.
Five input types that cover any calculation
The module supports five input types, and you can use up to 12 of them in a single calculator.
Sliders are the most common input for calculators. Set a minimum, maximum, step size, and default value. The slider fills with your accent color as the visitor drags. A prefix and suffix let you display the value as currency, hours, percentage, or any unit. The default calculator ships with sliders for current cost, new cost, team size, and hours saved per week.
Number inputs give visitors a text box where they type a specific value. Useful when the range is too wide for a slider or when precision matters. Same prefix, suffix, min, max, and step configuration as sliders.
Dropdowns let visitors pick from predefined options. Each option has a label and a numeric value. Use these for categorical inputs like company size tier, industry, or plan selection. The selected value feeds into your formulas like any other input.
Toggles switch between two states, each with its own numeric value. Monthly versus annual billing. With or without a specific feature. Include or exclude taxes. The toggle animates between states and displays configurable label text for each position.
Read-only fields display a static value that feeds into formulas but cannot be changed by the visitor. Use these for constants like hourly rates, tax percentages, or conversion factors that you want visible in the calculator layout without making them editable.
A formula engine that does not use eval()
This is the part that matters if you care about security and reliability. Most calculator tools on the market use JavaScript eval() or the Function() constructor to process formulas. Both execute arbitrary code. Both are security vulnerabilities. Both will get flagged by any serious security audit.
ROI Calculator Pro uses a safe recursive descent parser. The formula engine tokenizes your expression, builds an abstract syntax tree, and evaluates it without ever executing arbitrary code. It supports arithmetic operators (addition, subtraction, multiplication, division, modulo), comparison operators (greater than, less than, equal, not equal), ternary conditionals, and seven built-in functions: round(), floor(), ceil(), abs(), min(), max(), and if().
You reference input values in formulas using curly brace syntax: {current_cost}, {team_size}, {hours_saved}. The engine resolves each variable from the current input state, evaluates the expression, and returns a number. Division by zero is handled safely. NaN and Infinity are caught before display.
Output chaining means later results can reference earlier ones. If your first output calculates annual savings, your second output can reference that value to compute a payback period. This lets you build multi-step calculations without cramming everything into a single formula.
Constants provide reusable values across all formulas. Define a tax rate, an hourly cost, or a conversion factor once, and use it in every formula without repeating the number. Up to 10 constants per calculator.
Results that animate and update in real time
Every time a visitor moves a slider or changes an input, all output values recalculate and animate to their new numbers. The count-up animation uses requestAnimationFrame at 60 frames per second with an easeOutCubic easing curve. Numbers ramp up smoothly and decelerate at the end instead of snapping to the final value.
The animation is not just cosmetic. It draws the visitor's eye to the result that just changed, reinforcing the cause-and-effect relationship between their input and the outcome. When someone drags the team size slider from 10 to 50 and watches the annual savings number climb from $36,000 to $180,000, that is the moment they decide to fill out your form.
Four output formats handle different result types: number (whole numbers with thousand separators), currency (dollar sign with decimals), percent (with configurable decimal places), and decimal (for ratios and months). Each output gets its own label, icon, prefix, suffix, and decimal precision. You can mark one output as primary, which gives it a full-width card with your accent color background and larger typography.
The module respects prefers-reduced-motion. If a visitor has reduced motion enabled in their operating system, all animations are disabled and values update instantly. This is not optional accessibility. It is built into the animation system.
Shareable calculator state via URL
Every input value encodes into the page URL automatically. When a visitor configures a calculator, the URL updates in real time with their exact values. They can copy this URL and share it with a colleague, and the colleague sees the same calculator with the same numbers pre-filled.
This feature alone justifies the module for sales teams. A sales rep can configure the calculator with a prospect's actual numbers, copy the link, and paste it into an email. The prospect clicks the link, lands on the page with their numbers already loaded, and sees the ROI case made for them. No static PDF. No spreadsheet attachment. A live, interactive page that the prospect can adjust.
URL parameters are namespaced per calculator instance. If you have three calculators on the same page, each one gets its own parameter prefix so values never collide. You control which inputs appear in the URL on a per-field basis, so sensitive values can be excluded from the shared link.
A "Copy Results Link" button generates the shareable URL and copies it to the clipboard with a confirmation message. The link includes an anchor hash that auto-scrolls to the calculator when the recipient opens it.
HubSpot form integration with four trigger modes
The optional form integration connects any HubSpot form to the calculator. Paste your form ID, choose a trigger mode, and the form appears at the right moment in the visitor's journey.
On page load shows the form immediately alongside the calculator. Use this when you want the form visible from the start, like on a dedicated pricing page where visitors expect to provide contact information.
After first interaction hides the form until the visitor changes any input. The logic is simple: someone who has not touched the calculator is browsing. Someone who moved a slider is engaged. Show the form when engagement happens.
On CTA click shows a "Get Your Full Report" button below the results. When clicked, the form reveals with a smooth scroll. This is the highest-intent trigger because the visitor has already seen their results and actively chose to take the next step.
Disabled removes the form entirely. Use this when the calculator is purely informational or when you handle conversion through a separate CTA that links to another page.
When the form is submitted, the embed area is replaced with a customizable thank you message. The calculator stays functional so the visitor can continue adjusting values after submitting.
What you can build with ROI Calculator Pro
SaaS ROI calculator. Inputs for current tool cost, team size, hours spent on manual work. Outputs for annual savings, hours recovered, and payback period. Primary output card highlights the dollar amount. Form gated on CTA click. Sales team sends pre-configured links to prospects.
Hiring cost estimator. Inputs for number of hires, average salary, recruiter fees, onboarding costs. Outputs for total hiring cost, cost per hire, and time to productivity. Dropdown for department selection that adjusts salary ranges. Useful for HR tech and staffing companies.
Insurance savings calculator. Inputs for current premium, coverage type dropdown, deductible level, household size. Outputs for estimated savings, recommended coverage, and annual cost. Toggle for bundled versus individual policies. CTA links to a quote request form.
Pricing configurator. Inputs for user count, storage tier dropdown, support level toggle. Outputs for monthly cost, annual cost, and savings versus monthly billing. Constants for per-user pricing at each tier. Replaces static pricing cards with an interactive tool that handles complex pricing models.
Carbon footprint calculator. Inputs for miles driven, energy usage, flights per year. Outputs for annual carbon footprint, offset cost, and equivalent trees planted. Read-only fields for emission factors. Educational tool that drives engagement for sustainability companies.
49 style controls for any brand
Every visual property is controlled from the Style tab in the HubSpot editor. 24 color fields with opacity control cover the container, inputs, sliders, toggles, result cards, tooltips, CTA buttons, and form section. A Google Font picker with 7 individual size controls handles all typography. Result card styling includes border radius, padding, shadow intensity, and hover effects (lift or glow). Input controls cover gap spacing, border radius, slider thumb size, and track height.
The module inherits your theme accent color and body font by default. If you change nothing in the Style tab, the calculator already matches your site. If you want a dark version, change the container background and text colors. If you want branded result cards, set the primary card background to your brand color. No CSS files to edit.
Two layout modes: side by side (inputs on the left, results on the right) and stacked (inputs above results). Four panel ratios for the side by side layout: 50/50, 60/40, 40/60, and 58/42. The results panel can optionally stick to the viewport on scroll so visitors see their numbers update as they adjust inputs further down the page.
Get ROI Calculator Pro
ROI Calculator Pro is available on the HubSpot Marketplace for $14.99. One purchase, no monthly fees, no third-party dependencies beyond FontAwesome icons. Works on any HubSpot CMS template including website pages, landing pages, and blog posts.
Full feature details on the ROI Calculator Pro product page. If you need an interactive calculator on your HubSpot site and do not want to pay a developer $5,000 or subscribe to a $200 a month SaaS tool, this is the module.