BugWP logo BugWP
Back to Community
Home / Community / General

Troubleshooting Forminator Field Group Display and Styling Issues

24 threads Sep 10, 2025

Content

Field Groups in Forminator Forms are a powerful way to organize related fields and create complex, multi-part forms. However, users sometimes encounter issues where these groups do not display or behave as expected. This guide covers the most common Field Group problems and their solutions, compiled from community reports and troubleshooting discussions.

Common Field Group Issues

Based on community feedback, the most frequent problems with Field Groups include:

  • Groups not displaying in the correct order on the front end.
  • Groups not appearing responsive (e.g., not showing in multiple columns on mobile).
  • Difficulty applying custom CSS to specific fields within a group.
  • Styling options, like border radius, not applying correctly to group fields.
  • Problems with conditional logic and required fields inside hidden groups.

Why Do These Issues Happen?

These problems typically stem from a few key areas:

  1. Theme or Plugin Conflicts: Your active WordPress theme or another plugin might be overriding Forminator's default styles or scripts. This is a very common cause for styling and display inconsistencies (as seen in Thread 5 and Thread 18).
  2. Complex CSS Selectors: Field Groups have a specific HTML structure. Applying custom CSS requires using the correct, often more complex, selectors to target elements nested inside the group wrapper (as discussed in Threads 13, 20, and 21).
  3. Forminator's Built-in Styles: The plugin's own CSS might be taking precedence over your customizations, sometimes requiring the use of !important declarations.
  4. JavaScript Interactions: Issues with conditional logic or field ordering can sometimes be related to how JavaScript handles the dynamic showing/hiding of groups.

How to Troubleshoot and Fix Field Group Problems

1. Basic Conflict Check

Before diving into complex solutions, always perform a basic conflict test. This is the first step recommended in many support threads.

  • Temporarily switch to a default WordPress theme like Twenty Twenty-Four.
  • Deactivate all other plugins except Forminator.
  • Check if the issue persists. If it resolves, reactivate your theme and plugins one by one to identify the culprit.

2. Fixing Field Order and Responsiveness

If your Field Groups are not appearing in the correct order or are not responsive (Thread 22), the issue is often related to the form's structure or a CSS conflict.

  • Ensure you have correctly added fields to the intended group in the form builder.
  • Check the column settings for fields within the group. Each field in a row should have its column width set (e.g., 6 for a two-column layout).
  • Use browser developer tools (F12) to inspect the group element and see if any conflicting CSS rules are forcing a width: 100% or display: block on the group.

3. Applying Custom CSS to Group Fields

Styling individual fields inside a group requires precise CSS selectors (Threads 13, 20, 21). The basic structure is:

#forminator-module-123 .forminator-group#group-1 .forminator-field { 
    /* Your styles here */ 
}

Where 123 is your form ID and group-1 is your specific group ID. You can find these IDs by inspecting the form element in your browser.

4. Using Built-in Styling Options

For basic styling like border radius, first try the built-in options before writing custom CSS. As mentioned in Thread 13:

  1. Go to Forminator > Form > Edit Form > Appearance (tab).
  2. Navigate to Field Container > Border.
  3. Set a custom radius value. This should apply to all fields, including those in groups.

5. Handling Conditional Logic and Required Fields

A known issue (Thread 23) involves required fields inside hidden groups still triggering validation errors. The general consensus is that this should not happen. If you encounter this:

  • Ensure the visibility condition is applied to the entire Field Group, not just individual fields.
  • Test with a simpler form to confirm the behavior. If the problem persists, it may be a bug that should be reported.

When to Seek Further Help

If these steps do not resolve your issue, the problem might be more specific. When asking for help in communities, be prepared to provide:

  • The URL of the page with the form.
  • The exact CSS you have already tried.
  • A clear description of what you expect to happen versus what is actually happening.

By methodically working through these troubleshooting steps, you can resolve most common Field Group display and styling issues in Forminator.

Related Support Threads Support