Feature Highlight: Add Clarity to Forms Using Layouts and Groups

07/20/2017 Posted by Odalis

Sometimes you need to collect a lot of information on a form. Which means being clear about the information you need and making it easy to input that information. Otherwise, you could get stuck with incomplete information or users can take much longer to fill out your forms.

That’s where layouts and groups can help! For example, we have a multi-step application with a Licenses & Education section. We could make users scroll through all the questions like this:

Or we could use different layouts and groups to better organize the form and require less scrolling, like this:

Which would your users prefer?

Sometimes you need to collect a lot of information on a form. Which means being clear about the information you need and making it easy to input that information. Otherwise, you could get stuck with incomplete information or users can take much longer to fill out your forms.

That’s where layouts and groups can help! For example, we have a multi-step application with a Licenses & Education section. We could make users scroll through all the questions like this:

Or we could use different layouts and groups to better organize the form and require less scrolling, like this:

Which would your users prefer?

How to Change the Layout and Add Groups to Forms

Here’s how you can customize your forms’ layouts and groups.

1. In the Pages section of the builder, select the page with the form view you want to customize.

2. Click on the form view on that page to open the editor.

3. Go the Inputs section.

4. For a new layout, hover over the form inputs until you see the Layout option show at the top. Then use the dropdown to select the number of columns you want:

5. To add a new group, click the Add Group button at the bottom of the Inputs section:

6. Now you can organize your form into the columns and groups you’ve added.

In this example, we’ve split the Licenses and Education sections into their own groups. We also used 3 columns for the Licenses section and 2 columns for the Education section: