Styling Your Forms

Ninja Forms creates the absolute best looking forms for your website, but there are still times when your forms doesn’t look exactly as you expect or desire. This document will explain all the ways you can control exactly how your forms are presented.

How Ninja Forms Handles Styling

The thing to note here is that Ninja Forms adds very little styling of it’s own by default. Instead we inherit the styling of your theme, the design layer of your WordPress website. What this means is that if your theme adds basic default styling to all html form elements, Ninja Forms will look just as your theme author intended. If your theme does not style theme elements or makes strange opinionated decisions, Ninja Form will inherit those as well.

I did say we add very little styling, which means we do add some. The styling Ninja Forms adds is specifically meant to make sure the various label position options are honored, that error messages and other structural elements are displayed where intended, and that there is enough spacing between field elements. Beyond that, everything else is dependent on your theme.

Ninja Form Opinionated Styles

Ninja Forms does include some opinionated styles in case your theme hasn’t taken the care needed for html form elements. To turn them on/off, simply got to Forms > Settings > Advanced and select the appropriate option under the “Opinionated Styles” option. There is an option for both light and dark themes. Select “None” to disable this.

Add Field Type icons to the Front-end fields

With the opinionated styles turned on, you can add nf-icons to the Wrapper custom class names to apply the field type icons on the front-end fields.

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 Item Columns

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 

    Example using three-col-list:

Are you a CSS Wizard?

Learn more about the structure of Ninja Forms and how to apply your own custom CSS.

Easier Control with Layout & Styles

Want to place your fields into columns easily within the drag and drop builder? Add targeted style rules to specific elements of your form or individual fields? Get Layout & Styles today!

Already own Layout & Styles? Here is our documentation.