If you have a heavily designed website and are using Gravity Forms* chances are a default form will stand out in a negative way. Some CSS can get your form matching the rest of your site so everything looks more cohesive and consistent.
* this is an affiliate link
Notes
I’ve included general styling for commonly used fields but the forms can be customized further. There are plenty more GF bits that can be changed, especially if using add-ons or extensions. Let me know in the comments if you need more styling help (live link required).
The checkboxes and radios are using Elegant Themes’ icon font and can be changed.
CSS Code
[css]
/*** GRAVITY FORM ***/
.gform_wrapper {
background-color: #F3ECE2;
padding: 30px 25px;
border-radius: 15px;
}
/*** 'REQUIRED' TEXT ***/
.gform_wrapper .gfield_required {
color: #FF6347;
}
/*** SECTIONS ***/
.gform_wrapper.gravity-theme .gsection {
margin-top: 1em;
border-color: #fff;
}
h3.gsection_title {
font-size: 28px;
font-weight: bold;
font-style: italic;
color: #F08080;
padding-bottom: 0;
}
.gform_wrapper.gravity-theme .top_label .gsection_description {
color: #666;
}
/*** DROPDOWN ***/
.gform_wrapper select {
color: #666;
background: rgba(255,255,255,0.4);
border: 1px solid #fff;
height: 42px; /* might need adjusting */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*** DESCRIPTIVE AND OTHER SMALL TEXT ***/
.gform_wrapper.gravity-theme .gfield_header_item, .gform_wrapper.gravity-theme .gform_fileupload_rules, .gform_wrapper.gravity-theme .ginput_complex label {
color: #666;
}
/*** DATE PICKER ***/
.gform-theme-datepicker:not(.gform-legacy-datepicker) {
background-color: #FFE4E1;
border: 0;
}
.gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default {
background-color: #F08080; /* selected date */
border-color: #F08080;
}
.gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
background-color: #fff; /* dates in prev and next month */
}
.gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-state-default:hover {
border-color: #F08080; /* date on hover */
}
.gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-header {
background: transparent;
}
.gform_wrapper.gravity-theme .ginput_container_date img.ui-datepicker-trigger {
opacity: 0.6; /* calendar icon is an image */
}
/*** FIELD STYLING ***/
.gform_wrapper.gravity-theme .gfield_label {
color: #666; /* label text */
font-size: 16px;
}
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper textarea.medium, .gform_wrapper textarea.large {
background: rgba(255,255,255,0.4); /* input field */
border: 1px solid #fff;
color: #666;
}
.gform_wrapper input[type=number]:focus, .gform_wrapper input[type=tel]:focus, .gform_wrapper input[type=email]:focus, .gform_wrapper input[type=text]:focus, .gform_wrapper input.text:focus, .gform_wrapper input.title:focus, .gform_wrapper textarea:focus {
background-color: #fff !important;
}
/*** FILE UPLOAD ***/
.gfield--type-fileupload button {
font-size: 13px !important;
}
.gform_wrapper.gravity-theme .gform_fileupload_rules {
font-size: 13px;
font-style: italic;
}
/*** RADIO AND CHECKBOXES ***/
.gform_wrapper.gravity-theme .gfield-choice-input {
visibility: hidden;
width: 0;
}
.gform_wrapper ul.gfield_checkbox li input[type=checkbox], .gform_wrapper ul.gfield_radio li input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}
.gform_wrapper input[type=checkbox] + label, .gform_wrapper input[type=radio] + label {
font-size: 16px;
}
.gform_wrapper input[type=checkbox] + label:hover, .gform_wrapper input[type=radio] + label:hover {
cursor: pointer;
}
.gform_wrapper.gravity-theme .gfield-choice-input+label {
padding-left: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
.gform_wrapper input[type=checkbox] + label:before, .gform_wrapper input[type=radio] + label:before {
font-family: 'ETmodules' !important; /* using ET icon font */
font-size: 20px;
font-weight: bold;
color: #666; /* color of radio or checkbox */
position: relative;
top: 3px;
margin-right: 5px;
margin-left: -30px;
}
.gform_wrapper li.gf_list_inline ul.gfield_checkbox li, .gform_wrapper li.gf_list_inline ul.gfield_radio li {
display: -webkit-inline;
display: -moz-inline;
display: inline;
}
.gform_wrapper input[type=checkbox] + label:before {
content: '\56'; /* checkbox icon */
}
.gform_wrapper input[type=checkbox] + label:hover:before {
content: '\5a'; /* checkbox icon on hover */
filter: alpha(opacity=40);
opacity: 0.4;
}
.gform_wrapper input[type=checkbox]:checked + label:before {
content: '\5a'; /* checkbox icon selected */
color: #F08080;
}
.gform_wrapper input[type=checkbox]:checked + label:hover:before {
color: #F08080;
filter: alpha(opacity=100);
opacity: 1;
}
.gform_wrapper input[type=radio] + label:before {
content: '\5b'; /* radio icon */
}
.gform_wrapper input[type=radio] + label:hover:before {
content: '\5c'; /* radio icon on hover */
filter: alpha(opacity=40);
opacity: 0.4;
}
.gform_wrapper input[type=radio]:checked + label:before {
content: '\5c'; /* radio icon selected */
color: #F08080;
}
.gform_wrapper input[type=radio]:checked + label:hover:before {
color: #F08080;
filter: alpha(opacity=100);
opacity: 1;
}
/*** BUTTON STYLING ***/
.gform_wrapper button, .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
background: #BC8F8F;
color: #fff;
border: 0;
border-radius: 3px !important; /* desktop and mobile can render differently, check if you need this */
padding: .3em 1em; /* Divi default button padding */
cursor: pointer;
font-size: 18px;
font-weight: bold;
-webkit-transition: all 0.2s; /* adding transition that comes with Divi buttons */
-moz-transition: all 0.2s;
transition: all 0.2s;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper button:hover, .gform_wrapper .gform_footer input[type=submit]:hover {
background: #F08080;
}
[/css]
0 Comments