Payment Calculator Pro for HubSpot

Features

• Calculator presets — One dropdown, content.calc_mode, switches the module between loan, mortgage, savings and subscription. The inputs, the result rows, the chart and the table all change with it. In the page editor, each preset shows only its own field groups.
• Loan and auto payment — Amount, interest rate and term produce the monthly payment, the total interest and the total repaid, using the standard amortising payment formula. A zero rate falls back to dividing the amount by the number of months.
• Mortgage — Property price and deposit set the amount borrowed. Principal and interest are calculated over the term, and annual property tax and insurance are divided across the months and added to the headline figure. The deposit is also shown as a percentage of the price.
• Savings growth — A starting balance and a monthly contribution compound at a monthly rate for the number of years set. The result splits into what was paid in and what was earned.
• Subscription and cost saving — A current monthly cost and a proposed monthly cost across a term in months give the total saved, the saving per month, both plan totals and the reduction as a percentage.
• Amortisation and year-by-year tables — Loan and mortgage produce a real amortisation schedule: principal paid, interest paid and balance remaining for each year, ending at zero. Savings lists the balance at the end of each year. Subscription lists the saving each year and the running total. The table sits behind a toggle and scrolls inside its own box.
• Currency and number format — Symbol, symbol position, an optional space, the thousands separator, the decimal separator, the number of decimal places and the percent symbol are all fields, so the same module reads correctly in any locale.
• Slider and number entry together — Every input has a slider and a number box wired to each other. Drag or type, and typed values are clamped to the minimum and maximum on blur.
• Chart — Loan and savings draw a two-part stacked bar, mortgage draws a three-part bar when tax and insurance are on, and subscription draws two compare bars. Legend text comes from fields.
• Empty state — When the values cannot produce a result, such as a deposit at or above the property price, the results panel shows editable empty-state text in place of a figure.
• Count-up — Results ease from the old figure to the new one, with the length set in milliseconds. Setting the length to zero, or switching the option off, makes figures snap.
• No dependencies — No jQuery, no chart library, no font icons. The CSS and JS are inline and scoped to the module instance, so several calculators can sit on one page without colliding.

Content Fields

Content

• Calculator — calc_mode. Loan / auto payment, Mortgage, Savings growth, Subscription / cost saving.
• Show heading, Heading, Heading tag (H2, H3, H4) and Subheading.
• Breakdown heading — The small label above the breakdown rows.
• Year-by-year heading, Show table button, Hide table button — The table section title and the two states of its toggle.
• Reset button — Text for the button that returns every slider to its starting value.
• Empty state — Shown in place of the figures when the current values give no result.
• Show disclaimer and Disclaimer — Small print under the calculator.

Currency and number format

• Currency symbol and Symbol position — Before or after the number.
• Space between symbol and number — For locales that separate them.
• Thousands separator and Decimal separator — Free text, so a dot for thousands and a comma for decimals works.
• Decimal places — Zero through four, applied to every money figure including the table.
• Percent symbol — Used by the deposit percentage and the cost reduction row.

Preset inputs

Each preset has its own group of sliders, and each slider carries the same fields: Label, Minimum, Maximum, Step, Starting value, and on the non-money sliders a Unit shown after the value.

• Loan — Loan amount, interest rate, term.
• Mortgage — Property price, deposit, interest rate, term, plus an Include tax and insurance toggle that reveals the annual property tax and annual home insurance sliders and adds them to the monthly figure.
• Savings — Starting amount, monthly contribution, annual return, years.
• Subscription — Current monthly cost, new monthly cost, term in months.

Preset result labels

Every preset has a matching labels group so no text is fixed in the markup: the headline label and its caption, one label per breakdown row, the chart legend, and the column headers for the year-by-year table.

Settings

• Layout — Side by side or stacked.
• Panel ratio — 50/50, 58/42, 60/40 or 40/60. Shown only when the layout is side by side.
• Show breakdown rows — Toggle the rows under the headline figure.
• Show chart — Toggle the bar and its legend.
• Show year-by-year table — Toggle the whole table section.
• Open the table by default — Whether the table starts expanded.
• Maximum table rows — Caps how many years are listed, for long terms.
• Show reset button — Toggle the reset control in the results panel.
• Count results up and Count-up length — Whether figures animate to their new value, and over how many milliseconds.

