By default, Weavely generates form pages that are setup to be single column. In this tutorial we explain how you can use Figma's auto-layout settings to create multi-column forms.
We'll be using Weavely's default frame layout as an example and starting point for this tutorial. These frames are structured as shown in the image below.
In other words, a top-level frame containing an inner-level frame. Both are set to vertical auto-layout. To create multiple columns in this setup you'll need to create additional auto-layout frames and make sure that their parent frame are set to a horizontal layout. The image below showcases an example with two columns.
The Inner Frame has been set to a horizontal layout, and we've created two new frames (i.e. Column 1 and Column 2) inside of it which are both set to vertical layout. You can now start adding form elements to both columns and have them placed next to each other instead of underneath each other.
Multi-column forms typically don't render well on mobile devices. You can make sure that the columns of your form automatically adapt to various viewports (i.e. by being placed underneath each other on smaller viewports). Check out our tutorial on responsive design to learn how to do this.
