- How to make Gravity Forms submit button full-width.
- Adding a submit button box shadow.
- Change submit button background color to a smooth gradient.
- Change submit button height.
- Change form border radius.
- Change form input background color to match Divi Builder.
- Change link color.
- Change progress bar step number color.
- Change progress bar background color.
- Change progress bar fill color.
- Change asterisk color for required fields.
- Change text field border-radius.
- Make form title bold and increase font-size.
- Make form description bold and change text color.
- Add an underline to all field descriptions.
- Change field sublabel text color.
- Change the date field background color.
- Change password strength meter background color.
How to make Gravity Forms submit button full-width.
/* Applies to all forms */
body .gform_wrapper .gform_footer input[type=submit] {
width: 100%;
min-width: 100%;
max-width: 100%;
}Adding a submit button box shadow.
/* Applies to all forms */
body .gform_wrapper .gform_footer input[type=submit] {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}Change submit button background color to a smooth gradient.
/* Applies to all forms */
body .gform_wrapper .gform_footer input[type=submit] {
background: rgb(196,112,233);
background: linear-gradient(90deg, rgba(196,112,233,1) 39%, rgba(88,205,193,1) 65%);
}Change submit button height.
/* Applies to all forms */
body .gform_wrapper .gform_footer input[type=submit] {
height: 60px;
line-height: 10px;
}Change form border radius.
/* Applies to all forms */
.gform_wrapper {
border-radius: 30px;
}Change form input background color to match Divi Builder.
/* Applies to all forms */
body .gform_wrapper .gform_body .gform_fields .gfield input {
background: radial-gradient(circle at top left,#4a42ec 0%,#521d91 100%);
}Change link color.
/* Applies to all forms */
.gform_wrapper a {
color: midnightblue;
text-decoration: none;
}Change progress bar step number color.
/* Applies to all forms */
.gform_wrapper .gf_progressbar_title {
color: orange;
}Change progress bar background color.
/* Applies to all forms */
.gform_wrapper .gf_progressbar_blue {
background: rgba(29,29,31,0.6) !important;
}Change progress bar fill color.
/* Applies to all forms */
.gform_wrapper .gf_progressbar_percentage.percentbar_blue {
background-color: red !important;
}Change asterisk color for required fields.
/* Applies to all forms */
.gform_wrapper .gfield_required {
color: midnightblue;
}Change text field border-radius.
/* Applies to all forms */
.gform_wrapper .gfield textarea.large, textarea.medium, textarea.small {
border-radius: 8px !important;
}Make form title bold and increase font-size.
/* Applies to all forms */
h2.gform_title {
font-weight: bold;
font-size: 35px;
}Make form description bold and change text color.
/* Applies to all forms */
.gform_description {
color: midnightblue;
font-weight: bold;
}Add an underline to all field descriptions.
/* Applies to all forms */
.gform_wrapper .gfield_label {
text-decoration: underline;
}Change field sublabel text color.
/* Applies to all forms */
.gform_wrapper .description, .gform_wrapper .gfield_description, .gform_wrapper .gsection_description, .gform_wrapper .instruction {
color: darkgray;
}Change the date field background color.
/* Applies to all forms */
.gform-theme-datepicker:not(.gform-legacy-datepicker) {
background: black;
}Change password strength meter background color.
/* Applies to all forms */
.gfield_password_strength.short {
background-color: #e3e3e3 !important;
}
.gfield_password_strength.bad {
background-color: red !important;
}
.gfield_password_strength.good {
background-color: yellow !important;
}
.gfield_password_strength.strong {
background-color: green !important;
}