Multi-column forms when using a Bootstrap 2.3.2 template

By default, Joomla 3 is based on Bootstrap 2.3.2 UI framework. The Joomla 3 standard template - Protostar - is also a Bootstrap 2.3.2 template. With Visforms it is possible to create multi-column forms when using a template built with the UK framework Bootstrap 2.3.2. On Joomla 3 this feature is included in the free Visforms version. If the template you use on your website is based on another UI framework or you run a Joomla 4 website, then you need a Visforms subscription to create multi-column forms. The more modern UI frameworks Bootstrap 4, Bootstrap 5 and UIkit 2 and 3 then offer much more extensive options for individual multi-column design. If you are looking for an instruction on how to create a mulit column form for a template based on one of these UI-Frameworks, then please check out the UI Framework specific articles in the Subscription Documentation

It is possible to create multi column forms with Visforms. This is a hightly sought after, powerful feature that suits Visforms well, and allows you to create responsive forms. Our major aim during the development of this feature has been to:

• Keep the creation of a basic two column form as easy and simple as everything else in Visform
• To provide the possibility to create flexible, highly individual multi column forms for those who are willing to spend some effort on the configuration
• Not to add lots of new options in forms and fields

Requirements

The multi-column form layout is based on the Bootstrap 2.3.2 grid. This means you can only use this layout if your website has a template that implements the Bootstrap 2.3.2 grid, such as the Joomla! 3 Default Template "Protostar". If you are not sure whether your template is a bootstrap template and if so, which bootstrap grid is supported, then please ask your template manufacturer!

Basics

The Bootstrap grid uses the class attributes "row" or "row-fluid" and the class attributes "span1", "span2", "span3" ... "span12", to create row which are divided in 1-12 columns

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 positioned 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

If you want to use the multi column layout in order to design individual multi column forms you should be familiar with using the bootstrap grid system or willing to learn how to use it.

If you want to use the multi column layout in order to create a simple two columns form it is sufficient to read this article completely.

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 into multi column forms.

Checkboxes, selects, file uploads and textareas can usually 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.

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, whether a multi column layout works with your form and what the best settings are.

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".

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 take 1/3 of the container width and the control 2/3. If you have disabled the display of the field label, the control will take the full container width.

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 new option "width" on the "Advanced" tabe. Choose a value between 1 and 12. This is the amount of units reserved for this field's container in the row. As a row consist of 12 units 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 completly filled with field containers and you may have empty space at the right of the row.

Change field label and field control width

You can set the field label width and the field control width for each field individually. You have to use the field options "CSS class for label" and "CSS class for field" on the "Advanced" tab in the field edit view. Add " spanx" to this options, where x is a digit between 1 and 12. Don't forget the blank in front of the string! (These are the span class attributes used by the Bootstrap grid.)

If you set a spanx class for the label and the control the two numeric values of these attributs should add up to 12. You could use numbers, that do not add up to 12 but as a result it could happen, that the label and the control do not fit properly into the field container (resulting in line breaks or empty space).

Visform will try to mend invalid or missing class attributes. Invalid class attributes (like " span13) will result in the use of the default values (" span4" for the label, " span8" for the control). Missing class attributes will be added in a way, that label and control will fit into the field container.

Dealing with special field types

Date

Due to the calender icon it is difficult to fit a date field properly into a multi column layout. One way to deal with the problem is, to set the field container width to 12, so that the date field occupies an entire row. The date field label will then always be displayed above the control. Displaying two date fields in one row works well, too. (Set date field width to 6 for both date fields.)

Radios and checkbox groups

Never set "span" class attributes in "CSS class for label" and "CSS class for field" for radios and checkbox groups as this will result in flawed layout. If you set the field option "Display" to "inline" you could set the field "width" option to 12. This will make sure that the radio or checkbox can fill a full row by itself and thus may fit. If you set the "Display" option to "as list" you may place two or even more radio button or checkbox group fields in one row, especially it they have identical numbers of options. (Set "Width" option to 6 for 2 fields to 4 for 3 fields).

Checkbox

Checkboxes fit well into multi column layouts. Only set the "Width" option for checkboxes but never set a "span" class attribute!

Textarea

Textareas fit well into a multi column layout. There are different sensible settings: "Width": 12, the textarea occupies the full width of the row. "CSS class for label": " span12", positions the label above the control. "CSS class for field": " span12", full width for control.

If you have two or more textareas you could position them as two (or more) columns in one row as well (adapt "Width" option).

File Upload

Fields of type file upload can be handled just like fields of type text, using all three options for proper positioning.

Field separator

Positioning field separator, even with custom text, is possible, but may require fine tuning. Always set the "CSS class for field" option to " span12".

Buttons

Buttons are not part of the multi column form layout and multi column layout options are not applied to buttons (submit, reset, image submit). All buttons are displayed in one row, anyway.

Demo Article list