Reducing the vertical spacing between form fields

  • Profile Image
    camomplin
    Asked 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

     

  • Profile Image
    bkljaic
    Answered 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
    Jan
    Answered 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!