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. To avoid pages jumping around, and create a Typeform like form, we've created these instructions.

The process to create 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.

Notes

  • 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 below the visual instructions of 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 form from changing height

Setting CSS to keep form from changing height