ROI Calculator Kit for Framer

Installation

1. Open the component link you received after purchase, copy it, click the canvas of your Framer project and paste (Cmd+V / Ctrl+V). ROI Calculator Kit appears in your Assets as a code component.
2. Drag it onto a page. It drops in with a working sample calculator: four sliders, three results and a share button.
3. Set its Width to Fill (or a fixed width). Leave Height on Auto: the calculator grows with its content.
4. Select it and edit it in the properties panel: content first (inputs, outputs, constants, settings), then the Style · … groups.
5. Give the calculator a URL Key of its own if the page has more than one calculator.
6. Use Preview or the published site to try it. On the canvas the calculator shows its starting values and doesn’t respond to input, so it stays easy to select.

Features

• Five input types: Slider, number field, dropdown, toggle and read-only value, each with its own label, tooltip, prefix and suffix.
• Your own formulas: Arithmetic, comparisons, conditions and functions over the inputs, constants and earlier results. A parser reads them; nothing runs as code.
• Formatted results: Currency, number, percent or decimal, with thousands separators and your currency symbol.
• Count-up results: Values count up to the new result as visitors change an input, and appear at once for visitors who prefer reduced motion.
• Shareable results: The page address follows the inputs that have Include in shareable URL on, and the share button copies a link that opens the calculator with those values.
• Form under the results: Connect a Framer form and show it on load, after the first change or on a button click.
• Section titles: Group related inputs under small headings with their own style.

Content

The first controls in the panel set the text around the calculator. Controls that have no effect in your current setup stay hidden, for example the form texts while Enable Form is off.

• Calculator Heading: The title at the top of the calculator.
• Calculator Subheading: One line under the title.
• Show heading: Shows or hides the heading block (title, subheading and the line under them).
• Results Panel Heading: Small uppercase label above the result cards (e.g., “Your Savings”).
• Copy Link Button Text: Label of the share button.
• Copy Link Success Text: Shown on the share button for two seconds after the link is copied.
• Currency Symbol: Put in front of every result with the Currency format (e.g., $, €, £, CHF ). Leave it empty for no symbol.
• Form CTA Button Text: Label of the button that reveals the form, when Form Trigger is Show on CTA Click.
• Form Section Heading: Heading above the form.
• Form Section Subheading: One line under the form heading.
• Form Thank You Message: Only with a Form Embed URL: replaces the embedded form page when that page reports a submission (see Adding a Form).

Calculator Inputs

Calculator Inputs is a list in the panel (up to 12). Click a row to edit it, use + to add one and drag rows to reorder them. Each input has these fields; the panel shows only the ones that apply to the Input Type you pick:

• Section Title: Optional small heading above this input. It starts a new group, so related inputs read as one section. Leave it empty to continue the current group.
• Field ID: The name you use in formulas, in snake_case (e.g., team_size becomes {team_size}). It also names the value in shared links.
• Label: The text above the control.
• Input Type: Slider, Number Input, Dropdown, Toggle or Read-only.
• Default Value: The value on page load. A slider snaps it to its Step and range; a dropdown with no option of that value starts on its first option.
• Min Value: Lowest value of a slider. For a number field, the lower end of its up/down arrows; typed values are used as entered.
• Max Value: Highest value of a slider. For a number field, the upper end of its up/down arrows.
• Step: Increment of a slider and of the number field’s arrows (e.g., 1, 0.5, 100).
• Prefix: Text before the shown value (e.g., $). Number fields also show it in a cell before the field.
• Suffix: Text after the shown value (e.g., hrs, %). Number fields also show it in a cell after the field.
• Tooltip: Adds a “?” next to the label. Hover or keyboard focus shows this text.
• Dropdown Options: Comma-separated Label:value pairs, e.g. Starter:29,Growth:49,Scale:99. The option whose value equals the Default Value starts selected; with no match, the first option.
• Toggle On Value: The number used in formulas when the toggle is on (e.g., 0.8 for a 20% discount). Any number works, including 0.
• Toggle Off Value: The number used when the toggle is off (e.g., 1).
• Toggle On Label: Text next to the toggle when it is on.
• Toggle Off Label: Text next to the toggle when it is off.
• Include in shareable URL: Writes this input’s value into the page address and the copied link.

Input types

• Slider: Min, Max and Step set the range. The value next to the label updates as it moves, with Prefix and Suffix.
• Number Input: A field for typed numbers, with Prefix and Suffix cells. Typed values are not limited to Min and Max; an empty field counts as 0.
• Dropdown: Options come from Dropdown Options. The label is what visitors see, the value is what formulas use.
• Toggle: On and off each stand for a number (Toggle On Value / Toggle Off Value), so a toggle can multiply (0.8 and 1) or add (500 and 0). The value next to the label shows that number.
• Read-only: A fixed value shown as text, with Prefix and Suffix. Formulas can use it.

