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

    Ensuring that multiple fields fit on the same row in the form

    Asked by heatexchangerquote on April 11, 2013 at 03:31 PM

    Please see form http://www.jotform.com/?formID=13322326624

    On the 4th row, you will see "Flow Rate" - how do I ensure that all four fields (text box for SIDE #1 with a drop-down for RATE and text box for SIDE #2 with a drop-down for RATE) all appear on the same row in the form?  Right now, only three of these four fields fit on the same row.  Can I decrease the width of the SIDE # and SIDE #2 text boxes somehow?

     

    Thanks!

    Page URL:
    http://www.jotform.com/?formID=13322326624

    JotForm size fields on same row re-size text box change textbox width more than one field
  • Profile Image

    Answered by pinoytech on April 11, 2013 at 04:24 PM

    Hi,

    If you will increase the width of your form, there's a possible to add four fields on same line.

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by heatexchangerquote on April 11, 2013 at 06:56 PM

    Thanks - if you could let me know how I can increase the width of the form that would be great.

     

    Thanks!

  • Profile Image

    Answered by pinoytech on April 11, 2013 at 07:06 PM

    Please take a look at this article for more detailed information.

    http://jotform.me/help/35-The-Importance-of-Form-Widths

  • Profile Image

    Answered by heatexchangerquote on April 11, 2013 at 10:53 PM

    Thanks so much - how do I change the width of a specific text box?  Not all text boxes in the form, just 1 or 2 specifically?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by abajan on April 12, 2013 at 07:05 AM

    Thanks for asking. To do that, click the text box and then click the Size button:


    Change the number in the box accordingly, click OK and save the form.

    Alternatively, injected CSS can be used for this but you would need to know the ID of the text box, so that the rule would affect only that box.

    For example, your rule might look as follows:

    #input_3 {
    width: 300px;
    }

    Do let us know if you would like further assistance.

  • Profile Image

    Answered by heatexchangerquote on April 12, 2013 at 05:48 PM

    Thanks so much for your reply.  I tried to do this, but the "Size" option is not available for me.  For example, when I click on the Flow Rate "Side #1" text box, the icons in the header are as follows:

    - label align

    - rows

    - columns

    - input type

    - hover text

     

    I do not see "Size" as an option - perhaps I am looking in the wrong area - any assistance you can provide would be MUCh appreciated.  Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 12, 2013 at 06:34 PM

    @heatexchangerquote

    Hi, it is because the field Flow Rate "Side #1" is not a textbox field. It is a matrix field.

    Looking at your form, if I may suggest also, wouldn't it be more appropriate to use the textbox field instead for Flow Rate? It is only a single input type question...

    Thanks.

  • Profile Image

    Answered by heatexchangerquote on April 13, 2013 at 03:51 PM

    Thanks!  That explains a lot.  OK, I think I almost have it then - but how to I create a label above the text box (like I had "Side #1" above the matrix field "Flow Rate"previously)?

    Thanks in advance for your help and your time.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 13, 2013 at 05:47 PM

    @heatexchangerquote

    You mean like this?

    If so, Inject this CSS to your form.

    .form-sub-label {

    padding-bottom: 27px !important;

    margin-top: -40px !important;

    }

    Hope this helps. Thanks!

  • Profile Image

    Answered by heatexchangerquote on April 14, 2013 at 02:23 PM

    Yes, that is exactly what I want - thanks!  How do I access the CSS to my form?

  • Profile Image
    JotForm Support

    Answered by abajan on April 14, 2013 at 03:15 PM

    Hi again,

    Regarding your last query, please see this guide about injecting CSS.

    Thanks.

  • Profile Image

    Answered by heatexchangerquote on April 14, 2013 at 09:55 PM

    Thanks again - I inserted the CSS successfully, but it looks like "sub-label" places the label below the text box, where the screenshot shown the post shows it above the text box. 

    Is there something different than "sub-label" that allows a label above the text box rather than below the taxt box?

    Thanks again!

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 01:17 AM

    Hi,

    I've check your form and you have the same result as the attached image. Check this screen: http://screencast.com/t/IqKFKN5a8N. Can you attached an image showing the problem on your end? Or, please try clearing your browsers cache. This should help.

     

    Thanks

  • Profile Image

    Answered by heatexchangerquote on April 15, 2013 at 12:58 PM

    Thanks - the label appears under the field in the field when I am editing the form, but when I view the actual form live online, it is above the field - so all is well!  Thanks!

     

    I am still having difficulty ensuring that all four fields (Side #1 text box, Side #1 drop-down, Side #2 text box, and Side #2 drop-down) are all on the same line.  I am trying to decrease the label width as directed above, but it is not shrinking the size anymore - currently set at 50, but I noticed that it does not decrease anymore if I lower than number below 50.  Any assistance you can provide to help me ensure that all four fields are on the same line would be much appreciated.

  • Profile Image

    Answered by glennlee on April 15, 2013 at 01:15 PM

    @heatexchangerquote,

    Please try to adjust the form width, click form style > form width.

    I cloned your form and adjusted the form width. Here is cloned form.

     

    Regards,