The easiest way to style your forms, by far, is with our Layout and Styles extension. Layout and Styles makes it much easier to style forms if you don’t know CSS, and even easier if you do know some CSS with our “Advanced CSS” feature. You can check out the Layout & Styles documentation here.
If you need pseudo classes, or just want to style them on your own, this document will walk you through the class/ID naming conventions to help you target the form elements as effectively as possible.
We also have a beginner’s guide to styling your forms on our blog!
The General HTML Markup of a Ninja Forms Field
Ninja Forms offers the most versatile field markup and class names possible so you can be as general or as specific as you like as you style your forms with CSS. Let’s take a look at the general HTML markup and then explain some of the finer details.
As you can see from the example above, we have a container div that is used as the main box surrounding everything that relates to a fields output. Some of these things are programatic and should be ignored. Like the nf-section html tag. Ninja Forms also adds some other divs for the purpose of containing content for before the field, after the field, and the actual field itself. These are given pretty obvious class names (nf-before-field, nf-after-field, nf-field).
Now let’s take a look at how to style each element of a field from the most general way to the most specific way.
Important Factors to Consider
- When applying styles to the most general rule, these are added to everything Ninja Forms outputs. This includes HTML fields, hr tags, and everything else. You probably don’t want 100% width applied to a checkbox or 100px height added to an hr tag. So make sure you only add rules that you want on absolutely everything when using the most general forms.
- Opinionated styles can be altered in this way as well, but keep in mind that some fields have more specific rules like dropdowns, radios, and checkboxes. Styling these items may require a different syntax because of the nature of the field.