Creating a responsive form

Creating a free trial sign-up form or booking a demo form, make sure you're making it responsive so it works for your mobile users as well!

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

In order to create responsive Forms, it is best practice to use a combo of view layouts and wrap settings rather than column layouts. This article is going to guide you through creating a best-practice version of a form, which is responsive across all devices and screen sizes.

To begin with, you'll need to:

  1. Drag in your Empty form from the Palette > Components > Form

  2. Then you'll need to drag in your view layouts to build out your desired structure
    (ensuring parent view layouts are set to Wrap and child view layouts are set to Grow if possible/Stretch - more on this further down...)

  3. Drag and drop your form inputs into the correct view layouts

  4. Customize the copy of the form input label and placeholder

  5. Adjust settings in the Toolbar > Components

  6. Ensure you're happy with the margins/padding and you're ready to launch!

With the first two rows of questions, you'll want to have:

  • A parent view layout set to Row content direction and set to Wrap (see screenshot below):

    Screenshot highlighting wrap mode being enabled for the layout

  • Two child view layouts inside the parent view layout set to Grow if possible and the form inputs set to Stretch horizontal alignment:

    Screenshot showing the form fields set to stretch in Horizontal Content Alignment

  • With the final two rows of questions, you'll want one view layout with the form input added in and set the child view layout behavior to Grow if possible:

    Screenshot showing the field inputs to Grow if possible for the Child layout behvaior

With our final version of the form, you can see that in the desktop view, the content sits nicely next to each other. You get the same experience in tablet view, just slightly condensed, and then on mobile view, the content stacks neatly on top of each other:

ℹ️ Watch this 4-minute video guiding you through creating a responsive form.

Still need help? Reach out to our customer success team who will be happy to help ✨

Did this answer your question?