Easily create multi-column form layouts and beautifully styled form elements without mastering CSS.

Layout and Styles

A form doesn’t need to be fancy to convert well, but it shouldn’t be crowded and messy either. Ninja Forms will look fantastic on a well styled theme with no additional styling needed, but there may be times when you want to take your form to a new level!

Create a layout for Ninja Forms

Elevate your forms with Layout & Styles

Layout & Styles gives you the ultimate control over Ninja Forms without having to write lengthy amounts of CSS code:

  • Create 1 to 4 column form layouts with a drag-n-drop grid creator.
  • Easily add styles to form elements, labels, and wrappers.
  • Add default styles to elements, and/or specify styles by element type, form, or form field.
  • Export and import styles.
  • Easily style standard form components: datepicker, success message, even and odd field rows, etc.
  • Add styles to your form’s error messages.

Who should use Layout & Styles

  • Anyone who wants to make small changes to their forms, but knows little to no CSS.
  • Anyone who likes lots of options, fine-grained control, and likes to experiment
  • Anyone who knows CSS very well and wants to speed up the process of styling a Ninja Form

Layout & Styles Screenshots

Frequently Asked Questions

Can I style all elements, including those added by other add-ons?

In most cases, yes. There may be elements added by other add-ons that are not yet supported by Layout & Styles, but the vast majority are.

How much CSS do I REALLY need to know?

We have a guide that explains all you need to know for basic forms styling. As with most things, however, the more you know the more you can do.

Can I make fields span separate columns/rows?

You can span multiple columns with ease, but spanning multiple rows with a single field is not possible at this time.

Can I style pseudo-classes with this extension?

Pesudo-classes are a fairly complex use case and not currently editable from within Layout and Styles (but you can style them in your theme’s stylesheet)
Changelog

1.2.7 (12 May 2015)

Bugs:

  • Fixed a bug that could cause column layouts to fail even when they are correct.

1.2.6 (17 March 2015)

Bugs:

  • Fixed an issue with browser caching that could cause older versions of JavaScript files to load.

1.2.5 (4 March 2015)

Bugs:

  • Fixed a bug that removed the Multi-Part Styles section if that extension was also activated.

1.2.4 (3 March 2015)

Bugs:

  • Fixed a bug that could cause a fatal error if Ninja Forms core was deactivated.

1.2.3 (4 February 2015)

Changes:

  • Preparing for compatibility with Ninja Forms version 2.9.

1.2.2 (24 November 2014)

Bugs:

  • Fixed a bug that could prevent field layouts from saving properly.

1.2.1 (17 November 2014)

Changes:

  • Adding a warning for a common invalid column layout error.

Bugs:

  • Fixed a bug with default styling.
  • Updated support for i18n.

1.2

Bugs:

  • Fixed a bug that prevented the new options from showing up.

Changes:

  • Added rating-specific styles on a per-field basis.
  • Added individual styling to rating fields.
  • Converting Layout and Styles over to the new Ninja Forms loading class.
  • Added per form title styling.

1.1.1

Bugs:

  • Fixed a bug that prevented multi-part pages from being added on the Layout and Styles tab.
  • Fixed some CSS specificity errors with textboxes and textareas.

Changes:

  • Admin scripts should now load the min or dev versions based on the NINJA_FORMS_JS_DEBUG constant.
  • Added display selector.
  • Adjusted what\’s advanced and what\’s basic.
  • Limitted some secectors from Default Field Styles.
  • Moved styles to be output before form and not after.

1.1

Bugs:

  • Fixed a bug that could cause multi-part forms to behave incorrectly when styled.
  • Adjusted a CSS selector that could cause styles from not applying properly.

1.0.9

Bugs:

  • Fixed a fairly major bug with Layout & Styles and Multi-Part forms that could cause multi-columned pages to behave incorrectly.

1.0.8

Changes:

  • Added additional styles for core such as an error selector fix, form title, button and hover. Also added styles for MP Page Titles, and pre / next hovers.

1.0.7

Changes:

  • Changed the license and auto-update system to the one available in Ninja Forms 2.2.47.

1.0.6

Bugs:

  • Fixed a bug that prevented previous and next button in multi-part forms to be styles.

Changes:

  • improved i18n compatability.

1.0.5

Changes:

  • Changed references to wpninjas.com to the new ninjaforms.com.

1.0.4

Bugs:

  • Fixed a bug that prevented the per form hover state styles being applied to submit buttons.

1.0.3

Bugs:

  • Fixed a bug that prevented List fields from working properly on the Default Field Styles tab.

1.0.2

Changes:

  • Updates for compatibility with WordPress 3.6

1.0.1

Bugs:

  • Fixed a visual bug with the placement of the Form Settings metabox.

1.0

Bugs:

  • Fixed a bug that was preventing the \”Field Type Settings\” tab from working properly.

0.9

Changes:

  • The selector used for the \”next\” and \”previous\” buttons in Multi-Part Forms has been changed.
  • Added \”Page\” styles for use with AJAX submissions and Mult-Part Forms.

0.8

Features:

  • Added new AJAX submissions and Multi-Part Forms styling options.

0.7

Changes:

  • Added a filter to the fields array that is output on the layout editing screen.

0.6

Bugs:

Bugs:

  • Fixed a bug that could cause the \”Error Message Styles\” from saving properly.

0.5

Bugs:

  • The admin JS file should now include properly on sites using versions of WordPress before 3.5.

0.4

Features:

  • Added styling options for Multi-Part Forms elements.

0.3

  • Fixed a bug in the minified JS.

0.2

  • Fixed a bug that prevented some users from activating their installations.

0.1

  • Initial release