Calculator Outputs

Calculator Outputs is a list too (up to 12). Each output is a result card, in list order:

• Output ID: Names the result. Later outputs can use it in their formulas, like an input.
• Label: Uppercase text above the value.
• Formula: The calculation, e.g. ({current_cost} - {new_cost}) * 12. See Writing Formulas.
• Prefix: Text before the formatted value.
• Suffix: Text after the formatted value, with a space (e.g., hrs, /mo).
• Format: Number (rounded, with thousands separators), Currency (the Currency Symbol in front), Percent (a % after the value) or Decimal (fixed decimal places).
• Decimal Places: 0 to 4, for Currency, Percent and Decimal.
• Primary (highlighted): Shows the card in the primary colors with a larger value.
• Icon set: Phosphor or Feather, Framer’s own icon sets.
• Icon Name: A Phosphor icon next to the label. None hides it.
• Icon weight: Thin, Light, Regular, Bold, Fill or Duotone. Fill draws solid shapes.
• Icon: The Feather icon, when Icon set is Feather.

Negative currency shows as $-1,234. A result that can’t be computed (for example a division by zero) shows —.

Constants

Named numbers available in every formula (up to 10). Use them for rates and factors visitors shouldn’t change.

• Constant Name: The name used in formulas, e.g. TAX_RATE becomes {TAX_RATE}.
• Value: A fixed number visitors can’t change (a rate, a base price, a conversion factor).

Settings

• Layout: Side by Side (inputs left, results right) or Stacked (results under the inputs).
• Panel Ratio: Width split for Side by Side: 50 / 50, 60 / 40, 40 / 60 or 58 / 42 (wider inputs).
• Show Copy Link Button: Shows the share button under the results.
• Enable Form: Adds the form section under the results.
• Form: Connect a Framer form here. It shows inside the form section.
• Form Embed URL: Optional form page to embed (https), used when no Framer form is connected.
• Form Embed Height (px): Height of the embedded form page.
• Form Trigger: Show on Page Load, Show After First Interaction, Show on CTA Click or Disabled.
• Animate Result Values: Results count up to their new value.
• Animation Duration (ms): Length of the count-up. 0 shows new results without a count-up.
• Results Grid Columns: 1 to 4 columns of result cards on wide layouts. Below the Tablet Breakpoint the grid uses two columns, and one column below 480px.
• URL Key: Names this calculator in shared links. Give each calculator on a page its own key.

Writing Formulas

• Values: {field_id} for an input, a constant or an earlier output. An unknown name counts as 0. Numbers like 12, 0.35 or .5.
• Arithmetic: + - * / %, parentheses and a leading minus: ({current_cost} - {new_cost}) * 12.
• Comparisons: > < >= <= == != give 1 or 0: ({seats} > 50) * 100 adds 100 above 50 seats.
• Conditions: condition ? a : b or if(condition, a, b).
• Functions: round(), floor(), ceil(), abs(), min(a, b, …), max(a, b, …). Use max({x}, 1) to avoid dividing by zero.
• Chaining: Outputs are calculated in list order and each result is stored under its Output ID, so a later output can use an earlier one: {mo_leads} * {deal_value}. Put outputs that others depend on higher in the list.
• Example: Payback in months: {new_cost} / max({current_cost} - {new_cost}, 1) with Format Decimal and 1 decimal place.

Sharing Results

• Page address: Every change writes the inputs that have Include in shareable URL on into the address, as ?roi.team_size=12 (URL Key, a dot, the Field ID), and adds #roi-calculator-pro-roi. The page doesn’t reload, and other parameters in the address stay.
• Share button: Copies a clean link with only this calculator’s values. The button shows the Copy Link Success Text for two seconds.
• Opening a shared link: The calculator starts with the shared values and scrolls into view. Inputs left out of the link start from their Default Value.
• Several calculators: Each URL Key keeps its own values in the address, so two calculators never read each other’s.

Adding a Form

1. Turn on Enable Form.
2. Build a form with Framer’s form tools (Insert › Forms) anywhere on the canvas, then connect it to the Form control: click the control and pick the form layer. It shows inside the form section, under the Form Section Heading and Subheading.
3. Pick the Form Trigger: Show on Page Load, Show After First Interaction (after the first change to any input), Show on CTA Click (a button with the Form CTA Button Text appears under the results) or Disabled.
4. Set where submissions go in the Framer form’s own settings, as for any Framer form. Its success state is the Framer form’s own.

