Modern Styling for WPForms
Gives WPForms 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
.wpforms-container {
--wpide-wpf-accent: #1d4ed8;
--wpide-wpf-border: #cbd5e1;
--wpide-wpf-error: #b91c1c;
--wpide-wpf-radius: 8px;
}
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
max-width: 100%;
padding: 0.7em 0.9em;
border: 1px solid var(--wpide-wpf-border);
border-radius: var(--wpide-wpf-radius);
font-size: max(16px, 1em);
}
.wpforms-container .wpforms-field input:focus-visible,
.wpforms-container .wpforms-field select:focus-visible,
.wpforms-container .wpforms-field textarea:focus-visible {
outline: 2px solid var(--wpide-wpf-accent);
outline-offset: 1px;
border-color: var(--wpide-wpf-accent);
}
.wpforms-container .wpforms-field-label {
font-weight: 600;
}
.wpforms-container button[type="submit"].wpforms-submit {
padding: 0.75em 1.6em;
border: 0;
border-radius: var(--wpide-wpf-radius);
background: var(--wpide-wpf-accent);
color: #fff;
font-weight: 600;
cursor: pointer;
}
.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error {
border-color: var(--wpide-wpf-error);
}
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
color: var(--wpide-wpf-error);
font-size: 0.875em;
}
.wpforms-confirmation-container-full {
border-radius: var(--wpide-wpf-radius);
}Notes
Change the custom properties at the top; for full control set WPForms > Settings > Include Form Styling to "Base styling only".
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.