Reducing the vertical spacing between form fields

  • camomplin
    Asked on February 22, 2015 at 6: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

     

  • bkljaic
    Replied on February 22, 2015 at 8: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?

    Reducing the vertical spacing between form fields Image 1 Screenshot 70

    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. 

    Reducing the vertical spacing between form fields Image 2 Screenshot 81

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

    Reducing the vertical spacing between form fields Image 3 Screenshot 92

    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.  

    Reducing the vertical spacing between form fields Image 4 Screenshot 103

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

    Reducing the vertical spacing between form fields Image 5 Screenshot 114

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

    Reducing the vertical spacing between form fields Image 6 Screenshot 125 

    Hope this will help.

  • Jan
    Replied 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!