# 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.

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

## Code

```css
.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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Modern Styling for WPForms" 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/