A common request we receive is the ability to split only particular sections of a form into columns. With a little help of CSS, you can customize your form to split only one section into columns.
Please note, working with CSS is tricky, so you'll want to be very diligent following the below instructions! If you need additional design help, we offer consultation with our third party Certified Formstack experts to bring your custom projects to life.
If you want to split the entire form into Columns, you can do so in a much easier way via the Edit Styles tab.
Instructions
1. Click the Edit Styles tab on your form builder. You should see a preview of your form appear on the left side and on the right side you should see the option to modify the form settings.
2. Click the Edit CSS link. Here you will see a box appear where you can add the code.
3. Right click + inspect the Section title of the section
4. Grab the "ffSectionid#" from the section you want to make into two columns
5. Paste the below CSS into your Edit CSS pane.
#ffSection1>.ff-item-row:not(:first-child) {
max-width:50%;
}
Note: Use max-width: 50% for two columns, and max-width: 33% for three columns.