What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Reducing the vertical spacing between form fields

    Asked by camomplin on February 22, 2015 at 06:05 AM

    Hello Support 

    I have used a template "online booking form, and Ihave modified it, mostly by shrinking it with the facility you provide to do so. The form is still too long. I have not figured out how to reduce the space between fields, nor how toput any label not on top of the fields to be field in (such as dates) but beside the fields.

     

    Thanks for your support

    Franco

     

    Page URL:
    http://camomplin.com/page2.html

    reduce reducing vertical spacing space between fields form fields vertical space
  • Profile Image

    Answered by bkljaic on February 22, 2015 at 08:21 AM

    Hi Franco,

    You sad that you want to reduce the space between fields and you want to put label beside the fields.

    Do you want your form to look like this?

    If that is the case you can do that in few steps:

    1. Inside of your form select field you want to change, then in Builder select Label Align and choose option Left. You need to change Label Align on all fields. 

    2. Also you can change size of Text Area of your Message box by changing a values inside Columns and Rows.

    3. Inside of Form Builder go to Setup & Embed option then go to Designer and select Form Layout. There you can change width of your form.  

    4. In Label Styles tab you can change width of labels and label spacing.

    5. Inside of Line Layout you can change line spacing between form fields.

     

    Hope this will help.

  • Profile Image
    JotForm Support

    Answered by Jan on February 22, 2015 at 11:16 AM

    Hi there,

    Please try to add this custom css code on your form.

    .form-line { margin-top: 5px !important; margin-bottom: 5px !important; }

    .form-line { padding-top: 5px !important; padding-bottom: 5px !important; }

    Here's a guide on how to inject custom css.

    Hope this works. Let us know if you need any help.

    Thank you!