Calculator: ROI and pricing (Omni Pro)

Set up the content

1. Inputs: For each input a short Key (letters, digits, underscores, for example hours), the Input type and a label:

• Slider: minimum, maximum, step and start value. Minus/plus steppers add two buttons beside the slider, Show minimum and maximum prints the range under it.
• Number box: the visitor types the number. Same limits and steppers as the slider.
• Dropdown: one option per line as Label = value, for example Growth = 49. The formulas see the value.
• Check box: the Value counts when the box is ticked and is 0 when it is not, so onboarding in a formula adds the one-off fee only when the visitor wants it. Text before and after the value and a help text are available for every type.

1. Results: A label, the Formula and how to print it (text before and after, decimals), a note, an icon, the Size (small card, large card or a row with the label left and the value right) and whether the card is highlighted. Give a result a Key to reuse it in other results and to send it as its own form field.
2. Send the results: see below.
3. Buttons and a Footnote under the calculator.

Formulas

Formulas use the input keys and the keys of other results (in any order):

• Arithmetic: hours rate 12, (a + b) / 2, visits % 100
• Comparisons and conditions: domains > 3 ? 499 : 249, saved > 0 ? 1 : 0, a >= b && b != 0 ? a / b : 0
• Functions: min(a, b), max(a, b), round(x), floor(x), ceil(x), abs(x)

Division by zero prints 0. A formula with a mistake prints «–» and a note in the browser console.

Send the results

Turn on Send the results and pick a HubSpot form. The theme fills the form for the visitor, they only add their email address and submit.

How it works

1. Every time a result changes, the module writes a plain-text summary into the form field named in Summary field (default omni_calc_summary). One line per input and per result, for example:

`` Websites: 3 Editors: 5 Plan: Growth Guided onboarding: yes Your price per month: $147 First year in total: $2,664 Page: https://www.example.com/pricing ``

1. Every input and every result with a key is also written into a field named Field prefix + key (default omni_calc_ → omni_calc_sites, omni_calc_monthly), as a number, so you can build lists and workflows on single values («price per month above 500»).
2. The values are written again when the form has loaded and just before it is submitted, so the contact record always carries the numbers the visitor saw when they clicked the button.
3. The form's own confirmation (inline message or redirect) shows after the submit, as on every other Omni form.

What to prepare in HubSpot

• Create a contact property for the summary: a multi-line text property, internal name omni_calc_summary (or your own name, then type it into Summary field). For single values create a number property per key you want to keep, with the internal name omni_calc_<key>.
• Create a form with the visitor's email plus these properties as hidden fields. Only fields that exist in the form are filled; a key without a matching field is simply skipped, so start with the summary field alone.
• Pick the form in the module. Choose whether the box sits under the results or under the whole calculator, and write the heading and the sentence above the form («Email me these results»).

Works with HubSpot's form embed (the form field), which is React-based: the module sets the values the way the form expects, so the submission carries them.

Choose the look

Recipes

• ROI calculator: sliders for the cost drivers, a large highlighted «What you keep each year», small cards for the parts, «Email me these results» under the results.
• Pricing calculator: a slider with steppers for sites, a number box for seats, a dropdown for the plan, check boxes for add-ons, one results panel with the price per month as a gradient highlight and the parts as rows, «Email me this quote» under the whole calculator.

Good to know

• Large cards span both result columns; put the headline number first as a large highlighted card.
• Rows always take the full width of the results, in the grid as well as in the panel.
• The results need JavaScript. Until it runs the cards show «–».