With the Layout & Styles installed and activated, you will see options appear in the form builder to change the layout of the form.

You can create a column by grabbing the middle of a field and dragging it to the left or right side of your form.

Adding Styles

Whether you are editing the default form styles, default field styles, field style types, error styles, or the individual field styles, you are presented with many of the same options. Here you can find the basics of CSS that you might need to know in order to unleash the power of the Layout & Styles extension for Ninja Forms.

Note that depending on your site’s theme, you may need to disable Ninja Forms’ Opinionated Styles Setting in order for your styling changes to take effect. You can do this by navigating to your Settings page in the Ninja Forms section of the Dashboard and setting the “Opinionated Styles” box to “None.” Then save your settings. You can find an explanation of what this setting is and why it exists here: Styling Your Forms

Basic CSS Properties

While we may add more in the future, here we keep the basic elements that are available for you to style your form elements.

Background Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Border Width

This can accept from 1 to 4 values. Check the following examples:

• 1px – This is will add a 1 pixel border on all four sides.
• 1px 2px – This will add a 1 pixel border on the top and bottom and a 2 pixel border on the left and right sides
• 1px 2px 3px – This will add a 1 pixel border on the top, a 2px border on the left and right sides, and a 3 pixel border on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel border on the top, 2 pixel on the right, 3 pixel on the bottom, and 4 pixel on the left.

Border Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Text Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Height

Choose the height of you element with an integer followed by px or %. As in 500px or 100%.

Width

Choose the width of you element with an integer followed by px or %. As in 500px or 100%.

Advanced CSS Properties

These are items you may not need as often for the average user, but we include them in case you would like a little more control.

Float

This accepts either left, right, or none.

Font Size

This will most often be an integer followed by px or em. As in 16px or 1 em.

Margin

This can accept from 1 to 4 values. It adds whitespace on the outside of what you apply it to as long as it’s a block level element. Check the following examples:

• 1px – This is will add a 1 pixel margin on all four sides.
• 1px 2px – This will add a 1 pixel margin on the top and bottom and a 2 pixel margin on the left and right.
• 1px 2px 3px – This will add a 1 pixel margin on the top, a 2px margin on the left and right, and a 3 pixel margin on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel margin on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Padding

This can accept from 1 to 4 values. It adds whitespace on the inside of what you apply it to as long as it’s a block level element. Check the following examples:

• 1px – This is will add a 1 pixel padding on all four sides.
• 1px 2px – This will add a 1 pixel padding on the top and bottom and a 2 pixel padding on the left and right.
• 1px 2px 3px – This will add a 1 pixel padding on the top, a 2px padding on the left and right, and a 3 pixel padding on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel padding on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Advanced CSS

This option is for those who are well versed with CSS or don’t mind experimenting. Here you can write in any rules that you wish, just like you would if you were writing CSS within its own file. Example:

• border-radius: 5px;
• line-height: 18px;
• box-shadow: 2px 2px 2px 3px #333;

Remember to end each line with a semi-colon.

Layout & Styles Hierarchy

Ninja Forms Layout & Styles extension offers you the ability to create very complex form layouts and styles by default and on a per form basis but understanding the order in which the styles are applied is crucial to getting the most out of this extension.

To begin, when you install the Layout & Styles extension you will get a Styling sub-menu under your Ninja Forms Menu. When you click on that you will see 4 tabs and these represent Ninja Forms default styles. When you set these options they will be applied in a very specific order.

Form Styles Tab

This tab represents the defaults for the elements of your Ninja Forms. Things like the main container, rows, and the success message are set here and are applied to every form that you create with Ninja Forms so be sure you want these styles applied to every form before you proceed.

Default Field Styles Tab

When you create a field or any other element with Ninja Forms it creates certain required output. A wrapping div around a label and the actual element. The only exceptions are layout elements where there is no label and perhaps no wrapping div, in which case only the Element Styles will apply.

In any case these styles apply to ALL fields created in Ninja Forms regardless of type. Again if you don’t want it applied to absolutely everything use this option sparingly.

Field Types Styles Tab

Here you will be presented with the same options as the Default Field Styles with the addition of the option to select a specific field or element type. This mean you can style all your text boxes one way and all your Submit buttons another way. Basically, you can create default styles for every type of item Ninja Forms allows you to create.

Error Styles Tab

If the form is not completed properly there are messages that are displayed at the top of the form as well as with each field that has an error attached to it. This will let you style these messages and fields that have errors for all of your Ninja Forms.

Understanding Hierarchy

Basically, the more specific you are, the more weight is applied to that style. With this in mind, Field Types Styles are applied first then Default Field Styles. Keep this mind when things don’t seem to appear as the way you think they should.

Changing the Number of Columns in a List using a class name

You can use the class name NUMBER-col-list as the list field container class name under the list field options.

In order to view the this feature you will need to enable “Developer Mode”.

Example: You can use three-col-list to have the list options show in three columns.

You can then create empty space on the row by grabbing the middle of a field and dragging it beneath another field.

You can add a field to the same column as another field by grabbing the middle of a field, and dragging it under that field.

You can add a field to its own row by grabbing the middle of a field and dragging it out of a column and under a full sized column.

