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

    Spacing between title and text box

    Asked by FlyballStuff on June 26, 2011 at 06:14 AM

    Hi

     

    I am building my form as an order form and would like the order part to be on one line eg.

     

    #  "text box"  Item: "text box"  Size: "text box"  Colour: "text box"

     

    The only way I can get the items in a line at the moment is to have the label set on top and to shrink.  When I set the label to the left the gap between the label and the text box is too large to fit them all on one line.  Is there any css that would reduce the gap.

     

    thanks

    Page URL:
    http://www.flyballstuff.moonfruit.com/#/order-form/4552754608

  • Profile Image
    JotForm Support

    Answered by mliz on June 26, 2011 at 11:27 AM

    Hello,

    Have you tried adjusting the label width? The text alignment between the
    field and label is automatically changed depending on the label's width.

    To update the label's width:

    1. Open your form in JotForm

    2. Click on Form Style Tab then click on the Label Width.
    From here you can then lessen the width for the label.

    Afterwhich you can also change the spacing between your fields

    1.  Go to Setup & Embed tab, then click Preferences button.

    2.  Choose Form Styles tab

    3.  Click on the text area beside Inject Custom CSS

    4.  Enter this code:

    .form-line {
    padding-top: 3px;
    padding-bottom: 3px;
    }

    Hope this helps.

    Regards,
    Mliz