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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.