carnavat
Member
Im trying to set up the css classes necessary to make my form look like my design. http://www.studioc5.com/clients/pp/after2.html
Im having trouble making the fields skinnier, and just all around my css is a mess. especially when trying to style the error messages.
Here is the code I have, Im hoping there is a much cleaner way to get this done. This didnt work at all.
Can you post a link to your actual form by chance?
I'm gonna edit out your login credentials of the previous post - I didn't see a URL here though. Can you email me the site URL and the login creds to rob@rocketgenius.com
Drop this in place of the style you have for this selector (I just changed the padding, by adding the 5px !important because you have a 10px !important on just the regular input element):
[css]
#gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="url"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="phone"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 input[type="password"] {
padding: 5px !important;
margin: 0px;
border-radius: 0px;
border: none;
width: 110px;
}
carnavat
Member
Im unsure what to do for the error message styling. If you click submit without the proper fields filled in the error messages display and the form expands down the page and everything overlaps. Its a mess. Can I also change the color of the red asterisk for the required fields?
Well, your space is severely limited with what you've got going on. First things first, I'd hide all of the error messages and then maybe change the input background color to a light reddish color to signify it needs to be filled out. Then you won't have to worry about the extra spacing for extra verbiage.
Try this out.
[css]
#gform_wrapper_1 .validation_message, #gform_wrapper_1 .validation_error {
display: none;
}
.gform_wrapper .gfield_required {
color: white !important;
}
#gform_wrapper_1 li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background: none;
border: none;
margin: 0 !important;
}
.gform_validation_error #gform_1 {
padding-top: 0;
}
li.gfield_error input[type="text"], li.gfield_error input[type="url"], li.gfield_error input[type="email"], li.gfield_error input[type="tel"], li.gfield_error input[type="number"], li.gfield_error input[type="number"], li.gfield_error input[type="password"] {
background-color: #FD7575;
}Get rid of this declaration and I also noticed in some of your input type declarations you have "phone" instead of "tel":
[css]
#gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label, #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container {
width: 32%;
}
carnavat
Member
Im having a problem with this css in chrome. When viewing the form in error mode- the form looks fine in firefox but in chrome the fields go under the lables instead of to the right of the lables. If I remove that 32% from the css above, the fields go back to the right but the width of the lables is now shrunk, causing the words like first name to wrap to two lines...
carnavat
Member
Im still having the issue. the site is http://www.peakgymstl.com. I have it locked since its in development.... Something just isnt matching up with the error css. Im losing or gaining some padding I think, and its causes the fields the were to the right of the labels to go under the labels and the labels wrap if they are two words...
This is the design Im working on if you want to see what look Im trying to achieve. - http://www.studioc5.com/clients/pp/after2.html
#gform_wrapper_1 ul.right_label li { margin-bottom:0px; width:100px;}
#gform_wrapper_1 ul.right_label li, #gform_wrapper_1 form ul.right_label li, #gform_wrapper_1 ul.left_label li, #gform_wrapper_1 form ul.left_label li, #gform_wrapper_1 li, #gform_wrapper_1 form li { margin-bottom:1px; height:28px;}
#gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="url"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="phone"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 input[type="password"] {
padding: 5px 0px 5px 5px !important;
margin: 0px;
border-radius: 0px;
border: none;
width: 110px;
}
#gform_wrapper_1 form { background: url("images/7-Day-Free-Peak-Pass-Background.png") repeat; border-radius: 0px 0px 10px 10px; width:223px; padding:8px 5px 3px 10px}
#gform_wrapper_1 .gform_footer.right_label, #gform_wrapper_1 .gform_footer.left_label { padding:0px 0px 5px 85px; margin-top:-5px; }
#gform_wrapper_1 .left_label .gfield_label { width:33%; text-align:right; color:#FFFFFF; }
body .gform_wrapper .gform_body .gform_fields #field_1_6.gfield .gfield_label { width:79%; text-align:left; font-size:10px; line-height:15px;}
#gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container { height:10px; line-height:10px;}
#gform_wrapper_1 .validation_message, #gform_wrapper_1 .validation_error {
display: none;
}
.gform_wrapper .gfield_required {
color: white !important;
}
#gform_wrapper_1 li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background: none;
border: none;
margin: 0 !important;
}
.gform_validation_error #gform_1 {
padding-top: 0;
}
li.gfield_error input[type="text"], li.gfield_error input[type="url"], li.gfield_error input[type="email"], li.gfield_error input[type="tel"], li.gfield_error input[type="number"], li.gfield_error input[type="number"], li.gfield_error input[type="password"] {
background-color: #FD7575;
}
#gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label, #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container {
}
#gform_wrapper_1 .gfield_html.gfield_no_follows_desc{ margin:0px 20px 10px 0px; color:#FFFFFF; float:right; font-size:11px; height:15px; padding:0px; }
.header-top { float:right; height:35px; }