Create a multi column form with Bootstrap 3 layout
This feature is part of the Visforms Subscription and not available in the free Visforms version..
The multi-column form layout is based on the Bootstrap 3 grid. This means you can only use this layout if your website has a template that implements the Bootstrap 3 grid. For information about multi-column forms on websites using templates built on newer versions of the Bootstrap UI framework or on the UI framework UIkit, please check out the UI Framework specific articles in the Subscription Documentation.
Basics
The Bootstrap 3 grid system structures your website in rows and in 1 - 12 columns per row.
That is why the layout is actually created in rows. The rows are filled from left to right with columns which are the field containers. Each field container is a wrapper for the field label, the control, error messages...
If you create a 2 column layout the container for the first field is position in the left column of the first row, the container for the second field in the right column of the first row. The container for the third field is position in the left column of the second row and the container for the forth field in the right column of the second row. As you can set the width for each field container individually, this design enables you to create very flexible multi column forms
Field container and grid system
Container for 1. field: width 6
Container for 2. field: width 6
Container for 3. field: width 4
Container for 4. field: width 4
Container for 5. field: width 4
If you want to use the multi column layout to design individual multi column forms you should be familiar with using the bootstrap 3 grid system or willing to learn how to use it. The multi column layout as implemented by Visforms is responsive and uses the "col-sm-" classes. Thus, on small devices, the form fields are stacked and not inline.
Which forms work well with the multi column layout?
The multi column layout works well with forms that are mostly composed of text inputs (field typs: text, email, passwort, URL, number).
Especially if you set the "label options" to "hide label" so that the label is displayed as placeholder inside the input, these field types fit well in multi column forms.
Checkboxes, selects, file uploads and textareas can usaully be persuaded to fit into multi column forms as well.
But it's difficult and sometimes impossible to fit radios and checkbox groups into multi column layouts.
Generally one can say that the more uniform the fields, the better the look of the multi column form.
Which forms don't work well with a multi column layout?
The multi column layout does not work with forms that contain conditional fields. This is quiet obvious, as the conditional fields change the field order fundamentally when they are displayed or hidden.
A mix of fields with label and fields without label in one row and texts inside the form (custom texts of the fields) mostly cause the multi column layout to look confusing.
Radios and checkbox groups are difficult to incorporate in multi column forms.
Multi column form usually don't lend themself for use in modules, because there simply is to little room for more than one field per row.
Please note that there are forms which cannot be pushed into a multi column layout and that the multi column layout will just "break" if the fields are not suited or the configuration is bad. So you have to test carefully, if a multi column layout works with your form and what are the best settings.
A simple two column form
Go to the "Advanced" tab in the form configuration. Under the "Layout" subheading you will find the "UI Framework" option. Set this to "Bootstrap 3". A list box for selecting the "sublayout" then becomes visible. Set this to "Individual".
With only this setting, Visforms will display two fields per row. (2 column layout). The width of the two columns is equal. Inside the container the field label will be displayed above the control. Label and control use the full width of the enclosing container.
Individual Configuration
Amount of columns per row
You can set the field container width individually for each field and thus determine how much space the container takes. (And thus how many fields are displayed per row).
Open the field edit view in your administration. There is a option "width" on the "Advanced" tab. Choose a value between 1 and 12. This is the the amount of units reservered in the row for this field container. As a row consist of 12 unit a field container with a "width" value of 4 will use 1/3 of the space in a row. A value of 6 equals 1/2 of the row, a value of 12 the full row width.
Visforms automatically calculates, if a field container still fits into an existing row or not. If not, a new row is created. This means that, if you have choosen values that do not add up to 12, it can happen that a row is not completely filled with field containers and you may have empty space at the right side of the row.
Required Fields
Required fields are often marked with an asterisk in the form. Using an asterisk to mark required fields does not work to well with multi column layouts in Bootstrap 3 (This is a restriction of Bootstrap not of Visforms). But there is always the possibility to hide the required asterisk in the form (a form configuration setting, which will of course not affect the validation).
The required asterisk is displayed on the right side of the field label. If you hide the field label, the required asterisks is displayed at the right site of the control and above the control. It takes as many space as the label would take.
The buttons
All buttons are always displayed side by side in a new row under the form fields.