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 do I define field widths?

    Asked by nstoker 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 http://debtorsanonymous.org.uk/form-test

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

    Thank you

    Form Builder form width JotForm order form text field
  • Profile Image
    JotForm Support

    Answered by Welvin on July 17, 2013 at 11:56 AM

    Hi,

    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: https://shots.jotform.com/welvin/pages/webshack.html. Non-Editable Text Boxes with Default Values.

    Let us know if you'd like this method.

    Thanks

  • Profile Image

    Answered by nstoker 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:

    image

     - 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: 

    image

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

  • Profile Image

    Answered by dinesh-it on July 17, 2013 at 01:54 PM

    Hi, I just cloned your form and made some changes. Here it is: http://form.jotformpro.com/form/31975030678965?

    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

    #id_10{

    width:600px;

    }

    #id_11,#id_12{

    width:100px;

    }

    Refer this Guide for: How to Inject Custom CSS Codes

    Feel free to ask if you need further clarification.

    Thank you.

  • Profile Image

    Answered by dinesh-it 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 by nstoker 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 by sidharth_kch on July 31, 2013 at 12:38 PM

    @nstoker

    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.

    Thanks,

    Sidharth