How to Create Multi-Column Layouts with the Repeatable Fieldset

It’s been a little over a year since we released the Repeatable Fieldset into the wild. Since then, we’ve received many questions about how one would create multi-column layouts using repeating fields. Today I will answer that question and show you how to create multi-column layouts for repeaters using our helper classes.

Are you ready? Let’s begin!

How to create a multi-column layout for the Repeatable Fieldset

Constructing a multi-column layout with repeaters is easy and only takes two steps. First, add the Repeatable Fieldset and any field you would like repeated to your form. After that, add helper classes to the Repeating Fieldset itself.  That’s it, easy peasy.

Step 1: Add the Repeatable Fieldset field to your WordPress form

As mentioned above, add the Repeatable Fieldset to your form. You can do this by clicking the blue/+ icon at the bottom right and then clicking on the Repeatable Fieldset. Next, add any field you would like to be included in the repeater.

Step 2: Add helper classes to the Repeatable Fieldset’s repeating fields

Open the Display dropdown. Look for the Custom Class Names section. In this section, you will see two fields. One is called CONTAINER, and the other is called ELEMENT. In the CONTAINER field, enter the custom classes to create your multi-column layout.

✨ FYI – If you are using Layout and Styles to style other fields, the Helper Classes will not work. As a workaround you can add the following CSS to the WordPress Customizer ( Appearance > Customize > Additional CSS ).

.nf-repeater-fieldset nf-field{
float:left;
padding-right:15px;
width:33%;
}


The core version of Ninja Forms includes custom helper classes to assist you in creating column layouts. The good news is these helper classes can be used to arrange the repeating fields side-by-side. Offering more control to display the repeating fields horizontally instead of vertically.

• first –  add to the first field in a group of fields to create a row.
• one-half ( most popular )
• one-third
• two-thirds
• one-fourth
• two-fourths
• three-fourths
• one-sixth
• two-sixths
• three-sixths
• four-sixths
• five-sixths

To begin, start by making a row by adding the ” first ” class into the CONTAINER field of the Custom Class Names. To set the width of the row, add a second class, and that’s it.

How to create a two-column layout

First, add the helper class of “first” to the CONTAINER field of the first repeating field in your row. Second, add another class called “one-half” to that same CONTAINER field. Third, add the class “one-half” to any remaining fields. After that wash and repeat to ensure all fields include the “one-half” width class.

After that, if you do it right, your repeating fields will display in two columns side-by-side.

How to create a three-column layout

First, add the helper class of “first” to the CONTAINER field of the first repeating field in your row. Second, add another class called “one-third” to that same CONTAINER field. Third, add the class “one-third” to any other remaining fields. After that, wash and repeat to ensure all fields include the “one-third” width class.

If you do it right, your repeating fields will display in three columns side-by-side.

Reap the benefits of a multi-column layout with the Repeatable Fieldset today!

Now that you know how to use the Ninja Form helper classes to turn your Repeatable Fieldset into a horizontal work of art, it’s your turn.

Add repeaters to your WordPress form for free with the core Ninja Forms plugin. Unlike our competitors, our core plugin includes features like unlimited forms, unlimited form submissions, submission exports, custom email notifications, spam protection, shareable links, and more. All for free!