Create a multi-page form with a fixed height

One of the most annoying things about browsing the web is that pages tend to jump while they are loading. The same can happen when you have dynamic content on your website, such as a calculator form. We've created the following instructions on how to create a Typeform-like form and avoid the pages jumping around.

First, see our product onboarding for a good example of a multi page form with a fixed height:



The process of creating a multi-page form is simple:

  1. add a container to your form,
  2. add or remove columns from the container according to your wishes
  3. add form item(s) to the container
  4. place the view break item under the container,
  5. optional hide the additional view break navigation
  6. add a custom class to each container, e.g., fixed-height-container
  7. with custom CSS set a min-height to the container
  8. REPEAT steps 1-6 for each page

Now your calculator form will have a constant height. Avoiding the annoying page jumps. Please see the instruction images below on how the process looks in our app.



  • Learn more about styling your form with CSS
  • Make sure that you set a min-height (CSS for the minimal height of an element) of your container based on the 'tallest' page.
  • Keep in mind that items with show-hide logic influence the height of your container
  • You can add !important to the min-height setting to override potential defaults

Visual instructions

See the visual instructions below on how to create a fixed-height multi-page calculator in our app. As an added bonus, we also included the finished calculator.

Step 1-3: Adding the container and the form elements

Adding the container and the form elements

Step 4-5: Adding additional views

Adding additional views

Step 6-7: Setting CSS to keep the form from changing height

Setting CSS to keep form from changing height

Related articles

Learn more about multi page form in one of the following articles