To use a form hosted elsewhere, paste its https address into Form Embed URL instead and set Form Embed Height (px). It loads in a sandboxed frame. If that page reports a submission to the calculator (a hsFormCallback message with onFormSubmitted), the Form Thank You Message replaces the frame; only the frame inside this calculator can trigger it. Pages that don’t send that message show their own confirmation inside the frame, and the Form Thank You Message stays hidden in the panel until a Form Embed URL is set.

Style Controls

Each group is a Style · … entry in the panel. Click it to open the group.

Style · Container

The outer card.

• Max Width (px): Widest the calculator gets; it centres in wider layers.
• Container Padding (px): Inner padding of the card.
• Background Color: Card background, also behind the results panel on tablet and phone widths.
• Border Color: 1px border of the card, the line under the heading and the line between the panels.
• Border Radius (px): Corner radius of the card.
• Shadow: None, Small, Medium or Large.
• Panel Gap (px): Space between the inputs and the results.

Style · Colors

Every color takes any Framer color, including your project color styles.

• Accent Color: Border of a focused number field or dropdown, the tooltip “?” on hover, the Glow card hover and the thank-you message.
• Heading Color: Calculator heading, form heading and the copy button hover.
• Subheading Color: Subheading, results heading, number prefix/suffix cells, read-only values and the copy button.
• Input Label Color: Input labels, the tooltip “?” and the border of a number field or dropdown on hover.
• Input Value Color: The value next to each label, number fields, dropdowns and toggle labels.
• Slider Track Color: Unfilled part of the slider.
• Slider Fill Color: Filled part of the slider and the thumb border.
• Slider Thumb Color: Slider thumb and toggle knob.
• Input Border Color: Borders of number fields and dropdowns, and the tooltip “?” background.
• Input Focus Color: The keyboard focus ring of every control. A black or white edge is added automatically, whichever contrasts with it.
• Toggle Off Color: Toggle background when off.
• Toggle On Color: Toggle background when on.
• Result Card Background: Regular result cards.
• Result Card Border: Border of regular result cards.
• Result Value Color: Values on regular cards.
• Result Label Color: Labels on regular cards.
• Result Icon Color: Icons on regular cards.
• Primary Card Background: Background of Primary (highlighted) cards.
• Primary Card Text: Value, label and icon on Primary cards.
• Tooltip Background: Tooltip bubble.
• Tooltip Text Color: Tooltip text.
• CTA Background: The form button.
• CTA Text Color: Form button text.
• CTA Hover Background: Form button on hover.
• Form Section Background: Background of the form section.

Custom Base Font

Off uses Arial. On shows Style · Base Font: pick any font, including Google and uploaded fonts, and it applies to the whole calculator.

Style · Base Font

The font family for everything in the calculator. Sizes come from Style · Typography; weights are set by the design.

Style · Typography

• Heading Size (px): Calculator heading. Smaller on tablet (×0.85) and phone (×0.75). The form heading is 0.6× this size.
• Subheading Size (px): Subheading and form subheading.
• Input Label Size (px): Input labels.
• Input Value Size (px): Values next to the labels, number fields, dropdowns, toggle labels and read-only values.
• Result Value Size (px): Result values. Primary cards show 1.15× this size.
• Result Label Size (px): Result labels and the results heading.
• CTA Font Size (px): The form button.

Style · Result Cards

• Border Radius (px): Corner radius of the cards and the form section.
• Padding (px): Inner padding of the cards. The form section uses 1.25× this value.
• Hover Effect: None, Lift (the card rises 1px with a soft shadow) or Glow (the border takes the Accent Color).

Style · Input Controls

• Gap Between Inputs (px): Vertical space between inputs.
• Input Border Radius (px): Number fields, dropdowns, the form button and the copy button.
• Slider Thumb Size (px): Thumb diameter; the slider is as tall as the thumb.
• Slider Track Height (px): Thickness of the track, centred on the thumb.
• Tooltip Radius (px): Corner radius of the tooltip bubble.

Style · Section Titles

The small headings set with Section Title on an input.

• Font Size (px): Size of the titles.
• Font Weight: Regular, Medium, Semibold or Bold.
• Color: Title color.
• Text Case: Uppercase or As typed.
• Letter Spacing (em): Tracking of the titles.
• Alignment: Left, Center or Right.
• Space Above (px): Extra space before each title after the first, added to the gap between inputs.
• Space Below (px): Space between a title and its first input.
• Divider Line Above: A line above every title except the first.
• Divider Color: Color of that line.

