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

Fixing WPForms Layout and Styling Issues on Mobile and Desktop

23 threads Sep 16, 2025 Plugin → Wpforms

Content

WPForms is a powerful tool for creating contact forms, but users sometimes encounter layout and styling problems, especially with multi-column designs and mobile responsiveness. Based on community discussions, here are the most common issues and their solutions.

Common Multi-Column and Mobile Layout Problems

Users frequently report these specific issues:

  • Multi-column forms (e.g., 2-column layouts) not displaying correctly or breaking at unexpected screen sizes.
  • Form fields or the submit button not aligning properly.
  • Forms not switching to a single-column layout on mobile devices, causing a poor user experience.
  • Specific styling problems, like a submit button's background color not changing.
  • Layout conflicts when using page builders or specific themes.

Why These Issues Happen

These problems typically occur for a few key reasons:

  1. Theme or Plugin Conflicts: Your WordPress theme or another plugin may have CSS rules that override or conflict with WPForms' styling.
  2. Custom CSS: Previously added custom CSS might be interfering with the form's layout.
  3. Caching: Aggressive caching mechanisms, either in a plugin or your browser, can serve outdated stylesheets, making it seem like your changes aren't working.
  4. Modern Markup Setting: In the WPForms Lite version, a feature called "Modern Markup" is enabled by default and can change how CSS classes are applied to form fields.
  5. iOS Bugs: Past updates to iOS have been known to cause specific alignment issues, though these are often patched in subsequent WPForms updates.

How to Troubleshoot and Fix Layout Issues

1. Clear All Caches

Before making any other changes, this is the most critical first step. Clear your:

  • Browser Cache: Test your form in an incognito or private browser window to rule out local browser caching.
  • Site Cache: If you use a caching plugin like WP Rocket, clear its cache entirely.
  • CDN Cache: If you use a Content Delivery Network (e.g., Cloudflare), clear its cache as well.

2. Check for the "Modern Markup" Setting (Lite Version)

For users of WPForms Lite, the "Modern Markup" feature can prevent traditional CSS layout classes from working. To disable it and revert to the "classic" mode, you need to add a small code snippet to your site. You can safely add this using a free plugin like "Code Snippets."

add_filter('wpforms_admin_settings_modern_markup_register_field_is_hidden', '__return_false');

After adding this code, a new option will appear in WPForms » Settings » General allowing you to disable Modern Markup.

3. Use Built-in Mobile CSS Classes

WPForms includes a dedicated CSS class to force fields to display at full width on mobile devices. This is the recommended method for making multi-column layouts responsive.

  1. Edit your form.
  2. Click on each field you want to be full-width on mobile.
  3. In the Field Options tab, find the CSS Classes box.
  4. Add the class: wpforms-mobile-full
  5. Save the form and clear your site cache.

4. Adjust the Mobile Breakpoint

By default, forms switch to a mobile-friendly layout at a certain screen width. If this breakpoint doesn't match your theme, you can customize it by adding this filter to your theme's functions.php file or a code snippets plugin.

add_filter( 'wpforms_frontend_enqueue_css_layout_field_viewport_breakpoint', static function() {
    return 768; // Change this value to your desired breakpoint in pixels.
} );

5. Resolve Conflicts with the "inline-fields" Class

If you are using the inline-fields CSS class on your form to place fields side-by-side, be aware that it can override other responsive styling, including the mobile classes. If you need mobile responsiveness, avoid using inline-fields and use the multi-column CSS classes instead.

6. Add Specific Custom CSS

For more precise control, you may need to add custom CSS. For example, to fix misaligned fields on a specific mobile device, you could use:

@media (max-width: 600px) {
    .wpforms-container .wpforms-field .wpforms-field-row .wpforms-two-fifths, 
    .wpforms-container .wpforms-field .wpforms-field-row .wpforms-one-fifth {
        width: 33% !important;
    }
}

Or, to fix a margin issue on a field:

.wpforms-container .wpforms-field.wpforms-two-thirds {
    margin-left: 0px !important;
}

Always add custom CSS in Appearance » Customize » Additional CSS or via your theme's options.

When All Else Fails

If you continue to experience problems, try a full conflict test:

  1. Switch your theme temporarily to a default WordPress theme like Twenty Twenty-Four.
  2. Deactivate all plugins except for WPForms.
  3. If the problem disappears, reactivate your plugins one by one to identify which one is causing the conflict.

Finally, ensure you are always running the latest version of WPForms, as the development team frequently releases updates that address known bugs and compatibility issues.

Related Support Threads Support