# Modern Styling for Contact Form 7

> Gives Contact Form 7 forms clean full-width fields, clear focus outlines, readable error messages and a solid submit button that work in light and dark themes.

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

## Code

```css
.wpcf7 {
    --wpide-cf7-accent: #2563eb;
    --wpide-cf7-border: #cbd5e1;
    --wpide-cf7-error: #dc2626;
    --wpide-cf7-success: #16a34a;
    --wpide-cf7-radius: 8px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.7em 0.9em;
    border: 1px solid var(--wpide-cf7-border);
    border-radius: var(--wpide-cf7-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: max(16px, 1em);
}

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

.wpcf7 label {
    display: block;
    font-weight: 600;
}

.wpcf7 input[type="submit"] {
    padding: 0.75em 1.6em;
    border: 0;
    border-radius: var(--wpide-cf7-radius);
    background: var(--wpide-cf7-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: progress;
}

.wpcf7 .wpcf7-not-valid {
    border-color: var(--wpide-cf7-error);
}

.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 0.3em;
    color: var(--wpide-cf7-error);
    font-size: 0.875em;
}

.wpcf7 form .wpcf7-response-output {
    margin: 1em 0 0;
    padding: 0.8em 1em;
    border-radius: var(--wpide-cf7-radius);
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--wpide-cf7-success);
}
```

## Notes

Change the custom properties at the top to match your brand colors.

## How to use it

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