Skip to content
English
Customer portal
Visit us at Arise GTM
  • There are no suggestions because the search field is empty.

Cost Calculator Standard

Setup & Configuration Guide

Overview

The Cost Calculator module lets you add an interactive pricing estimator to any HubSpot page. Visitors configure options using dropdowns, sliders, toggles, quantity selectors, and checkboxes — and see a real-time cost total update instantly. A built-in quote form captures leads directly into your HubSpot CRM.

Best for: Service pricing pages, SaaS plan builders, project estimators, event cost calculators, and any page where visitors need to calculate a price before contacting sales.

Getting Started

  1. Open any Site Page, Landing Page, Blog Post, or Knowledge Base article in the HubSpot page editor.
  2. Click Add in the left panel and search for Cost Calculator.
  3. Drag the module onto your page.
  4. Click on the module to open the settings panel on the left.

Field Reference

Setup

Field What it does
Calculator Title The heading shown above the calculator. Default: "Project Cost Estimator"
Calculator Subtitle A short description below the title.
Currency Symbol The symbol shown with prices (e.g. $, £, €). Default: "$"
Currency Position Display symbol before ($100) or after (100€) the amount.
Show subtotal per item When ON, each calculator row shows its individual cost on the right.
Total Label The text label next to the grand total. Default: "Estimated Total"

Calculator Items (Repeater — up to 10 items)

Each calculator item is one row in your estimator. Click Add to create more rows.

Field What it does
Item Label The name of this row (e.g. "Service Package", "Number of Users").
Input Type The control type for this row. See Input Types below.
Help Text Optional small text shown below the label to guide the visitor.

Input Types

Dropdown Selector — Enter options one per line in the format: Label | Price. The visitor selects one option and its price is added to the total.

Range Slider — Set Min, Max, Step, and Default values. Set a Price Per Unit — the slider value is multiplied by this. Formula: slider value × price per unit = row cost.

On/Off Toggle — Set a Toggle Price — this amount is added when the toggle is ON. Great for add-ons like "Priority Support — $149".

Quantity Input — A number field with +/− buttons. Set Min, Max, Default values and a Price Per Unit.

Checkbox Group — Enter options one per line in the format: Label | Price. Visitors can select multiple options — all selected prices are summed.

Quote & Contact Form

Field What it does
Show quote request form When ON, a "Get Your Quote" button appears below the total.
HubSpot Form Select any HubSpot form. The calculated total and line items are passed as hidden fields.
Get Quote Button Text The CTA button text. Default: "Get Your Quote"
Show quote summary When ON, a line-item breakdown is displayed above the form.

Style & Appearance

Field What it does
Accent Colour The primary brand colour used for totals, sliders, buttons, and highlights.
Background Colour The calculator container background.
Text Colour Main text colour for labels and values.
Border Colour Borders between calculator rows.
Corner Radius Sharp (0px), Slight (4px), Rounded (8px), or Pill (16px).

Example Configuration

Scenario: A web agency pricing page

Row Type Configuration
1 Dropdown "Website Package": Starter | 2499, Growth | 4999, Enterprise | 9999
2 Slider "Number of Pages": Min 5, Max 50, Unit Price $150
3 Toggle "SEO Setup": Toggle Price $799
4 Checkbox Group "Add-ons": Blog Setup | 499, E-commerce | 1299, CRM Integration | 699

Tips

  • Lead capture: Connect the quote form to a HubSpot workflow that emails the sales team with the calculated total.
  • Hidden fields: Create custom contact properties in HubSpot (e.g. "Estimated Budget") and map them in your form to capture the calculator total.
  • Mobile: The calculator is fully responsive — dropdowns and controls stack vertically on small screens.
  • Multiple on one page: You can place multiple Cost Calculator modules on the same page — each operates independently.

Upgrading to Pro

Need more than 10 items, conditional logic, multi-step wizard mode, or additional input types like date pickers and image selectors? See the Cost Calculator Pro module.