Styling Beautiful CSS Forms with Fluent Forms’ Advanced Form Styler

Most forms go live with the plugin’s default styles, making them look out of place. To convey professionalism and earn trust, you should design forms to match your brand’s aesthetic. Fluent Forms gives you several ways to style beautiful CSS forms in WordPress without writing a stylesheet. 

Six Ways to Style a Form in Fluent Forms

If you want a particular style to apply to the form everywhere, start in Preview & Design. Use the block styler when a single page needs to look different, and use custom CSS for anything the visual controls don’t cover.

Advanced Form Styler vs Gutenberg Block Styler

The Advanced Form Styler saves the style on the form. Whether you embed that form with a shortcode, the Fluent Forms block, a page builder widget, or a popup, it shows up with the same design.

The Gutenberg block styler saves the style on the block. You embed the form with the Fluent Forms block, then style that block in the sidebar. If you add the same form to another page or post, the new block starts fresh, and none of the first block’s styling carries over. A form added with a shortcode (including the Shortcode block) can’t use the Gutenberg block styler.

How to Style a Form with the Advanced Form Styler

The Advanced Form Styler gives you point-and-click control over almost every part of a form, with a live preview next to the settings. It needs Fluent Forms Pro.

For this guide, Let’s take a three-step Design Workshop Registration form with Name, Email, Phone, Dropdown, Radio, Checkbox, Checkable Grid, Net Promoter Score, Ratings, Range Slider, File Upload, Image Upload, Text Area, Section Break, Custom HTML, and Terms & Conditions fields. That mix brings out nearly every section the styler has.

Open Preview & Design

1. Go to Fluent Forms → Forms and open the form you want to style.
2. Click Preview & Design in the top bar of the editor.
3. The form opens in a preview window with the style panel on the right. It has three tabs: General, Misc, and Import.

Every change shows up in the preview as you make it. Styles are only saved once you click Save Settings.

Pick a style template

The Form Style Template dropdown at the top of the General tab sets the starting point. You can choose from seven options:

• Default: Fluent Forms’ standard look.
• Modern (Bold) and Modern (Light): cleaner, more spacious presets.
• Classic and Bootstrap Style: familiar layouts for older or Bootstrap-based themes.
• Inherit Theme Style: strips most Fluent Forms styling so your theme’s form CSS takes over.
• Custom (Advanced Customization): unlocks every style section so you can set values yourself.

If you like a preset but want to change a few things, pick it and tick Customize Selected Preset to open the same controls. For full control, choose Custom, which is used for the rest of this section.

In the free plugin, this dropdown only offers Default and Inherit Theme Style.

Why the style options change with your fields

Preview & Design only lists sections for elements the form has. A simple contact form gets five sections on the General tab: Label Styles, Input & Text Area, Placeholder, Radio & Checkbox Style, and Submit Button Style.

This workshop form shows thirteen. These extra sections appear only when the matching field is in the form:

The styler also has sections for the Payment Summary and Coupon fields, which follow the same rule.

Style labels, inputs, and placeholders

These three sections cover most of what visitors see. Here, the labels are set to a dark green-gray at 15px, inputs have a white background with a soft border, and there’s a teal border with a light glow on focus.

• Label Styles: color and typography (font size, weight, transform, style, decoration, line height, letter spacing, word spacing).
• Input & Text Area: separate Normal and Focus tabs, each with text color, background color, padding, margin, typography, box shadow, and a custom border with radius.
• Placeholder: color and typography for the hint text inside fields.

Don’t skip the Focus tab. It’s how people see where they are on a long form. A clear focus border also helps keyboard users.

Style radio buttons and checkboxes

Radio & Checkbox Style sets the option text color (Items Color) and the control Size. Turn on Enable Smart UI to replace the default controls with styled ones, then set a checked background color, margin, and border.

Style form steps and step buttons

A multi-step form adds three sections. Multi Page – Header Style controls the progress bar or step indicator: active color, inactive color, text color, text position, height, width, margin, box shadow, and border.

Multi Page – Next Button Style and Multi Page – Previous Button Style each have Normal and Hover tabs with color, background, padding, margin, typography, box shadow, and border. In this form, the Next button is solid teal and the Previous button is white with a teal outline, so the forward action stands out.

Style a checkable grid

Grid Table Style has Table Head and Table Body tabs. Each one sets text color, background color, row height, padding, typography, box shadow, and border. The header row has a pale teal background here, so the column labels read as headings without overpowering the form. 

Style the Net Promoter Score scale

Net Promoter Style controls the 0 to 10 scale: active color and active background color (the selected number), inactive color and inactive background color (everything else), height, line height, and a custom border.

Check that the selected number has enough contrast against its background. White text on a mid-tone color is usually the safest choice.

Style the range slider

Range Slider Style sets the filled track color (Active Color), the empty track color, the value text color, track height, and handle size.

Style file and image upload fields

Image or File Button Style styles the upload control for both the File Upload and Image Upload fields. It has Normal and Hover tabs with color, background, alignment, width, padding, typography, box shadow, and border.

