Last active
April 1, 2020 21:24
-
-
Save SteveRyan-ASU/f08cb3f0cb674f627632dcef32c9d1d8 to your computer and use it in GitHub Desktop.
Lightweight CSS rules for delivering a form via Gravity Forms that looks halfway decent.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Substitute your own ID for the form that you want to style. | |
// Working example is here: https://faculty-resources.engineering.asu.edu/ Workshop page. | |
#gform_wrapper_1 { | |
background-color:#e0e0e0; | |
padding:2em; | |
color:#000000; | |
} | |
#gform_1 .gform_title { | |
background-color:#222222; | |
color:#ffc627; | |
font-weight:700; | |
font-size:2rem; | |
padding:5px 10px; | |
margin:-10px 0 0 -50px; | |
} | |
#gform_1 .percentbar_blue { | |
background-color: #8c1d40; | |
} | |
#gform_1 .gfield { | |
padding:.75em 0 1.5em 0; | |
border-bottom:1px solid #f0f0f0 | |
} | |
#gform_1 .gform_button, | |
#gform_1 .gform_next_button, | |
#gform_1 .gform_previous_button { | |
background-color:#8c1d40; | |
color:#ffffff; | |
font-weight:700; | |
border-radius:5px; | |
padding:10px 15px; | |
font-size:20px; | |
} | |
#gform_1 .validation_error { | |
background-color:#8c1d40; | |
color:#ffffff; | |
font-weight:700; | |
} | |
#gform_1 .gfield_error { | |
background-color:#ffc627; | |
} | |
#gform_1 li.gfield.gfield_error { | |
background-color:rgba(255,198,39,.25); | |
color:#8c1d40; | |
border-top: 2px solid #ffc677; | |
border-bottom: 2px solid #ffc677; | |
} | |
#gform_1 li.gfield.gfield_error .gfield_description.validation_message { | |
background-color: #222222; | |
color: #8c1d40; | |
font-weight: 700; | |
color: #ffffff; | |
font-size: 16px; | |
display: block; | |
margin-left: -10px; | |
margin-top: 20px; | |
width: fit-content; | |
padding: 10px; | |
} |
Updated again to include a maroon-ish progress bar and styled buttons for multi-page forms.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated gist to remove rules that were specific for the original project.