PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Reduce Gravity Forms height in CSS

  1. I'm sorry to have to post this. But I just can't seem to decrease the distance in height between my fields and thus, the whole form alltogheter. I want it to be tighter in general.

    Which CSS should I edit?

    Posted 9 years ago on Tuesday March 2, 2010 | Permalink
  2. Depending on your form orientation (top label, left label, etc.) different values will affect the spacing.. for a default top label type form, the field label margins are the biggest influence.

    As far as which CSS, you'll want to make any custom CSS changes/additions in your theme style sheet and not directly in the CSS in the Gravity Forms folder. That way you can avoid losing any information when you run the automatic updates.

    You can start off by adding this to the bottom of your theme style sheet.

    .gform_wrapper .top_label .gfield_label {
    	margin:2px 0 2px 0!important;
    }

    Tweak the values to your preference. Here's a screenshot of my test form with that one change.

    If you have a lot of customization to do, you may want to copy the entire contents of the forms.css file in the Gravity Forms folder, append that to the bottom of your theme style sheet and then go into the Gravity Forms settings page and uncheck the "output css" option. This will disable the default style sheet and let you comfortably customize all the css from the theme style sheet.

    Hope that points you in the right direction.

    Posted 9 years ago on Tuesday March 2, 2010 | Permalink
  3. Thanks! It does put me in the right direction. I am gonna tweak away now :) I will be back if I have more questions. Quick response you guys!

    Robert

    Posted 9 years ago on Tuesday March 2, 2010 | Permalink
  4. travin
    Member

    So I used the above code to reduce the spacing of my "Tell A Friend" form found at the bottom of the page here: http://www.freeclassifedproducts.com

    I need smaller spacing between the fields if possible and also need to make the submit button shift up. I tried adding the .gform footer bit but guess I didn't get that right.

    Thanks in advance

    Posted 8 years ago on Friday March 18, 2011 | Permalink
  5. @travin, I can't see your form page to help out.

    http://grab.by/9xJ7

    Posted 8 years ago on Friday March 18, 2011 | Permalink
  6. travin
    Member

    http://www.freeclassifiedproducts.com

    Left out the "i", sorry.

    Posted 8 years ago on Friday March 18, 2011 | Permalink
  7. Try adding this to the end of your theme's style.css file

    .footer-widget .gform_wrapper ul li {
        padding: 0;
        background-image: none;
    }
    
    #gform_wrapper_2.gform_wrapper .gform_footer {
        padding: 0;
    }

    screenshot: http://grab.by/9y5c

    Posted 8 years ago on Friday March 18, 2011 | Permalink
  8. I'm relatively new to Gravity Forms and I love it! Have already created a handful of forms for an html site that I'm converting to WordPress. One of the forms is a poll in a sidebar widget that I've been trying to make more compact by decreasing the spacing between the fields. I've customized the font properties and shifted the position of the submit button using the CSS in your "targeting specific elements" post. However, I've been unable to reduce the spacing between the fields. I'm sure it's no big deal, but it seems I'm missing something. Here's the URL of the test page:

    http://testsite.fanfaire.com/thibaudet-jytbio

    Also, what's the CSS for reducing the size of the text area? Would greatly appreciate any help. Thanks!
    -Gloria

    Posted 8 years ago on Thursday July 28, 2011 | Permalink
  9. @gepijac,

    Your form is inheriting some margins from the Theme thats adding a little extra spacing between your fields. You can add this to your custom CSS to override that.

    [css]
    ul.sidebar li .gform_wrapper ul li {
        margin: 0!important;
    }

    You would target textareas like this.. taken from the example in the documentation.

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield textarea
    {
    	border:1px solid red
    }

    or if you want to target the specific textarea in your sidebar widget, it would be like this.

    [css]
    
    body .gform_wrapper .gform_body .gform_fields .gfield textarea#input_8_7
    {
    	height:50px;
    }
    Posted 8 years ago on Thursday July 28, 2011 | Permalink
  10. Thanks, Kevin. With your suggestions, am sure something will work out with a little more tweaking on my part. BTW, I'm using Headway Themes.
    Cheers,
    Gloria

    Posted 8 years ago on Thursday July 28, 2011 | Permalink
  11. Gloria,

    Headway Theme's are great and they have a great support team. I think you've chosen wisely there. Let us know if we can help out with anything else.

    Posted 8 years ago on Thursday July 28, 2011 | Permalink