BugWP logo BugWP
Back to Community
Home / Community / Plugin → Wpforms

Fixing WPForms Multi-Column Layout Issues: A Troubleshooting Guide

28 threads Sep 7, 2025 Plugin → Wpforms

Content

Creating a clean, multi-column form layout is a common goal for many WordPress users. However, users of the WPForms plugin often encounter a frustrating issue where their carefully planned two or three-column layouts break, displaying fields in a single, stacked column instead. This guide will explain why this happens and provide the most effective solutions based on community experiences.

Why Your Multi-Column Layout Isn't Working

The most prevalent cause of multi-column layout failures in WPForms is a conflict with the plugin's "Modern Markup" feature. This setting, introduced in newer versions, uses modern CSS techniques that can override the traditional CSS classes used to create columns.

Users attempting to follow the official WPForms documentation for multi-column layouts may add classes like wpforms-one-third or wpforms-first to their fields, only to find the layout remains a single column. This is because the Modern Markup feature is often enabled by default, disregarding these legacy class-based layouts.

How to Fix Multi-Column Layout Problems

Solution 1: Disable Modern Markup (Most Common Fix)

The primary solution confirmed by the community is to disable the Modern Markup setting. Here's how to do it:

  1. Navigate to your WordPress dashboard.
  2. Go to WPForms » Settings.
  3. Look for the "Use Modern Markup" option.
  4. If visible, ensure this option is unchecked or disabled.
  5. Save your changes and check your form frontend.

Solution 2: If the Modern Markup Setting is Missing

In some cases, particularly with newer versions of WPForms Lite, the Modern Markup toggle may not be visible in the settings interface. If you cannot find this option, you can force it to appear by adding a small code snippet to your site.

Add the following filter to your theme's functions.php file or a custom functionality plugin:

add_filter( 'wpforms_disable_modern_markup', '__return_false' );

After adding this code, the Modern Markup option should reappear in your WPForms settings, allowing you to disable it.

Solution 3: Ensure Correct CSS Class Usage

Once Modern Markup is disabled, verify you are using the correct CSS classes for your desired layout:

  • Two-column layout: Use wpforms-one-half wpforms-first for the first field in a row and wpforms-one-half for the second.
  • Three-column layout: Use wpforms-one-third wpforms-first for the first field, and wpforms-one-third for the subsequent two fields in the same row.

These classes are applied in the form builder by clicking on a field, going to the Advanced tab, and adding them to the CSS Classes field.

Responsive Design Considerations

It's important to note that multi-column forms should be responsive. Even when your columns work on desktop, they will typically stack into a single column on mobile devices for usability. This is the intended behavior. If you need to maintain multiple columns on mobile, this requires custom CSS beyond the scope of the standard WPForms layout options.

When These Solutions Might Not Apply

It's worth noting that some advanced layout features, such as the dedicated Layout field or certain styling options for fields within columns, are part of the paid WPForms Pro version. The solutions above address the core CSS class functionality available in the free version (WPForms Lite).

If you continue to experience issues after trying these steps, consider checking for conflicts with your theme or other plugins by temporarily switching to a default WordPress theme (like Twenty Twenty-Four) and disabling other plugins one by one.

Related Support Threads Support