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

While off by default, 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 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.

Add Field Type icons to 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
List Item Columns

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.

How helpful was this documentation?

Gold Star Green Light Yellow Light Red Light
Very helpful Helpful Unclear/Unhelpful Not helpful at all