styling and layout

Single-page (side-by-side) view

Updated 2026-06-22

Single-page view shows a calculator's inputs and results together on one page, with a calculate button instead of stepping visitors from an input screen to a separate results screen.

This layout is also called Side-by-side in the Theme dropdown. It is available only on calculator projects.

Turn it on

  1. Open your calculator and go to the Style tab in the left navigation.
  2. Toggle Side-by-side on (or pick Side-by-side in the Theme dropdown).

Once on, the visitor sees inputs on one side and results on the other. They press the calculate button to run the formula and update the results.

The calculate button

Visitors run the calculation with a button. You can rename it:

  1. In the input area's settings, open the Submit Form section.
  2. Edit the Submit Button field. It defaults to "Calculate".

The button stays disabled until every input has a value, so visitors can't submit a half-filled calculator.

Display Results toggle

The Submit Form section also has a Display Results switch. Turn it off if you want the calculator to collect inputs and run the formula without showing the result back to the visitor — useful when the calculation only feeds a lead notification rather than something the visitor should see.

What single-page view disables

Side-by-side intentionally simplifies styling, so a few controls that only apply to the two-screen layouts are hidden or overridden:

  • No Color Bar or Duotone. Single-page view forces the single accent Color control. Duotone's three-color set is not available. See Themes and layouts.
  • Secondary and Number fonts are hidden. In single-page view both fall back to the Primary Font, and the secondary-font text-transform toggle is hidden. See Fonts.
  • No results-page wallpaper. The wallpaper image control only appears on the two-screen layouts. See Corner radius, wallpaper, and workspace icon.
  • No separate result headline. The two-screen result headline is part of the stepped results screen; in single-page view results render inline.

On a narrow (mobile) preview the two columns stack, and the corner radius collapses to 0 so the calculator fills the frame edge to edge.