Style · Responsive

• Tablet Breakpoint (px): Calculator width at which the panels stack, the result grid uses two columns and the padding shrinks. The phone layout starts at 480px.

Fonts

• Default: Arial, with Custom Base Font off.
• Your font: Turn on Custom Base Font and pick a font in Style · Base Font. Framer loads it on the published site.
• Sizes and weights: Sizes come from Style · Typography and the weights from the design (medium labels, semibold values, bold results). The size and weight inside the font picker have no effect.

Accessibility

• Keyboard: Tab reaches every slider, number field, dropdown, toggle, tooltip and button. Arrow keys, Page Up/Down, Home and End move a slider; Space or Enter flips a toggle.
• Switches: Toggles are buttons with the switch role and an on/off state screen readers announce.
• Tooltips: The “?” takes keyboard focus and shows its text on focus as well as on hover.
• Focus rings: Every slider, field, dropdown, toggle, tooltip and button shows a two-tone ring (Input Focus Color with a contrasting edge) when reached with the keyboard, and none after a mouse click.
• Motion: Visitors with reduced motion turned on see results change without the count-up.
• Labels: Sliders, number fields, dropdowns and toggles are announced by their Label.
• Results: After a change, screen readers hear every result once, with its final value (not the count-up). The share button announces “Link copied!”.
• Form button: The form button reports whether the form is shown (expanded) and which section it opens.

Responsive Behavior

Breakpoints follow the calculator’s own width, so it adapts the same way in a full-width section or a narrow column.

• Wide: Side by Side shows the two panels with your Panel Ratio; the result grid uses Results Grid Columns.
• Tablet: At the Tablet Breakpoint (768px by default) the panels stack, the result grid uses two columns, the padding shrinks to 20px and the heading and values scale down.
• Phone: At 480px the result grid becomes one column, the padding is 16px and the inputs sit closer together.

FAQ and Troubleshooting

• The sliders don’t move on the canvas: The canvas shows the starting values. Open Preview or the published site.
• A result shows a dash instead of a number: The formula divides by zero or can’t be computed. Wrap divisors in max(…, 1).
• A result shows 0: Check the spelling of every {field_id} in the formula: an unknown name counts as 0. Field IDs are case-sensitive.
• An output that uses an output listed below it is one change behind: Outputs are calculated top to bottom, so it reads that output’s previous value. Move the output it depends on higher in the list.
• The dropdown starts on the wrong option: The option whose value equals the Default Value starts selected; with no match, the first option starts selected and its value is used.
• Two calculators share values: Give each one its own URL Key.
• The share button does nothing: Copying needs a secure page (https). Framer sites are https; a local file preview may not be.
• The form doesn’t appear: Check Enable Form, the Form Trigger and that a form is connected to Form or an https address is in Form Embed URL. With Show on CTA Click, the form appears after the button is clicked.
• I can’t find Form Thank You Message: It appears in the panel once Form Embed URL is set; a connected Framer form uses its own success message.
• The phone layout appears on desktop: Breakpoints follow the calculator’s width. In a narrow column, lower the Tablet Breakpoint.
• Values look different after I edit the component: Each edit restarts the calculator with its default values, plus any values in the page address.

Known Limits

• Empty lists: Framer can’t require at least one input or output. With none, the panel is empty.
• Icons: Icons load from Framer’s icon sets once the page is open; their space is kept from the start.
• Canvas: On the canvas the calculator is a static preview with its starting values; it responds to input in Preview and on the published site.
• Copying links: Copying needs a secure (https) page, as browsers require for the clipboard.
• Number fields: Browsers show the number in a field with the visitor’s own decimal mark (0.18 or 0,18).

Demo Notes

• Demo 1 (Hiring Cost): Inter, zinc palette, 1200px, 50/50, one result column, tooltips, share button labelled Share Results.
• Demo 2 (Quick Savings): Poppins, blue, 520px, Stacked, one slider-driven result: seats × cost × 0.35 × 12. Tablet Breakpoint 480 for the half-width column.
• Demo 3 (Profit Margin): DM Sans, emerald, 860px, number fields, no share button, results with 0, 1 and 2 decimals.
• Demo 4 (Content ROI): Inter on #09090b, 860px, Stacked, four result columns, Glow hover, eight chained outputs.
• Demo 5 (Pricing): Inter, 700px, Stacked, two result columns, a plan dropdown with prices in its labels, two toggles left out of the shared link.
• Demo 6 (Energy): DM Sans, teal, 900px, three section titles in teal at 15px bold, two constants (ac_kw_per_1000 = 1.5, kwh_per_person = 150).