Simple Gravity Forms CSS to Easily Modernize The Style of Fields

Published: May 19, 2023

The provided CSS code aims to modernize the appearance of form fields in Gravity Forms, a popular WordPress form plugin. Here’s a breakdown of what it does:

It sets consistent styles for various form field types such as select, textarea, input[type=text], input[type=password], and more. It defines properties like display, height, border, padding, font size, color, background color, border radius, and box shadow to create a unified look.
The code also defines focus styles for form fields, which change the border color and add a box shadow when the user interacts with the field.
Form field labels receive their own styling, including color, font size, text transformation, positioning, background, padding, and margins.
Additional styles for specific form field types are specified, such as input[type=color], input[type=date], and more.
The code sets styles for submit buttons, including height.
There are also styles for large input and select fields, as well as for required field indicators.

Overall, this CSS code enhances the visual appeal and consistency of Gravity Forms by providing a modernized and professional look to the form fields.

/*GRAVITY FORMS CUSTOM STYLES*/

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
    display: inline-block;
    height: 4.5em !important;
    border: 1px solid #7e86aa;
    padding: 1em;
    font-size: 12px !important;
    line-height: normal;
    color: #051143;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    border: 1px solid blue !important;
    box-shadow: 0em 0.5em 2em 0em rgba(0,0,0,0.1) !important;
}

/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
    color: #7e86aa;
    font-size: 0.65em;
    text-transform: uppercase;
    position: absolute;
    background: white;
    padding: 0.25em 1em;
    margin-top: -8px;
    margin-left: 5px;
    transition: color 0.3s ease;
    max-width: fit-content;
    border-bottom: none;
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
    color: blue;
}

/* Spacing */
.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 30px !important;
}

/* Additional styles for Gravity Forms theme */
.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
    padding: 1em !important;
}

/* Submit button styles */
.gform_wrapper.gravity-theme #field_submit .gform-button--width-full,
.gform_wrapper.gravity-theme .gform_footer .gform-button--width-full {
    height: 4em;
}

/* Large input and select styles */
.gform_wrapper.gravity-theme .gfield input.large,
.gform_wrapper.gravity-theme .gfield select.large {
    height: 4em;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: #c02b0a;
    display: inline-block;
    font-size: 0.85em;
    padding-left: 0.5em;
}