How to reduce the spacing between form fields

  • Profile Image
    MDownes
    Asked on October 01, 2014 at 12:23 AM

    Hi,

    How do I adjust the spacing between the fields?  I want them vertically closer together; right now the whole form takes up a lot of screen real estate...

    Thanks!

    --Myles

  • Profile Image
    TitusN
    Answered on October 01, 2014 at 02:16 AM

    Hello Myles,

    You can reduce the spacing between the form fields by reducing the padding property of the fields. 

    This is done by adding (injecting) a few lines of CSS code to your form - you can use the following code: 

    .form-line {

    padding-top: 5px;

    padding-bottom: 5px;

    }

    You can adjust the 'px' value up or down.

    Copy the highlighted code above and paste it to your form by following this guide - http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Did that help? 

    Let us know - Cheers. 

  • Profile Image
    MDownes
    Answered on October 01, 2014 at 10:11 AM
    That did it. Thanks!
    ...
  • Profile Image
    Ben
    Answered on October 01, 2014 at 12:00 PM

    Hi,

    I am glad to hear that it worked for you and in the name of my colleague, you are welcome.

    Just in case you want to do this to some other jotforms in the future and do not need to have it set to a specific size (the above is great for fine tuning the spacing), you can change the vertical spacing through the jotform builder as well.

    You can see how to do that here How Can I Change Spacing Between Questions?

    You can see there the example given by my colleague as well so you can choose which one is best for you :)

    Best Regards,
    Ben

  • Profile Image
    MDownes
    Answered on October 01, 2014 at 12:21 PM
    Even easier. Thanks Ben.
    ...
  • Profile Image
    EltonCris
    Answered on October 01, 2014 at 01:20 PM

    On behalf of my colleagues, you're welcome.

    If you have any other questions or concerns, feel free to open a new thread.

    Cheers!