How to drop form fields on the same row

  • cairnedge
    Asked on April 14, 2015 at 7: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.

     

    How to drop form fields on the same row Image 1 Screenshot 20

  • Charlie
    Replied on April 15, 2015 at 3:44 AM

    Hi,

    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:

    How to drop form fields on the same row Image 1 Screenshot 20

     

    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.