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

    How to reduce the spacing between fields?

    Asked by rsvpfree on February 23, 2015 at 08:39 AM

    I have viewed the form you created, but cannot see how the 'vertical space' between the textbox and the line with the checkbox has been reduced. It is still much too big, and they look like 2 separate items, while what I wish is that the checkbox line be 'visually attached' to the line above it.

    I cloned your form and attempted to use Designer>CSS to reduce both padding and margin to 'zero', here is the URL is my altered version of your form:

    http://form.jotformeu.com/form/50531930242344

    but I see no reduction in margin and padding.

    Further help would be appreciated.

    vertical spacing
  • Profile Image
    JotForm Support

    Answered by Welvin on February 23, 2015 at 08:40 AM

    Hi,

    You should use field positioning feature if you want to align fields side by side. 

    https://www.jotform.com/help/90-Form-Field-Positioning

    Note that the entire form width is important if you want to align multiple fields: https://www.jotform.com/help/35-The-Importance-of-Form-Widths.

    As for the vertical padding, I've fixed for you. You should go to Line Layout in the form designer:

    Thank you and let us know if you need any further assistance about this matter.

     

    Regards

  • Profile Image

    Answered by rsvpfree on February 23, 2015 at 09:52 AM

    Hello Welvin.

    Can this control (Line Spacing in Line Layout) be applied to only field in a form on which there are many fields?

  • Profile Image

    Answered by rsvpfree on February 23, 2015 at 09:53 AM

    Correction:  "to only field" should be "to only one field"

  • Profile Image
    JotForm Support

    Answered by Welvin on February 23, 2015 at 10:00 AM

    The option is applied to the overall form/fields. If you want to adjust the spacing of the individual fields, you will have to inject a custom CSS codes to your form. We can help you about it, just please let us know the form URL and the fields you want to adjust.

    Additionally, you can do that in the form designer. Click on "CSS" tab > double click the whole field section to add its ID in the area > then choose the padding/margin and add the value:

    Thank you!

  • Profile Image

    Answered by rsvpfree on February 23, 2015 at 10:58 AM

    Welvin.  My original question on February 23, 2015 at 08:39 AM stated clearly "cannot see how the 'vertical space' between the textbox and the line with the checkbox has been reduced. It is still much too big, and they look like 2 separate items, while what I wish is that the checkbox line be 'visually attached' to the line above it." 

    So your suggestion to use "Line Spacing" in "Line Layout" did not answer my question.

    You now say: in the form designer. Click on "CSS" tab > double clickthe whole field section to add its ID in the area > then choose the padding/margin and add the value:

    I believe I did that, and set both paddings and margins to zero. But the result seems to me to be no different.

    Could you or someone else please please answer my original question.

  • Profile Image
    JotForm Support

    Answered by Welvin on February 23, 2015 at 11:27 AM

    I'm sorry about that.  I think we are dealing two issues here so let me break it again.

    As for the vertical spacing, just please follow this guide to adjust it: http://www.jotform.com/help/156-How-to-Reduce-Vertical-Spacing-between-Fields. If this method isn't working, follow the instructions in the form designer - Line Spacing section. I have already made the adjustments to your form, kindly check: http://form.jotformeu.com/form/50531930242344

     

    As for the checkbox line, do you want it to be like this: http://www.jotformpro.com/form/50534902730954 ? Let me know so I can give you the instructions.

    I look forward to your reply.

    Regards