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

  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 7 years ago on Tuesday August 9, 2011 | Permalink
  2. Please post a link to your form so we can help with the CSS you need. Thanks.

    Posted 7 years ago on Tuesday August 9, 2011 | Permalink
  3. silverlight001
    Member

    http://www.dangerousgoodstransport.com/

    Posted 7 years ago on Tuesday August 9, 2011 | Permalink
  4. 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 7 years ago on Tuesday August 9, 2011 | Permalink
  5. silverlight001
    Member

    Hi,

    What css file needs to be modified please?

    Thx

    Posted 7 years ago on Tuesday August 23, 2011 | Permalink
  6. 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 7 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 6 years ago on Thursday July 19, 2012 | Permalink
  8. Can you post a link to your form so we can see what's going on?

    Posted 6 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 6 years ago on Thursday July 19, 2012 | Permalink
  10. Sure, rob@rocketgenius.com - just reference this thread in your email.

    Posted 6 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 6 years ago on Friday July 20, 2012 | Permalink
  12. 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 6 years ago on Friday July 20, 2012 | Permalink
  13. 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 6 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 6 years ago on Monday July 23, 2012 | Permalink
  15. 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 6 years ago on Monday July 23, 2012 | Permalink