TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Input Values
Results
Module Options
Page Speed Impact
Medium - The calculator module itself will have a slight impact on your page speed.
Exceptions - Additional impact if images and large calculations will add a further page load.
Take a look at our performance guide to get your website running its best!
Overview and video guide
About the calculator module
The calculator module is an advanced module which allows you to create simple to use calculators to show details to your visitors based on inputs into the module. These can capture contact information to HubSpot forms and perform calculation functions.
You can find video guides on how to use the calculator module and how to master formulas for this module here.
Setup Instructions
How to Set Up the POWER Hero Module
Content → PWR Sec Calculator
The PWR hero module is designed to take in user inputs and translate them to variables to be used within your calculators. This can display your calculations to the visitor in real time and even display a form pop-up to capture lead information before your results.
Module Options
These settings are available for the POWER sec calculator module.
Building the Calculator Module
Intro to Title
A smaller intro text displayed before your title.
Title
This will set the main title of your module.
Title - Header Type
This will set the HTML markup of your header (h1, h2, h3 etc) and by default it will style your header based on your theme settings. You can set the header here with a different styling through your module's style settings if you wish.
Description
A brief description of the information you will place within your logo content sections.
Inputs Title
A title to be displayed before the visitor inputs on your module.
Inputs title - Header Type
The header type for your inputs title (h1, h2 etc.). This is the HTML title type, the styling of this can be changed within your styles tab.
Input Values
See the input values section.
Results Title
A title to be displayed before the results on your module.
Results title - Header Type
The header type for your results title (h1, h2 etc.). This is the HTML title type, the styling of this can be changed within your styles tab.
Results
See the results section.
Results description
A brief description to be displayed before your results.
Conversion → Sync Summary To Form Field
Enter the name of a form field you which to sync the conversion summary to. The results of your calculator can be synced to a form on your page. If you need help finding your form field see the guide here.
Conversion → Sync Values to External Form
Choose to sync values to another HubSpot form on your page, this can be used when the popup form within the calculator module is not being used and can sync your results to another HubSpot form on the same page. To sync this you will need the HubSpot form ID of the form on your page. For information on how to capture this see this guide.
Conversion → Use Module Form Popup
Choose a HubSpot form to popup within your calculator module which will display over the results on your module. Once enabled you can choose any of your HubSpot forms to display in this popup.
Conversion → Store Form Submissions State
This stores a local value on the visitors browser upon a successful submission. This allows the values to stay populated on the form if the visitor was to return to your website at a later time.
Conversion → Button(s)
Choose a button or CTA to add to your results popup.
Layout → Section intro → Intro Width
Choice between Narrow intro width or use the default width.
Layout → Section intro → Alignment Horizontal
Choose the alignment for your intro width on desktop, tablet and mobile screen sizes.
Layout → Inputs → Input Labels use counter
Add a counter to your input labels to show the number of input it is. Question 1 will show "1.", question 2 will show "2." etc.
Layout → Inputs → Padding
Choose top and bottom padding for mobile, desktop and tablet along with left and right padding for mobile, desktop and tablet screen sizes.
Layout → Inputs → Alignment Horizontal
Choose the alignment for your intro width on desktop, tablet and mobile screen sizes.
Layout → Results → Box Sticky
Stick your results box to the header when scrolled past. If your results section is shorter than you input section, this will stick the results box to the header if the user scrolls down their inputs to always keep the results visible.
Layout → Results → Description and Buttons inside Box
Keep the description and buttons for your results inside a dedicated styled box.
Layout → Results → Vertical Line Separator
Add a line separator to separate your primary result from the breakdown.
Layout → Results → Box Width
Set the width for your results box
Layout → Results → Box Minimum Height
Set a minimum height for your results box to ensure your content can always be displayed correctly.
Layout → Results → Padding
Set a top and bottom and a right and left padding for desktop, mobile and tablet screens.
Layout → Results → Alignment Horizontal
Add a line separator to separate your primary result from the breakdown.
Layout → Form Popup → Padding
Set a top and bottom and a right and left padding for desktop, mobile and tablet screens.
Layout → Horizontal Gap between Inputs and Results
Set a horizontal spacing gap between your inputs and results, this is measured in percentages of your page width.
Layout → Stack Breakpoint
Change the width of the breakpoint for the layout of your module layout to change. This will automatically change the layout of the module to suit mobile devices below this width.
Layout → Boxed Section
This will set your module to have a boxed section layout, offering some additional options in the positioning of your module. For more information on boxed sections see our boxed sections article.
Layout → Padding Top/Bottom
Set a top and bottom padding for your module.
Layout → Margin Top/Bottom
Set a top and bottom margin for your module.
Layout → Show More
Enable this feature to hide specific content after a certain size behind a "show more" button to have a smaller amount of content on initial display for a smaller visible content size on initial view.
Setting up your input values
Here you can configure the input values for your calculator. These input values can capture inputs to be used in your results calculations.
Input Values → Input Type
Choose the type of input for your calculator. Choose between a text input field, a slider, a dropdown, radio buttons or a checkbox.
Input Values → Title
Set the title for your input.
Input Values → Title Icon
Choose to have an icon beside your title. These can be selected from a preset fontawesome free library, your own fontawesome pro library or an image upload.
Input Values → Description
Add a description to your input to help visitors input their values.
Input Values → Description Position
Choose to position your description on the top or bottom of your input.
Input Values → Default Value
Set a default value for your input to be displayed on initial page load.
Input Values → Allowed Decimal Places
Set a max amount of decimal places allowed for your input.
Input Values → Allow Negative Values
Allow visitors to input negative number values into your inputs.
Input Values → ID
Set the variable ID for your input. This variable can be called within your results to use the input values when calculating your results.
Input Values → Input Type
Choose the type of input for your calculator. Choose between a text input field, a slider, a dropdown, radio buttons or a checkbox.
Input Values → Value Prefix
Add a prefix to your input values. This is a measurement added prior to the value, for example $ would be a prefix to use to denote the value is within dollars.
Input Values → Value Suffix
Add a suffix to your input values. This is a measurement added after your input values, for example "km" would be used to denote kilometers.
Input Values → Tooltip
Show a tooltip on your input values. This is an icon a visitor can hover over to display a box showing helpful information on the input.
Input Values → Sync to Form Field
Sync this input to a HubSpot form field on your page. You will need the form field names to sync, find out how to find your form field name here.
Setting up your results
Results → Type of Result
Choose to have this result as your main result or an intermediate result. The main result would normally be a calculation of all values with an intermediate result showing a value for a specific input or element.
Results → Title
Set the title for your result.
Results → Title Icon
Choose to have an icon beside your title. These can be selected from a preset fontawesome free library, your own fontawesome pro library or an image upload.
Results → Description
A description outlining this result on your calculator.
Results → Description Position
Choose to show you description above or below your result.
Results → Calculation
Create the calculation used for your result. This can utilise the IDs set out within your inputs. These use mathematical expressions, a guide to what expressions can be used are available here.
Results → Allow Decimal Places
Set a max amount of decimal places allowed for your input.
Results → Value Prefix
Add a prefix to your result. This is a measurement added prior to the value, for example $ would be a prefix to use to denote the value is within dollars.
Results → Value Suffix
Add a suffix to your result. This is a measurement added after your input values, for example "km" would be used to denote kilometers.
Results → Tooltip
Show a tooltip on your result. This is an icon a visitor can hover over to display a box showing helpful information on the result.
Results → Blue Result Before Form Submission
Choose to hide your result behind a blur until the user submits your popup form.
Results → Sync To Form Field
Sync this input to a HubSpot form field on your page. You will need the form field names to sync, find out how to find your form field name here.
Results → Style
Here you can set custom styles for the title and the value of this specific result.
Results → Wrapper Box
Set a specific box to contain this specific result. Each wrapper box can be styled individually with their own layouts and backgrounds.
Results → Wrapper Box Style
Configure the style and layout of your wrapper box.
Styling your calculator module
Style → Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Overwrite Global Form Styles
Overwrite the form styles set within your theme settings. PLEASE NOTE: This will only affect legacy HubSpot forms. Any forms built within the new forms editor will inherit the form's inline styles and cannot be overwritten.
Style → Overwrite Global Form Styles → Intro Title Style - Text
Overwrite the default title styles set within your theme settings. Default will use your theme styles. Here you can choose to overwrite this with a color or a gradient.
Style → Overwrite Global Form Styles → Intro Title Style - Background
Choose to have no background, a color or a gradient as a background for your title text.
Style → Title Size
Set the style from your theme settings that your title will inherit. This will not affect the HTML markup of your title so will not affect any SEO on your title. This will just cause the title to inherit the styles for this title set out within your theme settings.
Style → Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Inputs → Title Size
Set the style from your theme settings that your title will inherit. This will not affect the HTML markup of your title so will not affect any SEO on your title. This will just cause the title to inherit the styles for this title set out within your theme settings.
Style → Inputs → Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Inputs → Customer Slider Color
Set a custom color for your input sliders.
Style → Inputs → Box Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Inputs → Box Border
If a box layout if selected choose the border for your boxed layout.
Style → Inputs → Overwrite Border Radius
Overwrite the border radius (curved corners) set within your theme settings > Box Border Radius.
Style → Inputs → Box Shadow
Set a box shadow for your inputs.
Style → Inputs → Background
Choose to have a transparent background, a background image, gradient, solid colour or a glasmorphism/blur background for your inputs.
Style → Results → Title Size
Set the style from your theme settings that your title will inherit. This will not affect the HTML markup of your title so will not affect any SEO on your title. This will just cause the title to inherit the styles for this title set out within your theme settings.
Style → Results → Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Results → Box Colour Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Results → Box Border
If a box layout if selected choose the border for your boxed layout.
Style → Results → Overwrite Border Radius
Overwrite the border radius (curved corners) set within your theme settings > Box Border Radius.
Style → Results → Background
Choose to have a transparent background, a background image, gradient, solid colour or a glasmorphism/blur background for your inputs.
Style → Results → Title Size
Choose to have no background, a color or a gradient as a background for your title text.
Style → Results → Title Size
Choose to have no background, a color or a gradient as a background for your title text.
Style → Results → Title Size
Choose to have no background, a color or a gradient as a background for your title text.
Style → Form Popup → Section Shadow
Choose to have no background, a color or a gradient as a background for your title text.
Style → Form Popup → Background
Choose to have a transparent background, a background image, gradient, solid colour or a glasmorphism/blur background for your inputs.
Style → Form Popup → Section Shadow
Choose to have no background, a color or a gradient as a background for your title text.
Style → Form Popup → Section Shadow
Choose to have no background, a color or a gradient as a background for your title text.
Style → Form Popup → Section Shadow
Choose to have no background, a color or a gradient as a background for your title text.
Style → Shape Divider
Set a specific shape to be used between the divide of this module and your next one.
Animation
Control the animations of your module, for more information see the website animation article.
Visbility
Choose to hide your module on specific screen sizes. For more information see common module information.
Accessibility
Set aria labels for elements within your module to ensure compatibility with screen readers if required.
Anchor Link ID/Custom Class
Set a specific anchor link for this module or a custom class to target this module within your child.css stylessheet.