Styling Fluent Forms in MaxiBlocks: A complete guide

Overview

This guide explains how to style Fluent Forms within MaxiBlocks using the Group Maxi block's Advanced CSS functionality. This method ensures your form styles work with MaxiBlocks style cards and survive updates and style changes.

How form styling works in MaxiBlocks

When you add a Fluent Form to MaxiBlocks, the form is wrapped inside a Group Maxi block. The form inherits all its styles from this parent Group block, not from the Fluent Forms block itself.

Key points:

• Form styles come from the Group Maxi block wrapper
• Styles are added to the Advanced CSS field per breakpoint under Advanced settings
• The Advanced CSS mirrors MaxiBlocks style cards variables for simplicity
• Changing the style card automatically updates form styles to match
• This method ensures styles survive updates and style card changes

Selecting the correct block for styling

Common mistake: Selecting the Fluent Forms block instead of the Group Maxi block.

Correct approach:

1. In the List View or Outline panel, locate the Group Maxi block that wraps your Fluent Form
2. Select the Group Maxi block (not the Fluent Forms block inside it)
3. Navigate to the Block settings panel on the right
4. Click on the Advanced tab

Customizing form styles with Advanced CSS

To manually override form styles:

Step 1: Access Advanced CSS settings

1. Select the Group Maxi block wrapping your Fluent Form
2. Go to Block settings → Advanced tab
3. Expand the Advanced CSS section
4. You'll see breakpoint options: XXL, XL, L, M, S, XS

Step 2: Add or modify Advanced CSS

1. Click on your size breakpoint (typically XL, as it's the most common screen size)
2. Add or modify your CSS in the Advanced CSS input box
3. Use CSS variables for colours to maintain consistency with style cards
   • Example: color: var(--maxi-dark-color-5);  

Important note about CSS variables: When changing CSS variables, pay attention to two elements:

• Tone: Refers to the style variant (e.g., light   or dark  )
• Number: Refers to the colour palette number from the style cards (e.g., color-5  )

Make sure your tone matches your current style card. For example, if you've loaded a light pattern, use --maxi-light-color-5   rather than --maxi-dark-color-5  .

Step 3: Apply to other breakpoints as needed

Important: Styles inherit from your base breakpoint down to smaller breakpoints until they're overridden. You only need to copy styles to other breakpoints if they already have changes there, or if you need different styling at specific breakpoints.

Understanding breakpoint inheritance:

• If you make changes on XL (base breakpoint), they'll automatically inherit to L, M, S, and XS
• Changes won't inherit to XXL, as this breakpoint typically has its own adjustments (font sizes, paddings, etc.)
• If XXL is your base breakpoint, you'll need to apply changes to both XXL and XL to ensure coverage

When to copy styles to other breakpoints:

1. Check if the breakpoint already has existing styles
2. If yes, carefully add your changes to that breakpoint's Advanced CSS
3. If no, the styles will inherit automatically—no need to copy

Best practice: Copy your changes to other breakpoints only if needed, or verify that your changes work well across all breakpoints.

Common CSS customization

Here are typical CSS customization you might make:

Button styling

.fluentform .ff-btn-submit {
  background-color: var(--maxi-dark-color-5);
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 5px;
}

Input field styling

.fluentform input, .fluentform textarea {
  font-family: var(--maxi-dark-p-font-family-general);
  font-size: 16px;
  color: var(--maxi-dark-color-5);
  padding: 10px;
}

Label styling

.fluentform label {
  font-family: var(--maxi-dark-p-font-family-general);
  font-size: 14px;
  font-weight: 600;
  color: var(--maxi-dark-color-5);
}

Troubleshooting

Styles aren't applying

Problem: You've selected the Fluent Forms block instead of the Group Maxi block.

Solution:

1. Open List View or Outline panel
2. Navigate up one level to the Group Maxi block
3. Select the Group Maxi block
4. Apply styles there

Styles work on desktop but not mobile

Problem: Advanced CSS wasn't properly applied across breakpoints, or existing breakpoint styles are overriding your changes.

Solution:

1. Select the Group Maxi block
2. Go to Advanced → Advanced CSS
3. Check each breakpoint (XXL, XL, L, M, S, XS) for existing styles
4. Add your changes to breakpoints that already have custom styles
5. Verify inheritance is working correctly for breakpoints without custom styles

Styles reset after changing style card

Problem: Direct CSS on the Fluent Forms block gets overridden.

Solution: Always add Advanced CSS to the Group Maxi block wrapper, not the Fluent Forms block. This ensures compatibility with style card changes.

CSS variables aren't working or showing wrong colours

Problem: Mismatched tone in CSS variable (e.g., using dark   variables with a light   style card).

Solution:

1. Check your current style card (light or dark)
2. Update CSS variables to match: --maxi-light-color-5   for light themes, --maxi-dark-color-5   for dark themes
3. Pay attention to both the tone and the colour number in your variables

Understanding the setup method

You might wonder why this method seems a bit complex. Here's the reasoning:

Benefits of this approach:

• Works great with MaxiBlocks style cards
• Survives plugin updates without breaking
• Maintains consistency when switching style cards
• Allows precise per-breakpoint control when needed
• Keeps all form-related styles in one location
• Uses CSS inheritance intelligently to minimise redundant code

Quick reference checklist

✓ Select the Group Maxi block (not Fluent Forms block)

✓ Navigate to Advanced → Advanced CSS

✓ Start with your base breakpoint (typically XL)

✓ Use CSS variables with the correct tone (light/dark)

✓ Only copy styles to other breakpoints if they already have existing styles

✓ Verify that your changes work well across all breakpoints

✓ Test in preview mode before publishing

Need help?

If you're still experiencing styling issues:

1. Check you've selected the correct block (Group Maxi, not Fluent Forms)
2. Verify Advanced CSS is properly applied to necessary breakpoints
3. Confirm CSS variables match your style card tone
4. Clear your browser cache and check again
5. Test in an incognito browser window
6. Contact MaxiBlocks support with screenshots showing your block selection and settings