Styling Your Forms

Helper Classes

Ninja Forms comes with a few helper classes that makes it pretty easy to add a some extra styles to your forms like columns, colors, icons, and more. Below are some instructions on a few of the most commonly requested.

Field Column Classes

There are occasions when you want your fields to appear side by side. Columns Classes allow you to do that, but are limited. You can place single fields side by side, but you will not be able to place multiple columns of fields side by side. This is a basic limitation of grid layouts in forms. For more robust column handling please check out our Layout & Styles add-on.

In the above screenshot you will see that we place these column helper classes in the Container option of your Fields Display > Custom Class Names section. Let’s take a look a the classes available for these columns.

  • first – This class should be used in the first field in a group of fields that will be displayed side by side.
  • one-half
  • one-third
  • two-thirds
  • one-fourth
  • two-fourths
  • three-fourths
  • one-sixth
  • two-sixths
  • three-sixths
  • four-sixths
  • five-sixths

 

 

List Items:

Just like field column classes, there may be a time when you want your checkbox or radio list items into neatly formatted columns.

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