WordPress forms are single-column by default. That means every field stacks top to bottom, making even a short form feel long and clunky. Layout & Styles changes that.
This add-on gives you a visual form styler and layout builder for Ninja Forms. Drag fields into multi-column layouts, resize columns to any width, and style every element of your forms without writing a single line of CSS. Full form customization, all from the Ninja Forms builder you already know.
With Layout & Styles, you can:
Key Features of Layout & Styles
Drag and drop fields into columns
Creating multi-column forms takes seconds. Grab any field and drag it to the left or right side of another field to instantly create a two-column layout. Keep dragging more fields alongside to build three-column or mixed-width layouts. No shortcodes, no HTML, no guesswork.
Add fields to existing columns by dropping them underneath other fields in that column. Need to move a field back to its own row? Drag it outside the column boundary and it snaps into a full-width row. You can also delete empty columns when you no longer need them.
Resize columns to any width
Click and drag the bar between any two columns to set exact widths. Give a name field 70% and a phone field 30%, or split fields evenly across the row. Every column width adjusts visually in real time, so you can see exactly how your form will look before you publish.
This level of control lets you match your form layout to your page design. Shorter fields like phone numbers or zip codes can share a row, while longer fields like addresses or messages get the space they need.
Reorder rows and field groups visually
Restructuring your form layout is just as simple. Click the bar on the left side of any row and drag it into a new position. Entire rows, including all their columns and fields, move together. No need to rebuild sections from scratch when you want to change the form flow.
Style form elements without writing CSS
The built-in visual editor lets you change colors, fonts, borders, spacing, and backgrounds for any part of your form. Pick a background color from the color picker, set border widths per side, adjust font sizes, and fine-tune margin and padding values. All changes happen through point-and-click controls.
Supported styling properties include background color, border width and color, text color, font size, height, width, float, margin, and padding. Need something more specific? An advanced CSS field lets you add any custom rules, like border-radius, line-height, or box-shadow, directly in the form builder.
Global and field-level styling controls
Layout & Styles provides a four-tier styling hierarchy. The Form Styles tab sets defaults for all form containers, rows, and success messages. The Default Field Styles tab applies to every field type. The Field Types Styles tab lets you set different defaults per field type (text fields, dropdowns, checkboxes, and so on). And the Error Styles tab controls error messages and invalid field highlighting.
The more specific your rule, the more weight it carries. A style set on an individual field overrides the field type default, which overrides the global default. This gives you two levels of control: set a consistent look across all forms, then fine-tune individual fields when you need them to stand out.
Mobile-responsive column layouts
Multi-column layouts automatically stack into a single column on smaller screens. Your visitors see a polished multi-column form on desktop and a clean, easy-to-tap layout on mobile. No extra configuration needed, and no media queries to write.
Works with any Ninja Forms form
Layout & Styles works with every form you build in Ninja Forms. Contact forms, registration forms, payment forms, multi-step forms, and any form using other Ninja Forms add-ons. Add columns, resize layouts, and style fields regardless of which form type or add-ons you are using.
Build Better-Looking Forms in Minutes
The Layout & Styles add-on is included with any Ninja Forms membership, or available as a standalone purchase. Pick your plan above and start building multi-column, custom-styled forms today.
Priority email support and 14-day money-back guarantee included.
WordPress Form Styler: Visual Customization Without Code
Most WordPress form plugins give you a functional form with little control over how it looks. You either accept the default appearance or dig into your theme’s stylesheet. Layout & Styles works as a complete form styler built right into the Ninja Forms builder. Every visual property you would normally set in CSS is available through a point-and-click interface.
Change the background color of your form container, set a border on individual fields, adjust text color for labels, or add padding between fields and form edges. The color picker supports hex values for exact brand matching, and the border width field accepts the same 1-to-4-value syntax you would use in CSS (all sides, top/bottom and left/right, or each side individually).
For form customization that goes beyond the built-in controls, the advanced CSS field accepts any valid CSS rules. Add border-radius for rounded corners, line-height for readable text, or box-shadow for depth. You get the convenience of a visual styler with the flexibility of raw CSS when you need it.
Form Layout Design: Build Compact, Professional Forms
A long single-column form can feel overwhelming. Visitors see a wall of fields and abandon the page before they start typing. Multi-column form layouts solve this by grouping related fields side by side. A first name and last name share one row. City, state, and zip code sit together. The form looks shorter, feels faster, and converts better.
Layout & Styles gives you complete control over your WordPress form layout. Every column width is adjustable, every row is draggable, and the entire layout responds to screen size automatically. Whether you are building a quick contact form or a detailed registration form, the drag-and-drop layout builder helps you create forms that match your site’s design and your visitors’ expectations.
Common Use Cases
- Shorten long forms without removing fields: Place related fields side by side in multi-column layouts so your form takes up less vertical space and feels faster to complete.
- Match forms to your brand identity: Set exact colors, fonts, and spacing to make every form look like a natural part of your website instead of a generic plugin output.
- Build professional registration and application forms: Create polished multi-section layouts with consistent styling that instill confidence in the people filling them out.
- Standardize form appearance across your site: Use global styles to set defaults once, then apply them to every form. Update one setting and every form updates with it.
- Sell products and services with styled order forms: Combine Layout & Styles with Ninja Forms payment add-ons to create checkout experiences that look custom-built.
- Create mobile-friendly forms without extra work: Multi-column layouts stack automatically on small screens, so your forms work everywhere without separate mobile configuration.
Your Forms Should Look as Good as Your Website
Layout & Styles is included with any Ninja Forms membership, or available as a standalone purchase. Choose your plan above and give your forms the layout and styling they deserve.
Priority email support and 14-day money-back guarantee included.
How do I create multi-column forms in WordPress?
With the Layout & Styles add-on, you drag any form field to the left or right side of another field to instantly create a two-column layout. Keep adding fields to build three-column or mixed-width layouts. No coding or shortcodes required.
Can I customize my form layout without CSS?
Yes. Layout & Styles gives you a visual editor for colors, fonts, borders, spacing, and backgrounds. You can also set global styles that apply to every form and override them on individual fields when needed.
What is a form styler plugin?
A form styler plugin lets you change the visual appearance of your WordPress forms without writing CSS. Layout & Styles provides point-and-click controls for colors, borders, fonts, spacing, and layouts, so your forms match your site’s design.
How do I style WordPress forms without CSS?
Install the Layout & Styles add-on and open the styling panel in the Ninja Forms builder. Use the color picker, border controls, and spacing settings to customize any form element. An advanced CSS field is also available if you need fine-grained control.
Are multi-column form layouts mobile responsive?
Yes. Multi-column layouts created with Layout & Styles automatically stack into a single column on smaller screens. Your forms look polished on desktop and are easy to complete on phones and tablets without extra configuration.
Can I set different styles for different field types?
Layout & Styles includes a four-tier styling hierarchy: form-level defaults, field defaults, field-type-specific styles, and individual field overrides. The more specific your rule, the higher its priority, giving you precise control over every element.
Does Layout & Styles work with other Ninja Forms add-ons?
Yes. Layout & Styles is compatible with every Ninja Forms add-on. Apply custom layouts and styling to contact forms, payment forms, multi-step forms, and any other form you build with Ninja Forms.
Changelog
3.0.33 (8 April 2025)
Other:
- remove unused files from build process
3.0.32 (8 April 2025)
Bug Fixes:
- fix styles not applying to fields within repeaters
Security Enhancements:
- protect against CSRF and PHP object injection in styles import/export
3.0.31 (26 January 2026)
Bug Fixes:
- Fixed label styling not applying to date fields
- Fixed universal field type styles not applying to HTML fields
- Fixed element styles not applying to HTML fields
- Fixed field validation not propagating to fields within repeaters
3.0.30 (11 June 2024)
Fixes:
- Fatal error re-triggering email when PDF is active
- PHP Deprecated: Implicit conversion from float 11.5 to int loses precision
3.0.29 (15 February 2021)
Bugs:
- Resolved an issue that caused fields being dragged into a repeatable fieldset to visually duplicate in the form builder.
3.0.28 (9 October 2019)
Bugs:
- Styles should now be honored on all forms when there are multiple copies of the same form on a page.
Changes:
- Added support for styling file upload fields.
3.0.27 (12 June 2019)
Changes:
- Cleaned up a few older scripts that were slowing things down in the form builder. Drag and drop should now be more performant.
3.0.26 (4 April 2019)
Bugs:
- Resolved an issue that was flooding error logs with warnings in php 7.3.
3.0.25 (19 September 2017)
Bugs:
- Fixed a bug with Required Fields not being properly validated on submission.
3.0.24 (15 September 2017)
Changes:
- Reverts unnecessary changes, where the compatibility issue with Multi-Part is solved in Multi-Part.
3.0.23 (14 September 2017)
Changes:
- Re-release with missing files.
3.0.22 (13 September 2017)
Bugs:
- Fixed a bug with PHP Warning messages in the generated CSS output.
- Fixed a bug with field duplication.
3.0.21 (02 August 2017)
Bugs:
- Fixed a bug that caused calculations to fail when using Layout & Styles, Multi-Part Forms, and Conditional Logic.
3.0.20 (21 June 2017)
Changes:
- Added a button to \”remove all styles\” from the plugin-wide styling section.
3.0.19 (02 May 2017)
Changes:
- Added Multi-Part Forms plugin styles if the Multi-Part Forms add-on is active.
3.0.18 (11 April 2017)
Bugs:
- Forms should now import with proper field orders in all installations.
3.0.17 (17 March 2017)
Bugs:
- Completed a deep-dive of all plugin-wide styling settings. They should all work properly now.
3.0.16 (07 March 2017)
Bugs:
- Fixed a bug that could cause the builder to crash without warning in some instances.
3.0.15 (02 Februrary 2017)
Bugs:
- Fixed a PHP warning about unset variables.
3.0.14 (26 January 2017)
Changes:
- Added a filter for Ninja Forms version 3.0.25 that allows Layout & Styles to correctly order fields in submissions.
3.0.13 (19 January 2017)
Bugs:
- Saved fields can now be properly dragged onto rows and dividers.
3.0.12 (21 November 2016)
Bugs:
- Field styles should apply properly on the front-end in all cases.
3.0.11 (26 October 2016)
Bugs:
- Fixed a bug that was introduced in version 3.0.10 that caused rows with empty columns to be removed.
- Sometimes column widths were totalling over 100%. This caused fields to wrap around to a new row.
3.0.10 (17 October 2016)
Bugs:
- Corrupt data should no longer cause Layouts to crash the builder with an \”undefined ParentNode\” error.
3.0.9 (12 October 2016)
Changes:
- Added better error handling for missing field types. This should prevent some JS errors from being thrown on display.
3.0.8 (28 September 2016)
Bugs:
- Fixed a bug that caused field order to randomise when sorting fields between cells and rows.
- Fixed a bug with template imports that caused templates to fail.
- Added version number to script inclusion to help prevent caching issues.
- Fixed a bug with hover styles not being applied to submit buttons.
3.0.7 (26 September 2016)
Bugs:
- Fixed a bug with conversion from the RC of Ninja Forms.
3.0.6 (11 September 2016)
Bugs:
- Fixed a bug with conversion and invalid form layouts.
3.0.5 (09 September 2016)
- Fixed a bug with conversion.
3.0.4 (08 September 2016)
Bugs:
- Fixed a bug with applying plugin wide styles.
3.0.3 (06 September 2016)
Bugs:
- Compatibility with Multi-Part Forms v3.0.
3.0.2 (06 September 2016)
Bugs:
- Improved conversion efficiency.
- Compatibility with Multi-Part Forms v3.0.
3.0.1 (27 July 2016)
Bugs:
- Fixed a bug that could break form conversion in Ninja Forms.
3.0.0
- Updated with Ninja Forms v3.x compatibility
- Deprecated Ninja Forms v2.9.x compatible code
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.
- Limited some selectors 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 compatibility.
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 Multi-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