How To Move My Form Fields Closer Together? Tried "vertical padding", did not work.

  • Profile Image
    JKulp42757
    Asked on May 28, 2016 at 10:24 AM

    I am trying to move my form fields closer together. There is too much vertical spacing between them right now.

    I tried using the "line layout" - "vertical padding" option in the designer, however this did not work. I suspect that it is being overwritten by some existing code.

    Here is my form:

    https://form.jotform.com/61467327577971

     

  • Profile Image
    victor
    Answered on May 28, 2016 at 11:01 AM

    I have just reviewed your form and noticed that the fields are already pretty close to each other vertically.

    If you need it closer, let us know and we will be glad to help.

  • Profile Image
    JKulp42757
    Answered on May 28, 2016 at 01:30 PM

    They look that way in the preview, but when I insert the code on the live site, it does not look that way (see image). Thanks.

    .

  • Profile Image
    Nik_C
    Answered on May 28, 2016 at 04:07 PM

    Could you please provide us with a link of your website where you embedded your form so we can check further.

    In the meantime, please try following:

    1. Go to Designer:

    2. And please try to turn on Make this form responsive:

    Please let me know if that helps.

    Thank you!

     

  • Profile Image
    JKulp42757
    Answered on May 29, 2016 at 09:47 AM

    I made the "make mobile responsive" edit as you requested, however no change to the spacing between the fields.

     

    The form can be seen here: http://goo.gl/2ibTGz

    Thanks

  • Profile Image
    ashwin_d
    Answered on May 29, 2016 at 10:31 AM

    Hello JKulp42757,

    You seems to have question label in form which is in same font color as the form background color. That is the reason why it is currently not appearing on form but occupying the space. Please check the screenshot below:

    Please inject the following custom css code in form to hide the question label and that should solve your problem:

    .form-label.form-label-auto {

        display: none !important;

    } 

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Once this custom css code in injected, your form will appear as displayed in the screenshot below:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    JKulp42757
    Answered on June 01, 2016 at 04:25 PM

    Awesome, that worked! Thanks!