Gravity Form Styling (WordPress)

3d Animation

CSS Styling for Gravity Forms in WordPress.


/* Gravity Forms */
 
#contactformHolder {
border: 1px solid #c21713;
padding: 5% 10% 10%;
margin-bottom: 20px;
margin-top: 10px;
border-radius: 5px;
}
 
#contactformHolder #gform_wrapper_1 {
color: #000;
margin-bottom: 0;
background-color: #fff;
margin-top: 0;
}

.gform_required_legend {
	display: none;
}
 
#contactformHolder span.gfield_required {
font-weight: normal;
font-style: normal;
color: #c21713;
}
 
#contactformHolder textarea,
#contactformHolder .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
font-family: 'Montserrat', sans-serif;
padding: 8px 10px;
letter-spacing:normalwidth: 1px;
width: 100%;
border: 1px solid #c21713;
font-weight: bold;
font-size: 1.1em;
-webkit-appearance: none;
border-radius: 0;
margin-bottom: 0px;
}
 
#contactformHolder textarea {
height: 150px;
}
 
#contactformHolder label {
font-size: 1em;
font-weight: normal;
font-style: normal;
margin-bottom: 8px;
}
 
#contactformHolder .gform_footer.top_label {
margin-top: 5px;
margin-bottom: 0;
padding-top: 0;
}

.gform-theme--foundation #gform_fields_1 {
  grid-row-gap: 20px !important;
}
 
#contactformHolder input#gform_submit_button_1 {
font-family: 'Montserrat', sans-serif;
background-color: #c21713;
background-image: none;
border-style: none;
color: #FFF;
padding-top: 5%;
font-size: 1.6em;
padding-bottom: 5%;
text-align: center;
-webkit-appearance: none;
border-radius: 5px;
transition-property: background-color;
transition-duration: .6s;
transition-timing-function: ease-out;
width: 100%;
font-weight: 800;
margin-right: 0;
	margin-top: 15px;
}
 
#contactformHolder input#gform_submit_button_1:hover {
background-color: #e51611;
}
 
/* Gravity Forms - error messages */

#contactformHolder .gform_validation_errors {
	display: none;
}
 
#contactformHolder .gform_wrapper .gfield_error .gfield_label{
color: #ba0202;
background-color: #fefffe;
font-weight: bold;
}
 
#contactformHolder .gfield_description.validation_message {
color: #ba0202;
padding-top: 0;
padding-bottom: 15px;
}
 
/* Gravity Forms - Confirmation Screen */
 
#contactformHolder .gform_confirmation_message {
padding: 30px;
text-align: left;
font-size: 1.2em;
font-weight: bold;
background-color: #fff;
}

Trouble Shooting Gravity Forms CSS Styling

Reduce vertical space between fields using CSS in Gravity Forms


.gform-theme--foundation #gform_fields_1 {
  grid-row-gap: 20px !important;
}