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.

Height of Fields

Gravity Support Forums » Plugin Support » Gravity Forms

  1. silverlight001
    Member

    How can I increase the height of the form input fields please.

    I'd like to create a contact form that looks similair to the one on this page

    http://www.minttwist.com/contact-us

    Thanks

    Posted 12 years ago on Tuesday August 9, 2011 | Permalink

  2. Chris Hajer
    Key Master

    Please post a link to your form so we can help with the CSS you need. Thanks.

    Posted 12 years ago on Tuesday August 9, 2011 | Permalink

  3. silverlight001
    Member

    http://www.dangerousgoodstransport.com/

    Posted 12 years ago on Tuesday August 9, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    You can do this by targeting the inputs as described in the documentation and either increasing the top/bottom padding

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
	padding:5px 0;
}

    screenshot: http://bit.ly/ouEfUX

    or you can simply define a height value if you prefer

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
	height:30px
}

    screenshot: http://bit.ly/pfKbuA

    Also you should see this FAQ about removing bullet image backgrounds from your form.

    http://www.gravityhelp.com/question/why-is-my-form-showing-up-with-list-bullets/

    Posted 12 years ago on Tuesday August 9, 2011 | Permalink

  5. silverlight001
    Member

    Hi,

    What css file needs to be modified please?

    Thx

    Posted 12 years ago on Tuesday August 23, 2011 | Permalink

  6. Kevin Flahaut
    Administrator

    Your theme stylesheet is where you would add these rules. Place any new rules at the end of the stylesheet so they supersede any previous ones.

    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    Posted 12 years ago on Tuesday August 23, 2011 | Permalink

  7. silverlight001
    Member

    Hi,

    I can't seem to find anything about

    - increasing the space between the form fields (e.g. double space the vertical layout to give the form less of a squashed appearenance

    - moving the form fields from right to left closer to the field label

    THanks

    Posted 11 years ago on Thursday July 19, 2012 | Permalink

  8. Rob Harrell
    Member

    Can you post a link to your form so we can see what's going on?

    Posted 11 years ago on Thursday July 19, 2012 | Permalink

  9. silverlight001
    Member

    Hi Rob,

    Sorry but I can't since it's hidden behind a |"coming soon plugin". if you can post an email address I'll send you a login, thanks

    alternatively it's quite similair to the one on this page:

    http://www.macprosol.com/sign-up

    Posted 11 years ago on Thursday July 19, 2012 | Permalink

  10. Rob Harrell
    Member

    Sure, rob@rocketgenius.com - just reference this thread in your email.

    Posted 11 years ago on Thursday July 19, 2012 | Permalink

  11. silverlight001
    Member

    Hi Rob,

    login sent to you

    the form is on this page:

    http://howmansolicitors.co.uk/ruislip-office.html

    many thanks for your help

    Posted 11 years ago on Friday July 20, 2012 | Permalink

  12. Chris Hajer
    Key Master

    Someone else using Genesis posted their solution to a similar problem yesterday. Maybe this will help you: http://www.gravityhelp.com/forums/topic/style-confusion#post-66976

    Otherwise, Rob is the man and will post something for you soon.

    Posted 11 years ago on Friday July 20, 2012 | Permalink

  13. Rob Harrell
    Member

    To move the labels closer to the inputs, use the "right aligned" label placement in the form's settings.

    For the inputs, this style is your culprit: Screenshot

    Drop this into your theme's stylesheet and you should be good to go:

    [css]
.gform_wrapper ul.right_label li, .gform_wrapper form ul.right_label li, .gform_wrapper ul.left_label li, .gform_wrapper form ul.left_label li {
margin-bottom: 14px !important;
}
    Posted 11 years ago on Friday July 20, 2012 | Permalink

  14. silverlight001
    Member

    Hi Rob,

    the practice field on this page seems to have gone skew whiff

    http://howmansolicitors.co.uk/

    welcome your help,

    Thanks

    Posted 11 years ago on Monday July 23, 2012 | Permalink

  15. Rob Harrell
    Member

    Couple of things here. For the footer form, you should duplicate the "contact us" form so it has it's own form. This is because on the contact us page you have two instances of the same form, and they will not function correctly.

    When you duplicate the form and set the new one in the footer, make that form's label placement "top aligned" - then you'll just need to do a couple small CSS tweaks for padding/margins. Let me know if you get stuck.

    Posted 11 years ago on Monday July 23, 2012 | Permalink