Style Controls

Container

Maximum width, padding, background, border colour, border width, corner radius, shadow (none, small, medium, large), shadow colour, and the gap between the input and result panels.

Colours

• Accent and text — Accent, heading, subheading, input label, input value, captions and units, dividers.
• Sliders and fields — Track, fill, handle, handle border, focus ring, number field background and border.
• Results panel — Panel background and border, headline figure, breakdown row label and value.
• Chart — Track plus three segment colours for the stacked and compare bars.
• Table — Header text, body text and rule colour.
• Buttons — Background, text, border and hover background, used by both the reset and the table toggle.

Typography

A base font and a heading font, each a font picker. The base font inherits from the host theme's body font when the module is dropped into a theme that sets one. Independent sizes for the heading, subheading, input label, input value, headline result, breakdown row, caption, table and disclaimer.

Input controls

Gap between inputs, slider track height, handle size, handle radius, handle border width, field corner radius, number field height and number field width.

Results and chart

Results panel padding and radius, gap between rows, chart height, chart radius, gap between chart segments, table row height and the table's maximum height before it scrolls.

Layout

A spacing unit that every internal gap is derived from, plus the tablet and mobile breakpoints.

Accessibility

• Both controls reachable — Each input is a labelled number box and a range slider, so a keyboard user can tab to the box and type, or use the arrow keys on the slider.
• Real labels — The visible label is a <label> tied to the number input, and the slider carries the same text as its ARIA label.
• Announced results — The headline figure is a polite live region, so screen readers hear the new payment after a change.
• Table toggle — The button carries aria-expanded and aria-controls pointing at the table, and its text changes between the show and hide strings.
• Focus indicators — Sliders and buttons draw a focus ring using focus-visible, in a colour you set.
• Reduced motion — Under prefers-reduced-motion: reduce, the count-up is skipped and the transitions on the chart, buttons and handles are switched off.
• Semantic table — The year-by-year view is a real table with <th scope="col"> headers taken from fields.

Responsive Behavior

• Desktop — Inputs and results sit side by side at the panel ratio you choose, vertically centred against each other.
• Tablet — At the tablet breakpoint the two panels stack into one column, and the heading and headline figure step down in size.
• Mobile — At the mobile breakpoint the container and results padding tighten, the number field takes the remaining width of its row, the headline figure steps down again, and the subscription compare rows put each label above its bar.
• Table — The year-by-year table scrolls inside its own box, vertically past the maximum height and horizontally on narrow screens, so the page itself never scrolls sideways.
• From 360px — Checked down to a 360px column with the mortgage preset, which carries the most inputs.

Demo Notes

• Demo 1 (Loan) — out of the box — Shipped defaults, one override: max_width to match this page's text column. Sans face, 14/10/8 radii, 1px neutral-200 rules, 4px track, 24px handle. Side by side at 58/42, dollar before the number, no decimals, table closed, count-up 600ms.
• Demo 2 (Mortgage) — technical — IBM Plex Mono throughout, 2px radii and a 0px chart radius, 2px track, cool slate palette, blue focus ring, hover raises the button surface. Tax and insurance on, so the chart runs three segments. Pound symbol, 50/50, table open on load.
• Demo 3 (Savings) — editorial — Fraunces headings over Work Sans, 20/16/12 radii, 6px track, brown fill, medium shadow in brown, warm paper surfaces. Panels stacked. Euro after the number, dot thousands, comma decimals, carried through to the number boxes.
• Demo 4 (Subscription) — consumer finance — Manrope, 24/18/14 radii, 2px lilac border, large indigo shadow, 8px track with an indigo fill and a 3px handle border, 3px focus ring. Side by side at 40/60, two compare bars, two decimals, count-up off.
• What this shows — No custom CSS anywhere on this page. Every difference above is a value in the module's own style fields, reachable from the page editor.
• Instance names — demo_loan, demo_mortgage, demo_savings, demo_subscription. Each instance name is unique so the overrides stay with the instance they belong to.