An ROI calculator is one of the highest intent tools you can put on a website. A visitor types in their own numbers, sees what your product or service is worth to them, and is far more likely to fill out a form once they have a number in front of them. The problem is that most teams either pay a developer a few thousand dollars to build one, rent a third party tool like Outgrow or Calconic for a monthly fee, or give up and embed a Google Sheet.
You can build the whole thing inside HubSpot CMS instead, from the page editor, with no code. This guide walks through how to do it step by step, including how to chain outputs together so one result feeds into the next. We will use ROI Calculator Pro as the tool, but the planning steps apply to any calculator you build.
What you are building
A calculator has two halves. On one side are the inputs the visitor controls, such as team size, current cost, or number of seats. On the other side are the outputs you calculate from those inputs, such as annual savings, payback period, or total cost. The visitor moves a slider or types a number, and the outputs update in real time.
Before you touch the editor, it helps to sketch this on paper. Write down every number you want the visitor to enter, then every number you want to show them, then the math that connects the two. Once you have that, the build is quick.
Step 1: Plan your inputs
Decide what the visitor will enter and pick the right control for each one. ROI Calculator Pro gives you five input types, and each suits a different kind of value:
- Slider for a range the visitor adjusts by feel, like team size or hours per week.
- Number field for an exact figure they already know, like their current monthly spend.
- Dropdown for a fixed set of choices, like a plan tier with a set price.
- Toggle for a yes or no that changes the math, like turning an annual discount on or off.
Give every input a short ID in snake_case, such as team_size or current_cost. You will use these IDs in your formulas, so keep them clear.
Step 2: Write your formulas
Each output has a formula. You reference an input by wrapping its ID in curly braces. To subtract a new cost from a current cost and multiply by twelve months, you would write:
({current_cost} - {new_cost}) * 12
The formula engine supports the usual math operators, parentheses for grouping, and helper functions like max() and min() to guard against dividing by zero. It does not use the browser eval function, so nothing a visitor types can run as code on your page.
Step 3: Chain outputs so one result feeds the next
This is the part that lets you build a real calculation instead of a list of separate sums. Once an output is calculated, its result is stored under its own ID, and any output below it can reference that ID the same way it references an input.
Say you are estimating the revenue from a blog program. You can break it into a chain where each step builds on the one before it:
- Monthly visitors with ID
mo_visitors:{posts_mo} * {traffic_per_post} - Leads per month with ID
mo_leads:{mo_visitors} * ({conv_rate} / 100) - Monthly revenue with ID
mo_revenue:{mo_leads} * {deal_value} - Projected annual revenue:
{mo_revenue} * 12
Notice that leads uses the visitors result, revenue uses the leads result, and annual revenue uses the monthly revenue result. You never repeat the same math twice, and if you change how visitors are calculated, everything downstream updates with it.
There is one rule to remember. Outputs calculate from top to bottom, so an output can only reference another output that sits above it in the list. If revenue needs the leads number, leads has to come first. Keep your outputs in the order the math flows and chaining just works.
You can add up to twelve outputs in a single calculator, which is enough room for a full chain like the one above plus the summary numbers you want to highlight.
Step 4: Format the results
Raw numbers are hard to read, so format each output for what it represents. Set the format to currency for money, percent for rates, or number for counts, and choose how many decimal places to show. You can add a prefix or suffix too, such as a currency symbol or a label like /mo. A clean dollar figure with no stray decimals reads as trustworthy, which matters when the whole point is to make your visitor believe the number.
You can also mark one output as the primary result. That card gets your accent color and a slightly larger value so the visitor's eye lands on the number that matters most, like total savings or annual ROI.
Step 5: Capture the lead
A calculator earns its place when it turns interest into a contact. Connect a HubSpot form and choose when it appears. You can show it after the visitor interacts with the calculator, when they click a button, or right away. Because it is a native HubSpot form, every submission lands in your CRM with the rest of your contacts, ready for a workflow or a sales follow up.
The visitor can also share their result. Each calculator can copy a link that reopens the page with their exact numbers filled in, which is useful when someone wants to send their estimate to a colleague or a manager who holds the budget.
A worked example
Here is the blog program calculator from above with real numbers. With eight posts a month, five hundred visitors per post, a two percent conversion rate, and a two thousand dollar average customer value, the chain produces four thousand monthly visitors, eighty leads, one hundred sixty thousand dollars in monthly revenue, and just under two million dollars projected for the year. Move any slider and the whole chain recalculates instantly. That is the kind of moment that makes a visitor want to talk to you.
Build it with ROI Calculator Pro
Everything in this guide is configured from the HubSpot page editor with ROI Calculator Pro. You define the inputs, write the formulas, chain the outputs, style the results, and connect a form, all without writing code or paying a monthly fee. It works on website pages, landing pages, and blog posts.
ROI Calculator Pro is available on the HubSpot Marketplace, and you can see the full feature list on the product page. If you have wanted an interactive calculator on your HubSpot site without hiring a developer or renting a third party tool, this is how you build one.