Both upload fields are set to dropzone (in the form editor tab’s field settings, set Upload Button Interface to Dropzone). They’re styled with a dashed teal border and extra padding. The same section styles the classic button if you keep that interface.

Style custom HTML and section breaks

Custom HTML & Section Break Style has Label Styling and Description Styling tabs. You get color, background, typography, box shadow, padding, margin, and a custom border for each.

Style the submit button

Submit Button Style starts with Alignment (left, center, right), then Normal and Hover tabs with text color, background, button height, button width, padding, margin, typography, box shadow, and border. Set a slightly darker hover color so pointing at the button feels interactive.

Customize the Misc tab

The Misc tab has five sections:

• Container Styles: background image (classic or gradient), background color, text color, padding, margin, box shadow, and form border.
• Asterisk Styles: the color of the required-field asterisk.
• Inline Error Message Styles: color, alignment, padding, and typography for validation messages under fields.
• After Submit Success Message Styles: color, background, alignment, width, padding, margin, typography, box shadow, and border for the confirmation message.
• After Submit Error Message Styles: the same controls for errors shown after submission.

Container Styles does the most visual work. It adds a pale mint background to this form, with 32px of padding, a soft border with a 16px radius, and a light shadow, which turns it into a card that stands apart from the page.

Check desktop, tablet, and mobile views

The three icons at the top right of the preview switch between desktop, tablet, and mobile widths. Check the mobile view before you save, since padding and font sizes that look right on desktop can crowd a narrow screen.

Import, export, and reset styles

Once you have a style you like, you don’t need to rebuild it for the next form:

• Export (next to the template dropdown) downloads the current style as a file.
• The Import tab copies the style from another form on the site (Select an Existing Form to Apply Style) or loads an exported style file (Import Fluent Form Style).
• Reset clears your custom values so you can start again.

Set a Global Default Style for New Forms

A default style template means each new form starts with your brand style instead of the plugin default. The feature works in the free plugin, and Pro extends what the default can include.

1. Go to Fluent Forms → Global Settings → General → Default Style Template.
2. Turn on Enable Default Style Template.
3. To reuse a form you’ve already styled, pick it under Copy Styles from Existing Form and click Copy Styles. This fills in the form’s custom CSS and its style template.
4. Add or edit any CSS in the Custom CSS box.
5. Pick a Form Styler Theme if you didn’t copy one.
6. With Pro, turn on Include Form Styler Settings to carry the full Advanced Form Styler values (stored as JSON in the Form Styler Styles (JSON) box) into the default. Copy Styles turns this on for you.
7. Scroll down and click Save Settings.

The default applies to new forms created after you save it. If you import forms through Fluent Forms → Tools → Import, there’s a checkbox to apply the default style template to the imported forms too.

Override the default on a single form

You can easily edit the default style for any particular form. Open the form’s Preview & Design tab, change what you need, and click Save Settings. The changes apply to that form only, and your global default stays the same for the next new form.

Style One Embedded Form with the Gutenberg Block Styler

The Gutenberg block styler lets you restyle a form for one specific page without changing the form anywhere else. It’s free, and it works only when the form is embedded with the Fluent Forms block.

1. Open the page or post in the block editor.
2. Add the Fluent Forms block.
3. Choose your form from Select a Form.
4. With the block selected, open the Block tab in the sidebar. You’ll see General and Misc tabs.
5. Make your changes, then save or update the page.

The General tab starts with Form Style Template. The default, Default (Form Styler), uses the form’s Preview & Design style as the base. With Pro you can switch to any of the other presets; the free plugin offers Default (Form Styler) and Inherit Theme Style.

Below the template, you get these panels:

• Label Styles: color and typography.
• Input & Textarea: Normal and Focus tabs with text color, background, typography, spacing, border, and box shadow.
• Placeholder Styles: text color and typography.
• Radio & Checkbox Styles: items color and size.
• Button Styles: alignment, width, and Normal and Hover tabs with text color, background, typography, padding, margin, box shadow, and border.
• Advanced: additional CSS classes and additional CSS for this block.

The Misc tab has Container Styles (classic or gradient background, background image and color, padding, margin, box shadow, border), Asterisk Styles, and background color, text color, and alignment for inline errors and the after-submit success and error messages.

The block styler doesn’t have the field-specific sections from Preview & Design, such as Grid Table, NPS, Range Slider, or Form Step. Those parts keep the form’s own style, which is another reason to do the main design in Preview & Design and use the block only for page-specific changes.

Style a Conversational Form

Conversational forms show one question at a time, and their styling lives on a separate Design tab instead of Preview & Design. Designing conversational forms needs Fluent Forms Pro.

1. Open your conversational form and click Design in the top bar.
2. On the Design tab, choose a Font. The list has system fonts plus hundreds of Google Fonts.
3. Set the colors for Questions, Answers, Button, Button Text, and Background.
4. Optionally upload a Background Image.
5. Click Save Settings.

