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

Troubleshooting Common WPForms Styling and CSS Conflicts

29 threads Sep 7, 2025 Plugin → Wpforms

Content

WPForms is a powerful tool for creating contact forms, surveys, and more on your WordPress site. However, users often encounter styling issues where forms don't look or behave as expected. These problems can range from forms not loading correctly on the first page visit to conflicts with themes or other plugins that disrupt the layout.

Why Do WPForms Styling Issues Occur?

Styling conflicts with WPForms typically happen for a few key reasons:

  • Theme or Plugin Conflicts: Your active theme or another plugin might be applying CSS rules that override or interfere with WPForms' default styles. This is a very common cause, especially with page builders like Elementor or WPBakery (Threads 16, 19, 22).
  • Form Styling Settings: The 'Include Form Styling' option within WPForms settings (found under WPForms » Settings » General) plays a crucial role. Choosing 'No Styling' disables the plugin's CSS, including styles for validation, which can lead to the 'Please enable JavaScript' error (Thread 1). Selecting 'Base and Form Theme Styling' loads more comprehensive CSS, which can sometimes conflict with a theme's styles (Thread 11).
  • Caching: Aggressive caching mechanisms, either in a plugin or at the server level, can sometimes serve an outdated version of the form's stylesheet, causing it to appear broken until the page is refreshed and the cache is busted (Threads 7, 13).
  • Modern Markup: An experimental 'Use Modern Markup' setting in earlier versions had a known bug that broke the ability to use CSS classes (Thread 25). This has since been fixed.

How to Troubleshoot and Fix WPForms CSS Issues

Follow these steps to identify and resolve the most common styling problems.

1. Perform Basic Conflict Checks

Before diving into complex CSS, rule out simple conflicts.

  • Switch Themes Temporarily: Activate a default WordPress theme like Twenty Twenty-Four. If the problem disappears, the issue lies with your original theme's styles.
  • Deactivate Plugins: Temporarily disable all other plugins except WPForms. If the form renders correctly, reactivate your plugins one by one to identify the culprit. Pay special attention to caching, optimization, and page builder plugins (Threads 7, 18).
  • Clear All Caches: Clear your browser cache, any WordPress caching plugins (e.g., WP Rocket), and server-side caches (e.g., Varnish, Object Caching). Test in a browser's incognito/private window to bypass local caching (Thread 13).

2. Configure the Form Styling Setting

The setting in WPForms » Settings » General » Include Form Styling is critical.

  • Base Styling Only: This is often the safest choice. It provides a good foundation without being overly opinionated, allowing your theme to handle most of the styling. It's a great starting point for custom CSS work (Thread 15).
  • Base and Form Theme Styling: This loads the complete WPForms stylesheet. Use this if you want WPForms to control the look completely, but be aware it can cause conflicts (Thread 11).
  • No Styling: Only choose this if you are an advanced user prepared to write all CSS yourself. This setting removes vital validation styles and will cause the 'Please enable JavaScript' warning to appear (Thread 1).

3. Apply Targeted Custom CSS

Once you've isolated the issue, custom CSS is often the solution. Add the following code snippets to your theme's Additional CSS section (under Appearance » Customize).

Fix Field Alignment and Float Issues:
A common issue in multi-column layouts where fields don't clear correctly. 

.wpforms-field {
    clear: both !important;
}
(Threads 3, 15)

Remove Unwanted List Styling:
To remove bullets and indents from form lists. 

.wpforms-container ul {
    padding: 0;
    list-style-type: none;
}
(Thread 15)

Fix Dropdown Field Styling Artefacts:
To remove unwanted pseudo-elements from dropdown fields. 

.select_container:before, .select_container:after {
    display: none !important;
}
(Thread 6)

Style Specific Field Labels (e.g., GDPR text): 

.wpforms-form .your-custom-class label {
    font-size: 15px !important;
    font-family: Arial, Georgia, serif;
}
(Thread 5)

Hide Validation Error Messages (but keep the red border): 

.wpforms-field-required ~ em, 
input.wpforms-error ~ em {
    display: none !important;
}
(Thread 21)

4. Check for Known Incompatibilities

  • Block Themes & theme.json: WPForms has noted that full compatibility with the block theme system (theme.json) is still in development. For now, you will need to rely on custom CSS to style forms within these modern themes (Thread 12).
  • Page Builders: If using a page builder like Elementor and encounter issues, try disabling the builder's 'Element Caching' feature if available, as this has been a source of recent conflicts (Thread 19).

Conclusion

Most WPForms styling issues stem from conflicts with other styles on your site. The troubleshooting path is usually straightforward: switch to a default theme, disable other plugins, configure the form styling setting appropriately, and then apply minimal, targeted CSS to fix any remaining visual quirks. By methodically working through these steps, you can regain control over your form's appearance and ensure a seamless experience for your visitors.

Related Support Threads Support