Bootstrap 2
Note: These features are part of the Visforms Subscription and are not included in the free Visforms version.
Optimized to 3 requirements
With Visforms it is possible to create multi-column forms if you use a template built with the UI framework Bootstrap 2.3.2.
The implementation of this UI framework in Visforms is optimized with regard to the following 3 requirements:
- It should be possible to create a 2-column form layout with very little effort.
- For those who are willing to put in more effort, it should be possible to configure the multi-column layout very individually.
- The control should take place directly in the configuration of forms and fields with as few parameters as possible.
Requirements
The multi-column form layout is based on the Bootstrap 2.3.2 grid. So you can only use this layout if your website has a template that implements the Bootstrap 2.3.2 grid.
Caution: If you are unsure whether your template is a bootstrap template and if so, which bootstrap grid is supported, please check with your template vendor.
Basics
The Bootstrap 2.3.2 grid uses the class attributes row or row-fluid and the class attributes span1, span2, span3 … span12< /span> to divide a row into 1 - 12 columns.
Layout is generated in rows
This means that the layout is ultimately created row by row. Each row is then divided into columns, each containing a form field consisting of a label and a control. The columns are containers that contain the label and the control.
In a two-column layout, the container for the 1st form field is displayed in the 1st row in the left column, the container for the 2nd form field is displayed in the 1st row in the right column. The container for the 3rd form field is in the second line on the left, and the container for the 4th field in the second line on the right - and so on. For each row you have the option of specifying how many columns it should contain. Overall, this results in an extremely flexible system.
Field container in the grid system
You can use the multi-column Bootstrap 2 layout to configure the design of multi-column forms very individually. In this case, however, you should really be familiar with the Bootstrap Grid System. Learn more in: Bootstrap Grid System.
If you use the Bootstrap 2 layout to create a simple two-column form, things get easier. In this case, it is sufficient if you read this article carefully.
For which forms is the multi-column layout suitable?
The multi-column Bootstrap 3 layout is well suited for creating forms that primarily use text input fields (field types: text, email, password, URL, number).
The design looks particularly good if you set the “Label options” to “Hide label” for these fields. The label is then displayed as a placeholder in the input and disappears when the user starts typing.
Checkboxes, listboxes, file uploads and text areas also fit quite well into the multi-column layout.
With fields of the radio button or checkbox group type, the multi-column layout quickly reaches its limits. However, these can usually be used with a little skill.
The more uniform the form, the better it looks in the multi-column layout.
For which forms is the multi-column layout not suitable?
Multi-column layout does not work with forms containing “Conditional Fields”. Because showing and hiding the conditional fields completely messes up the layout. Creating multi-column forms with conditional fields requires finesse and a lot individual fine adjustment.
Having both labeled and unlabeled fields in a row at the same time results in an inconsistent layout.
Texts in the form (user-defined texts of the fields) quickly lead to the multi-column layout no longer looking good. Likewise, radio button and checkbox groups with many options are difficult to fit.
The multi-column layout is also not very suitable for displaying forms in modules. This is because the modules are usually too narrow.
Note: Please note that not every form can be displayed in multiple columns. The multi-column layout can simply "break" with poor configuration and/or inappropriate fields. You just have to try it to see if it works well for a specific form.
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 2”.
A list box for selecting the “sublayout” then becomes visible. Set this to “Individual”.
This setting alone means that two form fields are now displayed per line. The two columns have the same width. Within the container that contains a field, the label is set to a width of 1/3, the control to a width of 2/3. If you have deactivated the display of the field label, the control takes up the entire width.
Determine the number of fields per column
For each field, you can determine how much space is allocated to it within a row.
Assign units per row to a field
To do this, go to the “Advanced” tab in the field configuration. Here you will find a parameter “Width”. Select a value between 1 and 12 from the list box. This value corresponds to the number of units that will be assigned to this field in its row. Since each row consists of 12 units, this means that a value of 4 takes up 1/3 of the row, a value of 6 takes up half the row, and a value of 12 takes up the entire row.
Line not always completely filled
Visforms automatically calculates for each field whether it still fits into the current line based on its selected width. If it no longer fits, a new line is automatically started. It is therefore also possible that a line is not completely filled due to the selected field widths.
Here’s an example:
Field1 has width 5, field2 has width 5, field3 has width 3.
Field 3 is thus written on a new line (13 = 5 + 5 + 3 > 12).
Therefore, only 10 of 12 units are filled in the 1st line.
Change the width of label and control
For each field, you can control how much space is allocated to the label and how much space is allocated to the control within the field container. This is done via the field parameters “CSS class for description” and “CSS class of the field” under the “Advanced” tab in the field configuration.
Add the value “spanx” as the CSS class name in these parameters, replacing “x” with a number between 1 and 12.
Add numbers to 12
Suppose the form displays a label and control for the field. Then the number values should add up to 12 appended to the “span” for label and control.
In principle, you can also use any other value.
However, this may result in the label and control not completely filling out the field container.
This can happen when the sum is less than 12.
It is also possible that there is a line break between label and control.
This can happen when the total is greater than 12.
Line break between label and control
With some field types, such as the text area, it can make sense to force a line break between label and control. This can be useful because the field then fits better overall into the multi-column layout. See also below: Textarea.
Missing entries will be meaningfully supplemented
Visform tries as far as possible to add missing entries in a meaningful way and to correct incorrect entries in the CSS classes in a meaningful way. Incorrect entries usually lead to a reset to the default values. The label has span4 and the control has span8 as default value. Missing entries are added in such a way that the label and control together take up the entire space.
Incorrect values are
- span0,
- span13 or
- more than one spanx for label or control.
Special field types
Date
Due to the calendar icon, placing date fields in a multi-column layout is difficult. It is best to just set the “Width” option for the width of the field container and not give any span values. Preferably set the width to 12 so that the date field stands alone on its own line in the form. The label is then always displayed above the control.
Placing two date fields in one line also looks good in the layout. The “Width” option must then be set to 6 for each of the two date fields.
Radios and checkbox groups
Setting span values for the options “CSS class for label” and “CSS class for field” leads to incorrect display of radio buttons and checkbox groups. If you set the “Display” option to “Inline” for radio buttons or checkbox groups, it makes sense to set the “Width” of the field container to 12. This gives the buttons and checkboxes enough space.
If you set the “Display” option to “As a list”, you may also be able to place two or more radio button or checkbox fields in one line. To do this, set the “Width” option of all fields to the appropriate value: width 6 for 2 fields, width 4 for 3 fields in one line.
check box
Checkboxes can easily be used in multi-column layouts. However, only the “Width” option should be set here and no span values should be assigned.
text area
Text areas fit well into the multi-column layout.
The following settings are useful:
- “Width”: 12
As a result, the textarea field takes up the entire width of the form. - “CSS class for label”: “span12”
This positions the label over the input field. - “CSS class of field”: “span12”
As a result, the input field takes up the entire width of the field container.
If you have two or more text area fields in a row in your form, you can also display them in one line using other values for the “Width” option.
File Upload
Fields of the “File Upload” type, like fields of the Text type, can be easily configured using all three options.
Field separator
Field separators, even with custom text, can also be fitted into a multi-column layout with a little finesse. Always set the “CSS class of the field” to “span12”.
buttons
The settings for multi-column layout are not evaluated for the button field types (Submit, Reset, Image Submit). All buttons are placed next to each other in a row in all layouts anyway.