Reduce vertical spacing between Gravity Forms fields

To reduce the spacing between vertical forms fields you can remove the upper wrapper to push things up a bit, add this css code to your stylesheet.

body .gform_wrapper ul li.gfield {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gform_wrapper .top_label .gfield_label {
display: none;
}

Hide the "required" * with Gravity Forms

If you want the * to not appear if a field is required but I still want to be able to use the "required" functionality. Add the following to your CSS file.

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

Add a background and border to Gravity Forms


 Want to add background and border with radius. Simply add this css code to your style.css file.
 
.gform_wrapper {
    background-color: #339999;
    border: 1px solid #112233;
    border-radius: 8px;
    padding: 20px;
}

Add line under active menu item

To add a line under each active menu item in Divi, paste the below code to suit.



 #top-menu li.current-menu-item > a {
border-bottom: 8px solid #00a94f;
font-weight: bold;
padding-bottom: 23px !important;
}

 

Editing the Gravity Forms validation error with CSS

You can add and modify this CSS code to your stylesheet to change the look of the Validation Error message.

.gform_wrapper div.validation_error {
    color: #000 !important;
    font-size: 100% !important;
    font-weight: normal !important;
    border: 1px solid #e8e8e8 !important;
    padding: 1em 0px 1em 20px !important;
    } 1em 0px 1em 20px !important; 8 }