How to Unlock Column Styling for List Fields

Ever wanted to pop a list field into your form and have the options run left-to-right rather than vertically? If so, you just landed in the right spot to learn how! Column styling for list fields has been a really popular request in our support channel, and it’s really not that hard to do. In fact, you don’t even have to leave the builder or own Layout & Styles!

Just as an FYI, we published a similar article a while back on how to organize your form fields into columns using the builder. The technique we’ll be using here is very similar, so if column styling for list fields makes you happy, be sure to check that out too! 🙂

Crafting Column Styling for List Fields

Just like placing form fields themselves into columns, there’s a quick and easy way to do this using nothing but your Ninja Forms builder. I’ll demonstrate using a Radio List. With that added to the form:

1) Locate the Custom Class Names Option of the List Field

Sounds complicated. It isn’t.

  1. Just open the field settings window of the Radio List field.
  2. Look down toward the bottom of the field settings window for Display. Expand Display.
  3. Custom Class Names is the very first option. Specifically, you’re looking for the Container field here.

column styling for list fields custom class names option

 

2) Choose Your Custom Class Name

While naming your custom class “Bob, Destroyer of Worlds” or something similar would be fun, these names have to be very specific to get the job done. Here’s a few to get you started:

  • two-col-list
  • three-col-list
  • four-col-list

As you may have guessed, the name you want to use depends on how many columns you want. two-col-list if you want two columns, three-col-list if you want three, etc. These aren’t the only options available. You could hypothetically have a twenty-col-list. It also probably wouldn’t fit very nicely on your page.

3) Place Your Custom Class Name in the List Field

Here I’ve selected three-col-list for the default Radio field with three list options. Just make sure you’re putting this in the Container field 🙂

column styling list fields class name entry

Here’s what our Radio List field looks like now:

column styling list fields working demo

Pretty painless and easy, right?

A Word About Compatibility

Different plugins and themes may modify your form’s styling. This is not only something we see quite frequently, it’s something we count on from a theme. Ninja Forms is designed to defer to the styling put in place by your theme. You’ve spent a lot of time and effort tracking down the perfect design for your website, and we want your forms to reflect your chosen aesthetic.

That’s fantastic when a theme’s CSS is well written. But it can cause headaches when styling rules have been written overly broad or just poorly in general. All this to say:

If this doesn’t work for you, there is CSS being implemented from another source, probably your theme, which is preventing this functionality from working properly. What can you do about it? Sadly that will require custom CSS or a support request to the owner of the offending plugin/theme.

What Else Would You Like to See?

We all spend a lot of time in the support channel listening to your requests and growing pains with Ninja Forms. We’d love to hear from you here, too! What other tricks can we show you how pull off with your WordPress forms? Let us know in the comments below!