# Modern Styling for Fluent Forms

> Gives Fluent Forms fields consistent borders, rounded corners, a visible focus ring, clear errors and a bold submit button that follow your theme's fonts.

- Type: CSS
- Runs: Site-wide header
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: fluent-forms, styling, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/fluentforms-modern-styles/

## Code

```css
.fluentform {
    --wpide-ff-accent: #0369a1;
    --wpide-ff-border: #cbd5e1;
    --wpide-ff-error: #b91c1c;
    --wpide-ff-radius: 8px;
}

.fluentform .ff-el-form-control {
    padding: 0.7em 0.9em;
    border: 1px solid var(--wpide-ff-border);
    border-radius: var(--wpide-ff-radius);
    font-size: max(16px, 1em);
}

.fluentform .ff-el-form-control:focus-visible {
    outline: 2px solid var(--wpide-ff-accent);
    outline-offset: 1px;
    border-color: var(--wpide-ff-accent);
}

.fluentform .ff-el-input--label label {
    font-weight: 600;
}

.fluentform .ff-btn-submit {
    padding: 0.75em 1.6em;
    border: 0;
    border-radius: var(--wpide-ff-radius);
    background: var(--wpide-ff-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

.fluentform .ff-el-is-error .ff-el-form-control {
    border-color: var(--wpide-ff-error);
}

.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
    color: var(--wpide-ff-error);
    font-size: 0.875em;
}

.ff-message-success {
    border-radius: var(--wpide-ff-radius);
}
```

## Notes

Change the custom properties at the top for your colors.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Modern Styling for Fluent Forms" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/