Hi- I've spent hours trying to modify the CSS in the Address section of my our form. I've read and re-read and searched in the forums but I'm racking by brain with no success.
For the life of me I cannot get the address sub fields to change size. I'm trying to make the Street Address, Address Line 2, City, State, & Zip Code fields to change.
Any help is greatly appreciated.
http://bit.ly/iOI0Oe
You're constraining the width of the containing div element to 175px on line 390 of your style.css file
[css]
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {
border: 1px solid red;
width: 175px;
}There is also an overflow on that div so even if you do successfully change the width of the fields inside that div, they'll be hidden.
With the width constraint removed, you can view the source and get the input ID, then target it for CSS manipulation like this
[css]
html body #gform_wrapper_1 input#input_1_6_1 {
width:400px;
background-color:red
}screenshot: http://grab.by/afWr
Kevin,
First off- thanks for your help and quick response! Unfortunately, I'm not following what you're saying.
My question is- how can I make the Address (and it's sub fields) to look like the other input fields (Name, Email, Phone)?
I'd also like to be able to modify the State drop down list.
I've read the info at http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples and it's not helping me with my issue.
Any help is greatly appreciated.
I'm not 100% clear what you're asking for when you say you want the address to look like the other fields. Are you talking about alignment? Spacing? The address field is an advanced field with specific inputs grouped together and sized to work together in the layout.
If you prefer, you can use standard text fields to create individual fields for the street address, city, state, etc. If you create a standard drop-down for the state field, then you can modify the contents to whatever you prefer them to be.
Kevin,
I'm trying to change the fields so that they look consistent.
The fields (Name, Name of Business, Phone, Fax, Email, Address (street &, address2) should have the same CSS:
border:1px solid #803300;
font-size: 15px;
width: 150px;
background-color: #333;
color: #FFF;
padding-top: 7px;
padding-right: 3px;
padding-bottom: 7px;
padding-left: 3px;
City should be the same as above except a width of 100px
State should be the same as above except a width of 150px
Zip should be the same as above except a width of 75px
City, State, Zip should be inline.
Finally, I'd like for the Address fields (Street, Address2, City, State, Zip) to have less height (or less top/bottom margins/padding) than the other fields since they are part of a group.
I hope I've explained myself better than my first attempt.
Thanks! :-)
You can set the field size in the admin. Try setting your new zip code input to "small" so it fits inline with the other elements.
screenshot: http://grab.by/ag1m
The city, state and zip fields are not all in the same container, but rather each is contained in it's own list item. If you want to apply the same margins to these, then you'll need to target each one by id.
[css]
body .gform_wrapper input#field_1_12,
body .gform_wrapper input#field_1_13,
body .gform_wrapper input#field_1_14 {
margin:20px 0
}Again, thanks for your help.
I made the changes you noted above- Specifically, I changed the Zip from medium to small. While that made the field shorter in length, I gotta say that I'm baffled that I can't customize the field to an exact length.
Am I correct by saying I can only change the field length to small, medium or large? Look at the City field- it's too long under the medium setting, but too short under the small setting (in my form example above).
I know I probably sound crazy, but stuff like this is really important to me. I purchased the developer license hoping to use Gravity Forms on all of my client sites (which was highly recommended to me).
I have dozens of other forms I need to create, but I'm very concerned that I won't be able to customize the forms at the level I was hoping to.
Thanks for your help-
Chris
They're just inputs and all subject to CSS manipulation. Depending on your skill level, you can go wild and customize every element if you want to take the time and do so. You may have to be more specific with your CSS in some instances to override the defaults but you can still manipulate the individual elements just fine. For example:
[css]
html body .gform_wrapper .top_label li.gfield.gf_inline input#input_1_14.small {
width: 20px!important;
background-color: blue;
}screenshot: http://grab.by/ag79
There is also an option in the settings to turn off the default CSS output so you can create all of your own form CSS from scratch if you want. That way you're free to define everything to suit your needs without having to override any of the default styles.
If you click on "Settings" under the GF menu, you should see this option on the settings page: http://grab.by/agfb
