# Contact Form 7 Theme With SCSS Variables

> A complete Contact Form 7 look written in SCSS: set a few variables for colors, radius and spacing and every field, checkbox, message and button follows.

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

## Code

```scss
$accent: #7c3aed;
$radius: 10px;
$gap: 1.1rem;
$border: #d4d4d8;
$error: #e11d48;

.wpcf7 {
    form > p,
    form > div {
        margin: 0 0 $gap;
    }

    input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 0.75em 1em;
        border: 1px solid $border;
        border-radius: $radius;
        background: #fff;
        color: #18181b;
        font-size: max(16px, 1em);
        transition: border-color 0.15s, box-shadow 0.15s;

        &:focus {
            outline: none;
            border-color: $accent;
            box-shadow: 0 0 0 3px rgba($accent, 0.25);
        }
    }

    .wpcf7-list-item {
        margin: 0 1em 0.4em 0;
    }

    input[type="checkbox"],
    input[type="radio"] {
        accent-color: $accent;
        width: 1.1em;
        height: 1.1em;
    }

    input[type="submit"] {
        padding: 0.8em 1.8em;
        border: 0;
        border-radius: $radius;
        background: $accent;
        color: #fff;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            background: darken($accent, 8%);
        }
    }

    .wpcf7-not-valid {
        border-color: $error !important;
    }

    .wpcf7-not-valid-tip {
        color: $error;
        font-size: 0.85em;
    }

    @media (prefers-color-scheme: dark) {
        input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea {
            background: #18181b;
            color: #f4f4f5;
            border-color: #3f3f46;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        input,
        select,
        textarea {
            transition: none;
        }
    }
}
```

## Notes

Edit the variables at the top; the dark-mode block follows the visitor's system setting.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Contact Form 7 Theme With SCSS Variables" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/