https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields Gravity Support Forums Topic: Custom CSS for Address fields en-US Mon, 20 Apr 2026 05:10:02 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26708 Wed, 01 Jun 2011 12:23:17 +0000 David Smith 26708@https://legacy.forums.gravityhelp.com/ <p>If you click on "Settings" under the GF menu, you should see this option on the settings page: <a href="http://grab.by/agfb" rel="nofollow">http://grab.by/agfb</a> </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26686 Wed, 01 Jun 2011 08:43:09 +0000 webmktco 26686@https://legacy.forums.gravityhelp.com/ <p>OK- I got a good night of sleep and I'm ready to get this thing right!</p> <p>How do I turn off the default CSS? </p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26682 Wed, 01 Jun 2011 05:44:53 +0000 Kevin Flahaut 26682@https://legacy.forums.gravityhelp.com/ <p>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:</p> <pre><code>[css] html body .gform_wrapper .top_label li.gfield.gf_inline input#input_1_14.small { width: 20px!important; background-color: blue; }</code></pre> <p>screenshot: <a href="http://grab.by/ag79" rel="nofollow">http://grab.by/ag79</a></p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26679 Wed, 01 Jun 2011 00:25:01 +0000 webmktco 26679@https://legacy.forums.gravityhelp.com/ <p>Again, thanks for your help.</p> <p>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. </p> <p>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).</p> <p>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).</p> <p>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.</p> <p>Thanks for your help-</p> <p>Chris </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26676 Tue, 31 May 2011 22:31:56 +0000 Kevin Flahaut 26676@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>screenshot: <a href="http://grab.by/ag1m" rel="nofollow">http://grab.by/ag1m</a></p> <p>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.</p> <pre><code>[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 }</code></pre> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26675 Tue, 31 May 2011 22:14:47 +0000 webmktco 26675@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>I'm trying to change the fields so that they look consistent.</p> <p>The fields (Name, Name of Business, Phone, Fax, Email, Address (street &amp;, address2) should have the same CSS:<br /> border:1px solid #803300;<br /> font-size: 15px;<br /> width: 150px;<br /> background-color: #333;<br /> color: #FFF;<br /> padding-top: 7px;<br /> padding-right: 3px;<br /> padding-bottom: 7px;<br /> padding-left: 3px;</p> <p>City should be the same as above except a width of 100px<br /> State should be the same as above except a width of 150px<br /> Zip should be the same as above except a width of 75px</p> <p>City, State, Zip should be inline.</p> <p>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.</p> <p>I hope I've explained myself better than my first attempt. </p> <p>Thanks! :-) </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26669 Tue, 31 May 2011 19:41:11 +0000 Kevin Flahaut 26669@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26668 Tue, 31 May 2011 19:22:17 +0000 webmktco 26668@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>First off- thanks for your help and quick response! Unfortunately, I'm not following what you're saying. </p> <p>My question is- how can I make the Address (and it's sub fields) to look like the other input fields (Name, Email, Phone)? </p> <p>I'd also like to be able to modify the State drop down list.</p> <p>I've read the info at <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> and it's not helping me with my issue.</p> <p>Any help is greatly appreciated. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26666 Tue, 31 May 2011 19:05:23 +0000 Kevin Flahaut 26666@https://legacy.forums.gravityhelp.com/ <p>You're constraining the width of the containing div element to 175px on line 390 of your style.css file</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red; width: 175px; }</code></pre> <p>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.</p> <p>With the width constraint removed, you can view the source and get the input ID, then target it for CSS manipulation like this</p> <pre><code>[css] html body #gform_wrapper_1 input#input_1_6_1 { width:400px; background-color:red }</code></pre> <p>screenshot: <a href="http://grab.by/afWr" rel="nofollow">http://grab.by/afWr</a> </p> https://legacy.forums.gravityhelp.com/topic/custom-css-for-address-fields#post-26647 Tue, 31 May 2011 16:01:37 +0000 webmktco 26647@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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, &amp; Zip Code fields to change.</p> <p>Any help is greatly appreciated.<br /> <a href="http://bit.ly/iOI0Oe" rel="nofollow">http://bit.ly/iOI0Oe</a> </p>