Back to Community
Home / Community / Plugin → Ninja forms – the contact form builder that grows with you

How to Create Multi-Column Layouts in Ninja Forms Using CSS Classes

21 threads Sep 16, 2025 Plugin → Ninja forms – the contact form builder that grows with you

Content

Creating a multi-column form layout is a common request for Ninja Forms users. While the official Layout & Styles add-on provides a drag-and-drop interface for this, many users successfully achieve column-based designs using custom CSS classes directly within the free version of the plugin.

The Common Problem: Columns Not Displaying Correctly

Users often try to create columns by adding classes like one-half or one-fourth to their field's 'Custom CSS Classes' setting in the Advanced tab, only to find the layout doesn't render as expected. This can happen for a few reasons:

  • The classes were entered with a space, which was not allowed in older plugin versions due to a security patch (a bug later fixed in version 3.5.8.3).
  • The necessary first class was missing to define the start of a new row.
  • A theme or other plugin's CSS was overriding the column styles.
  • The user was checking the form in the form builder, where the styles are not always previewed accurately.

Standard Solution: Using Built-in CSS Classes

The 'Ninja Forms – The Contact Form Builder That Grows With You' team suggests using a specific set of classes to create responsive columns. These classes should be added to the field's container under the 'Custom CSS Classes' field in the Advanced tab of the field settings.

For a two-column layout:

  • Left Column Field: Add the classes one-half and first.
  • Right Column Field: Add the class one-half.

For a four-column layout:

  • First Column Field: one-fourth and first
  • Second Column Field: one-fourth
  • Third Column Field: one-fourth
  • Fourth Column Field: one-fourth

Other available classes include one-third, two-thirds, and more. The first class is crucial as it clears the float and tells the layout that this field is the first element in a new row.

Making the Form Full-Width

If your form is constrained by a maximum width, you can use the following custom CSS to make it span the full width of its container. This code can be added to your theme's Customizer under 'Additional CSS' or in a custom CSS plugin.

.nf-form-content {
    max-width: 100% !important;
}

Troubleshooting: What to Do If Classes Don't Work

  1. Check for Spaces: Ensure you are not trying to use a class with a space (e.g., 'one-half first' is two separate classes, not one). Enter them as individual classes in the field.
  2. Update Ninja Forms: If you receive a validation error stating "HTML classes only allow – _ and alphanumeric characters," it indicates an outdated plugin version. Updating Ninja Forms to version 3.5.8.3 or newer resolves this bug.
  3. Clear Your Cache: CSS changes may not appear immediately due to browser or server caching. Test your changes in an incognito/private browser window to see the result without cached files.
  4. Check for Conflicts: Your theme or other plugins might be applying styles that conflict with Ninja Forms. To test for this, temporarily switch to a default WordPress theme like Twenty Twenty-One and deactivate all other plugins except Ninja Forms. If the columns work, reactivate your plugins and theme one by one to find the culprit. The Health Check plugin can help you do this safely on a live site.
  5. Enable Opinionated Styles: Within Ninja Forms > Settings > Advanced Settings, try changing the "Opinionated Styles" setting to "On." This can help the form's styles take precedence over theme styles.

Important Limitations and Notes

  • Mobile Responsiveness: By default, these column classes are responsive and will stack vertically on mobile devices. Forcing a two-column layout on mobile is generally not recommended, as it can make fields too small to use. The plugin and most themes prioritize mobile-friendly, single-column layouts.
  • Advanced Layouts: More complex layouts, like rowspans or adding custom classes to entire rows, are not natively supported with CSS classes and require custom JavaScript or the Layout & Styles add-on.
  • Commercial Add-ons: For support with commercial add-ons like Layout & Styles or Multi-Part Forms, users must contact the official Ninja Forms support channel, as per WordPress.org guidelines.

By following these steps, you should be able to successfully create and troubleshoot multi-column forms using the built-in CSS class system in Ninja Forms.

Related Support Threads Support