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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.