How to Style Gravity Forms

Courtney Goodling
Published on June 22, 2021

Gravity Forms is a powerful tool that should be in every WordPress developer’s tool kit. It is a plugin that builds online forms quickly and easily. It has many options of what sort of fields are needed and conditional logic that you don’t have to write on your own. This article will be a quick guide that will act as a framework to set up a simple Gravity Form. They are separated into CSS blocks, and each will show different aspects of the form.

Form Fields

First, we will be setting up a basic style for the form field, and it will just be a white background with black input text. Also, the hex code is a shorthand, so instead of RRGGBB, it is just RGB. That being said, a good rule of thumb is only to use this if the first three and the last three are in the same order, like black and white. This is because not all browsers will read it the same, so it might change your color pallet.

input[type=text], textarea {

background: #fff;
border-color: #000;
border-radius: 3px;
border-width: 2px;
color: #000;
padding: 16px !important;
align-content: center;

}

Buttons

Here we are setting up the color for the background and text, along with the font size and border on the button. We also added some padding to make it look nice and easy to read. The padding is written in shorthand, the order being top, right, bottom, and left. In this code, we are only using the top and right padding.

.gform_wrapper .gform_footer input.button {

background: #000;
font-size: 20px;
color: #fff;
padding: 15px 30px;
border-color: transparent;
letter-spacing: 2px;
cursor: pointer;
border-radius: 0px;

}

Buttons When Hovering

When your visitors hover over this button, there will be a small visual change. Above, we made the button white with black text. With this next code, when someone hovers over it, the button will turn black, and the text will turn white. Here is how we set up that change.

.gform_wrapper .gform_footer input.button:hover {

background: #484848;
color:#fff;

}

Errors

When you need to have visitors fill out a specific field in your forms, you still want any error message to look nice. This code customizes the “This field is required” error message. As a note, sometimes the Gravity Forms styles are resistant to change if that happens. “!important” will tell your browser to use that CSS over any other that might exist on the page.

.gform_wrapper div.validation_error {

color: #c14e4d !important;
font-size: 100% !important;
font-weight: normal !important;

}

This next part is just adding a border around the error labels and adding margins.

.gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning{

background-color: transparent;
margin-bottom: 6px !important;
border-top: 0px;
border-bottom: 0px;
padding-bottom: 6px;
padding-top: 5px;
box-sizing: border-box;

}

Then we set the error’s text and background color.

gform_wrapper .gfield_error .gfield_label, .gform_wrapper .validation_message {

color: #fff !important;

}

gform_wrapper div.validation_error {

background: #C14E4D;

}

This is where you would add the padding and color.

.gform_wrapper .gfield_label, .gform_wrapper {

color: #fff !important;

}

This Highlights the fields that have an error.

gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container, .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label {

margin-top: 12px;
background: #C14E4D;
padding: 5px;

}

Form Focus

When your visitor clicks on a form, the input field border color will change. This shows that they are active and gives the user a visual cue that the form is working.

input[type=“date”]:focus, input[type=“email”]:focus, input[type=“number”]:focus, input[type=“password”]:focus, input[type=“search”]:focus, input[type=“tel”]:focus, input[type=“text”]:focus, input[type=“url”]:focus, select:focus, textarea:focus {

background: #fff !important;
color: #000 !important;
border: 5px solid #A2A2A2 !important;

}

Display Date

This code will make it so that the month and day are displayed inline.

.ui-datepicker-month, .ui-datepicker-year {

display: inline-block !important;
width: 78px !important;

}

My Website spot is always willing to provide FREE advice. If you have any questions, need assistance on getting started with your website goals, or just want to give us feedback on this article, We’d love to hear from you! Drop us a line, and we’ll get in touch!