You can remove empty space in your form by clicking on “Delete Column”

You can resize columns by dragging the bar that appears between the fields.

You can change the order of the rows by clicking on the bar on the left side of the row and dragging it into place.

Adding Styles

Whether you are editing the default form styles, default field styles, field style types, error styles, or the individual field styles, you are presented with many of the same options. Here you can find the basics of CSS that you might need to know in order to unleash the power of the Layout & Styles extension for Ninja Forms.

Note that depending on your site’s theme, you may need to disable Ninja Forms’ Opinionated Styles Setting in order for your styling changes to take effect. You can do this by navigating to your Settings page in the Ninja Forms section of the Dashboard and setting the “Opinionated Styles” box to “None.” Then save your settings. You can find an explanation of what this setting is and why it exists here: Styling Your Forms

Basic CSS Properties

While we may add more in the future, here we keep the basic elements that are available for you to style your form elements.

Background Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Border Width

This can accept from 1 to 4 values. Check the following examples:

• 1px – This is will add a 1 pixel border on all four sides.
• 1px 2px – This will add a 1 pixel border on the top and bottom and a 2 pixel border on the left and right sides
• 1px 2px 3px – This will add a 1 pixel border on the top, a 2px border on the left and right sides, and a 3 pixel border on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel border on the top, 2 pixel on the right, 3 pixel on the bottom, and 4 pixel on the left.

Border Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Text Color

This offers a very simple color picker for you to either dial in a selected color or type in a HEX color value.

Height

Choose the height of you element with an integer followed by px or %. As in 500px or 100%.

Width

Choose the width of you element with an integer followed by px or %. As in 500px or 100%.

Advanced CSS Properties

These are items you may not need as often for the average user, but we include them in case you would like a little more control.

Float

This accepts either left, right, or none.

Font Size

This will most often be an integer followed by px or em. As in 16px or 1 em.

Margin

This can accept from 1 to 4 values. It adds whitespace on the outside of what you apply it to as long as it’s a block level element. Check the following examples:

• 1px – This is will add a 1 pixel margin on all four sides.
• 1px 2px – This will add a 1 pixel margin on the top and bottom and a 2 pixel margin on the left and right.
• 1px 2px 3px – This will add a 1 pixel margin on the top, a 2px margin on the left and right, and a 3 pixel margin on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel margin on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Padding

This can accept from 1 to 4 values. It adds whitespace on the inside of what you apply it to as long as it’s a block level element. Check the following examples:

• 1px – This is will add a 1 pixel padding on all four sides.
• 1px 2px – This will add a 1 pixel padding on the top and bottom and a 2 pixel padding on the left and right.
• 1px 2px 3px – This will add a 1 pixel padding on the top, a 2px padding on the left and right, and a 3 pixel padding on the bottom.
• 1px 2px 3px 4px – This will add a 1 pixel padding on the top, 2 pixels on the right, 3 pixels on the bottom, and 4 pixels on the left.

Advanced CSS

This option is for those who are well versed with CSS or don’t mind experimenting. Here you can write in any rules that you wish, just like you would if you were writing CSS within its own file. Example:

• border-radius: 5px;
• line-height: 18px;
• box-shadow: 2px 2px 2px 3px #333;

Remember to end each line with a semi-colon.

Layout & Styles Hierarchy

Ninja Forms Layout & Styles extension offers you the ability to create very complex form layouts and styles by default and on a per form basis but understanding the order in which the styles are applied is crucial to getting the most out of this extension.

To begin, when you install the Layout & Styles extension you will get a Styling sub-menu under your Ninja Forms Menu. When you click on that you will see 4 tabs and these represent Ninja Forms default styles. When you set these options they will be applied in a very specific order.

Form Styles Tab

This tab represents the defaults for the elements of your Ninja Forms. Things like the main container, rows, and the success message are set here and are applied to every form that you create with Ninja Forms so be sure you want these styles applied to every form before you proceed.

Default Field Styles Tab

When you create a field or any other element with Ninja Forms it creates certain required output. A wrapping div around a label and the actual element. The only exceptions are layout elements where there is no label and perhaps no wrapping div, in which case only the Element Styles will apply.

In any case these styles apply to ALL fields created in Ninja Forms regardless of type. Again if you don’t want it applied to absolutely everything use this option sparingly.

Field Types Styles Tab

Here you will be presented with the same options as the Default Field Styles with the addition of the option to select a specific field or element type. This mean you can style all your text boxes one way and all your Submit buttons another way. Basically, you can create default styles for every type of item Ninja Forms allows you to create.

Error Styles Tab

If the form is not completed properly there are messages that are displayed at the top of the form as well as with each field that has an error attached to it. This will let you style these messages and fields that have errors for all of your Ninja Forms.

Understanding Hierarchy

Basically, the more specific you are, the more weight is applied to that style. With this in mind, Field Types Styles are applied first then Default Field Styles. Keep this mind when things don’t seem to appear as the way you think they should.

Changing the Number of Columns in a List using a class name

You can use the class name NUMBER-col-list as the list field container class name under the list field options.

In order to view the this feature you will need to enable “Developer Mode”.

RESOURCES