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 drop form fields on the same row

    Asked by cairnedge on April 14, 2015 at 07:14 PM

    A client has an order form they would like to push into an online form.

    Their current, print, form has a pretty standard..

    QTY | GARMENT BRAND/TYPE | COLOR  |  S | M | L | XL | 2XL | 3XL | YS | YM | YL |YXL

    The row below these headers are text fields where a client is supposed to write in the QTY they need of each size.

    And there are so many brands/types and colors that those fields are text fill in fields as well.

    Since the quantity on any one size can be anything from 1 to 100's... it's not practical to use a dropdown menu.

    Same goes for the garment brand/type and color.  They are a silk screening shop, so they have access to 100's of brands/type of clothes and colors.

    See the attached included JPG of their order form.

    What I'd like to do is have the form fields lay next to each other in the row but I cannot figure out how to do that without using the Payment Tool Widget (Purchase Order).  And even then, I can't figure out how to edit the layout so that the fields are next to each other.


    Any suggestions or assistance would be greatly appreciated.


  • Profile Image
    JotForm Support

    Answered by Charlie on April 15, 2015 at 03:44 AM


    Visually, this will be quite hard to recreate on an online form but you could try to explore the following guides below:

    1. Position the fields on the same line: http://www.jotform.com/help/90-Form-Field-Positioning 

    2. Use the form Designer tool to style the form: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

    3. To advance the styling, you can try using custom CSS codes: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes 


    If you have a fillable PDF version of that form, you can also upload it directly to JotForm for you to use. You can navigate to the Import Tool here: http://www.jotform.com/adobe-formscentral-alternative/. Click "Import Forms" and choose the 3rd option:


    You could also try first recreating the form, add all the fields that are needed, then we can assist you step by step on how you can properly design that form. But I would recommend that you open one thread for each question or topic.

    Kind regards.