# Clean Modern Styling for Gravity Forms

> Gives Gravity Forms fields rounded borders, comfortable spacing, a visible focus ring, clear error colors and a bold submit button, while following your theme's fonts.

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

## Code

```css
.gform_wrapper {
    --wpide-gf-accent: #0f766e;
    --wpide-gf-border: #cbd5e1;
    --wpide-gf-error: #b91c1c;
    --wpide-gf-radius: 8px;
}

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
    padding: 0.7em 0.9em;
    border: 1px solid var(--wpide-gf-border);
    border-radius: var(--wpide-gf-radius);
    font-size: max(16px, 1em);
    line-height: 1.4;
}

.gform_wrapper .gfield input:focus-visible,
.gform_wrapper .gfield select:focus-visible,
.gform_wrapper .gfield textarea:focus-visible {
    outline: 2px solid var(--wpide-gf-accent);
    outline-offset: 1px;
    border-color: var(--wpide-gf-accent);
}

.gform_wrapper .gfield_label {
    font-weight: 600;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer input[type="button"] {
    padding: 0.75em 1.6em;
    border: 0;
    border-radius: var(--wpide-gf-radius);
    background: var(--wpide-gf-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: var(--wpide-gf-error);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    color: var(--wpide-gf-error);
    background: none;
    border: 0;
    padding: 0.3em 0 0;
}

.gform_wrapper .gform_validation_errors {
    border-radius: var(--wpide-gf-radius);
}
```

## Notes

Built for the Gravity Forms 2.5+ markup; 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 "Clean Modern Styling for Gravity 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/