How to Create Multi-Column Form Layouts

The ability to easily align form fields into row and multiple column form layouts is one of the most requested feature in the form builders world. Who wants boring and vertically aligned fields all the time? Having in mind that, we’ve decided that easy, CSS-free row and column form layouts needs to be a core feature for Convert Forms. Let's how you can create multiple columns layouts in Joomla.

How to Make Multiple Column Form Layouts

With the release of Convert Forms 2.0 a new option called CSS Classes is available under field settings panel. This option enables you create advanced form layouts using a collection of predefined CSS Classes. To do this, you need to know exactly zero CSS.

Suppose we have a single column form just like in the screenshot below:

And we want our Email and Name fields to appear next to each other, and for each to take up half of the form width.

Let’s see the 2 available ways to make that happen:

• Add CSS Classes using the Layouts Panel
• Add CSS Classes Manually

Add CSS Classes using the Layouts Panel

The easiest way to structure your columns is by using the Layouts Panel.

Let’s see how to do this step by step.

Click on the Email field in the builder to open its field setting. From the Advanced Options section of the Field Options screen, select Show Layouts to see all available column options.

To to make the Email field take up half of the form width, we’ll select the option that shows two even-sized boxes.

By clicking on a column, the corresponding classes are automatically added to our CSS Classes field. The “cf-one-half” class tells the field to take up half of the available width.

Next, we just need to do this same process to put the Name field in the right column. Once you complete this step as well, your form will look like in the screenshot below:

Add CSS Classes Manually

If you would prefer not to use the Layout Panel, you can type in CSS classes manually instead. Here are all of the available CSS classes for layouts:

• cf-one-half
• cf-one-third
• cf-one-fourth
• cf-one-fifth
• cf-one-sixth
• cf-two-thirds
• cf-two-fourths
• cf-two-fifths
• cf-two-sixths
• cf-three-fourths
• cf-three-fifths
• cf-three-sixths
• cf-four-fifths
• cf-five-sixths

The image below shows three different common column layouts. The red text below each field CSS classes that were used from the list above.

How to split form fields into 2 columns

To split form fields into 2 columns automatically, follow the steps below:

1. Add columnRight to the CSS Class option to every field you would like to appear in the 2nd column
2. Place the following Javascript code into the Custom Code option of your form. Remember to replace formID variable with the ID of your form

// Set here the ID of the form
var formID = 1;

// Do not ebit below
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('#cf' + formID).forEach(form => {
        let leftWrapper = document.createElement('div');
        leftWrapper.classList.add('cf-one-half');

        let rightWrapper = document.createElement('div');
        rightWrapper.classList.add('cf-one-half');

        form.querySelector('.cf-fields').append(leftWrapper, rightWrapper);

        form.querySelectorAll('.cf-control-group').forEach(el => {
            if (el.classList.contains('columnRight')) {
                rightWrapper.appendChild(el);
            } else {
                leftWrapper.appendChild(el);
            }
        });
    })
})  

Make sure you wrap the above code with the script tag.

Additional Note for Layouts

In most cases, when using the column classes you should set the Field Size (also under Advanced Options) to Large. This allows the field to fill all available space in its column and keeps right and left spacing even against neighboring fields.

That’s it! You can now optimize your form space with multi-column layouts.