Gravity Form Styling (WordPress)

3d Animation

CSS Styling for Gravity Forms in WordPress.


/* Gravity Forms */

#contactformHolder {
border: 1px solid #555659;
padding: 5% 10% 10%;
margin-bottom: 0px;
margin-top: 0px;
border-radius: 5px;
}

#contactformHolder #gform_wrapper_1 {
color: #60249e;
margin-bottom: 0;
background-color: #fff;
margin-top: 0;
}

#contactformHolder span.gfield_required {
font-weight: normal;
font-style: normal;
color: #60249e;
}

#contactformHolder textarea,
#contactformHolder .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
padding: 8px 10px;
letter-spacing:normalwidth: 1px;
width: 100%;
border: 1px solid #60249e;
font-weight: bold;
font-size: 1.2em;
-webkit-appearance: none;
border-radius: 0;
margin-bottom: 15px;
}

#contactformHolder textarea {
height: 150px;
}

#contactformHolder label {
font-size: 1em;
font-weight: normal;
font-style: normal;
margin-bottom: 0;
}

#contactformHolder .gform_footer.top_label {
margin-top: 5px;
margin-bottom: 0;
padding-top: 0;
}

#contactformHolder input#gform_submit_button_1 {
background-color: #5ea40e;
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;
}

#contactformHolder input#gform_submit_button_1:hover {
background-color: #78cf14;
}

/* Gravity Forms - error messages */

#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;
}

#contactformHolder .gform_wrapper div.validation_error{color:#ba0202;font-size:1em;font-weight:700;margin-bottom:25px;border-top:2px solid #ba0202;border-bottom:2px solid #ba0202;padding:16px 0;clear:both;width:100%;text-align:center}

/* Gravity Forms - Confirmation Screen */

#contactformHolder .gform_confirmation_message {
padding: 30px;
text-align: left;
font-size: 1.2em;
font-weight: bold;
background-color: #e7e0ee;
}