# Gravity Forms Theme With SCSS Variables

> Styles Gravity Forms from a handful of SCSS variables (accent, radius, spacing, error color), including choices, multi-page progress bars, buttons and dark mode.

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

## Code

```scss
$accent: #db2777;
$radius: 10px;
$border: #d4d4d8;
$error: #dc2626;
$gap: 1.25rem;

.gform_wrapper {
    .gform_fields {
        row-gap: $gap;
    }

    .gfield {
        input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
        select,
        textarea {
            padding: 0.75em 1em;
            border: 1px solid $border;
            border-radius: $radius;
            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.2);
            }
        }

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

    .gf_progressbar_percentage {
        background: $accent;
        border-radius: $radius;
    }

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

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

        .gform_previous_button {
            background: transparent;
            color: $accent;
            box-shadow: inset 0 0 0 2px $accent;
        }
    }

    .gfield_error {
        input,
        select,
        textarea {
            border-color: $error !important;
        }
    }

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

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

## Notes

Edit the variables at the top; written for the Gravity Forms 2.5+ markup.

## How to use it

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