View Break Element

Insert this to break up your calculator into multiple pages.

Options

  • Button text: Insert a text to the button. (e.g. Next).
  • Show Button: You can Hide the View Break element when you add a “Button” element and have toggle-on the option “Navigate to next view after submission”.
  • Show/Hide Logic: Toggle this if you want to control if the button is shown or hidden under certain circumstances.
    • Visibility formula: If the result of the formula is TRUE or a number above 0. The question is visible. If the result is FALSE or 0, it’s hidden.
  • You can Hide/Show page numbers by clicking on the top right of your editor: “Adjust calculator settings”->”Show view break navigation”.

Scroll to Top issues

When the top of the calculator is out of view when navigating to a new view, the calculator automatically scrolls to the top of the calculator. When you have a website with a "fixed" header that falls on top the the content, it will not navigate to the top perfectly, because the header will "fall on top of the calculator". In order to fix this, you will need to add the following line of Custom CSS in the calculator builder and your website's CSS:

.cc {
 padding-top: 50px // Change the number of pixels to the height of your header
}
Now the calculator should scroll to the top properly. If there are still cases where scrolling to top doesn't work, make sure to check if scroll-behavior is set to auto.
ConvertCalculator Icon