how do I define field widths?

  • Profile Image
    Asked on July 17, 2013 at 10:25 AM

    Hi, I'm checking out Jotform to see if it will work for me.  I want to do something fairly simple (I think) and am starting to tear my hair out with your form builder.  I'm trying to set up a literature order form, with a list of literature, and each line requires as a minimum:

    - a text field describing the item

    - a text input for number

    - a text input for price

    So if my form is 700 px wide, I would like eg 500px for the 1st field, and 100px for the two input boxes.  I have tried putting numbers into the 'form width' and 'label width' boxes, but nothing that it produces make any sense - the widths do not appear as I put in.

    None of your templates really have what I want (which is so basic).  There also doesn't seem to be anything to help structure things in columns, which again I would have thought is a common requirement.

    The look of the form I set up just with html that I would like to replicate in some way is at

    I'm sure I just need to learn, and would appreciate your help.

    Thank you

  • Profile Image
    Answered on July 17, 2013 at 11:56 AM


    You should be able to resize each field by clicking the "Size" button from Field Properties then define your value in Pixels.


    Then, if you'd like to align each box to the same line. You can use our Field Positioning Feature: Form Field Positioning.


    Your example form is possible with us using our Matrix Field, but with a custom workaround such as using the source codes and defining your value to each rows. An example output would be like this: Non-Editable Text Boxes with Default Values.

    Let us know if you'd like this method.


  • Profile Image
    Answered on July 17, 2013 at 01:27 PM

    Thanks for replying.  I'll check out the matrix field separately.

    Just re-trying to set field sizes in a new blank form - I had been doing what you said, and I don't see it working.  My form 'Book form 1' has 3 fields - a free text box and 2 text fields.  I set the form to 800px wide, the free text box to 300 px, and each text field to 10px, and I see:


     - the free text field is not 300px, but shrinks / expands to the text, and the two text fields are not 10px.  If I increase the Number field to 20px, I see this: 


    - again, it bears no relation to the number of pixels I've entered.  Any thoughts?

  • Profile Image
    Answered on July 17, 2013 at 01:54 PM

    Hi, I just cloned your form and made some changes. Here it is:

    If this is what you need maens, Things that I did was

    1. Increased the form width to 900px;

    2. Then I injected the following CSS code







    Refer this Guide for: How to Inject Custom CSS Codes

    Feel free to ask if you need further clarification.

    Thank you.

  • Profile Image
    Answered on July 17, 2013 at 02:00 PM

    BTW, I have added a Matrix field with your needs in that same form. Please check that too.

    Thank you.

  • Profile Image
    Answered on July 31, 2013 at 12:11 PM

    Hi there - thanks for those.  I downloaded a basic matrix field, which I could play with and (I hope) create what I want, and I assume I can just put that into my own website.  Is it also possible to import or paste the code back into jotform?

  • Profile Image
    Answered on July 31, 2013 at 12:38 PM


    You should start a separate thread for your unrelated issue.

    If you download your form's source code you can use the source code to embed your form in website but unfortunately, this updated source code can't be imported back to JotForm server. You will have to host this form yourself.

    Should you have any questions please feel free to contact us.