Below the colors are a few behavior and layout toggles:

• Disable Layout on Mobile Devices: ignores image layouts on small screens.
• Disable Scroll to Next: stops the form from moving to the next question automatically.
• Enable Scroll to Top: scrolls back to the top on each question.
• Disable Branding: hides the “Powered by Fluent Forms” badge.
• Key Hint: shows keyboard hints such as “Press Enter”.

Add Custom CSS and JavaScript to a Form

If you need additional control, every form has its own custom CSS and JavaScript boxes (both free). The code loads with that form wherever it’s embedded.

1. Open the form and go to Settings & Integrations → Custom CSS/JS.
2. Add your CSS in the Custom CSS box. Leave out the <style> tags.
3. Add JavaScript in the Custom Javascript box. Leave out the <script> tags.
4. Click Save CSS & JS.

Prefix your selectors with .fluent_form_FF_ID. Fluent Forms replaces FF_ID with the form’s ID, so the rule only touches this form and still works if you duplicate it. You can also use the fixed class, such as .fluent_form_5.

Style Forms with AI Through the Fluent Forms MCP Server

If you use an AI assistant such as Claude, Cursor, or Codex, the Fluent Forms MCP server lets it read and change a form’s styling for you. The styling tools are part of the free plugin.

• Get Form Styling (read) returns a form’s current style settings.
• Update Form Styling (write) changes them.

To set up the Fluent Forms MCP server, download the FluentHub or the WordPress MCP. Then go to Fluent Forms (v 6.2.12 or above) → Global Settings → MCP for AI Agents, turn on Enable MCP Server, and connect your client with a WordPress application password. Tools that change data show a preview first and only write after you confirm. The assistant only reaches forms that the connected WordPress user can access.

From there, you can ask for things in plain language, for example “Match form 6’s submit button to form 5” or “Make the labels on my contact form 15px and dark gray.” 

Free vs Pro at a Glance

Here’s a free vs. pro overview of the features discussed in this article. Check the full Free vs Pro breakdown for features outside styling.

Tips for Readable, On-Brand Forms

• Watch for theme styles leaking in. Option labels, the terms text, and HTML paragraphs can pick up your theme’s font size. Check and fix every step of a multi-step form accordingly.
• Keep red for errors. If your accent color is close to the error message color, visitors can mistake a normal button or highlight for a warning.
• Always set a focus state. A visible border change on focus helps people track where they are, especially on mobile and with a keyboard.
• Style for the whole form, not the first screen. Grids, NPS scales, and upload fields often sit on later steps, so preview each step before saving.
• Do the main design once. Put your base style in Preview & Design or the global default, and use the block styler for pages that need a different style.

Frequently Asked Questions

Is the Fluent Forms Advanced Form Styler free?

No. The Advanced Form Styler needs Fluent Forms Pro. The free plugin’s Preview & Design tab offers the Default and Inherit Theme Style templates, and you can still style forms for free with the Gutenberg block styler, a global default style, and custom CSS.

What’s the difference between the Advanced Form Styler and the Gutenberg block styler?

The Advanced Form Styler saves styles on the form, so they apply everywhere the form is embedded. The Gutenberg block styler saves styles on one block, so they only apply to that block on that page.

Why can’t I see Grid Table, NPS, or Form Step options in Preview & Design?

Those sections only appear when the form contains the matching field. Add a Checkable Grid, Net Promoter Score, Range Slider, Form Step, upload, Custom HTML, or Section Break field, save the form, and reopen Preview & Design.

Can I use the Gutenberg block styler on a form added with a shortcode?

No. The block styler only works with the Fluent Forms block. A form added with a shortcode shows the style set in Preview & Design.

Does a global default style change the existing forms?

The default style template applies to new forms you create after saving it. To change an existing form, use its Preview & Design tab or the Import tab to copy a style from another form.

Can I style any form different from the default style?

Yes. Open that form’s Preview & Design tab, change the settings, and save. The override applies to that form only.

How do I copy a form’s style to another form?

Open the target form’s Preview & Design tab, go to the Import tab, pick the source form under Select an Existing Form to Apply Style, then save. You can also export a style file from one site and import it on another.

Where do I change the star color on a Ratings field?

In the form editor tab. Click the Ratings field and set its active and inactive colors in the field settings. The design tab doesn’t have a separate Ratings section.

Can an AI assistant style my Fluent Forms forms?

Yes, by connecting AI agents to Fluent Forms via the free FluentHub or WordPress MCP server. The Get Form Styling tool reads a form’s style and Update Form Styling changes it, with a confirmation step before any change.

Style Your Forms to Match Your Brand

Open a form you already use, click Preview & Design, and start with labels, inputs, the submit button, and the container. Those four changes do most of the work, and the field-specific sections handle the rest as your forms grow.

If you’re on the free plugin, the block styler, a default style, and a few lines of custom CSS will get you started. When you want full control over every field, step, and message, plus conversational form design, upgrade to Fluent Forms Pro.