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 add multiple input area in one question?

    Asked by positiveplans on October 24, 2012 at 07:17 PM

    See the link below - what if i ask the question

    list of team player - and i want name, age, gender, grade and average, score

    all in different boxes side by side - like a chart.

    Page URL:
    http://shu.com.lc/application-form/

  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 07:35 PM

    Hi there,

    There are two ways to achieved this. You can use textboxes and shrink them to align them on the same line. Check this guide: http://www.jotform.com/help/90-Field-Positioning

    Another way is by using Matrix tool under Power Tools, after that change the matrix input type to textbox. Check this visual guide:

    Thanks!

  • Profile Image

    Answered by positiveplans on October 24, 2012 at 09:22 PM

    thanks.  i used the matric tool

    can i adjust the columns - input area?

  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 09:38 PM

    Hi,

    Good! To adjust it's column widths, you have to Inject Custom CSS codes to your form. It's pretty easy, use this CSS codes.

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

     

    /* 1st Column */

    .form-matrix-row-headers +.form-matrix-values .form-dropdown {

    width: 100px;

    }

     

    /* 2nd Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-dropdown {

    width: 100px;

    }

     

    /* 3rd Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown{

    width: 100px;

    }

     

    /* 4th Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown {

    width: 100px;

    }

    Follow this guide: How to Inject Custom CSS Codes

    I have labeled each column css so you can adjust each column width values (100px) if necessary. Thanks!

  • Profile Image

    Answered by positiveplans on October 24, 2012 at 09:48 PM

    hey THANKS  - i did and changed the fist column to 200 but not hing changes? what am i doing wrong?

  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 09:55 PM

    My bad! I've provided you the wrong code, really sorry. Please use this instead:

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

     

    /* 1st Column */

    .form-matrix-row-headers +.form-matrix-values .form-textbox {

    width: 100px;

    }

     

    /* 2nd Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {

    width: 100px;

    }

     

    /* 3rd Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{

    width: 100px;

    }

     

    /* 4th Column */

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {

    width: 100px;

    }

    It's obvious that you are using textbox but I've provided you the code for dropdown fields. Sorry about that.

  • Profile Image

    Answered by positiveplans on October 24, 2012 at 10:07 PM

    THNAKS!  WORKED!

  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 10:38 PM

    Great!

    Just let us know if you need anything else. Thanks!

  • Profile Image

    Answered by positiveplans on October 24, 2012 at 11:29 PM

    Yes - one more - what if i have varying matrices with varying sizes of input area?

    the one i have right now is 4 columns at 100 px ea.

    what if i wanted another matrix with 6 columns at 60 px ea.

    Thanks

  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 11:52 PM

    @positiveplans,

    That's still posible by declaring matrix field ID (see example below). May we know the name of the form with 6 columns so we can check it on your account and provide you the css codes? Thanks!

    e.g.

    /* 1st Column */

    #id_1 .form-matrix-row-headers +.form-matrix-values .form-textbox {

    width: 100px;

    }

  • Profile Image

    Answered by positiveplans on October 24, 2012 at 11:54 PM
  • Profile Image
    JotForm Support

    Answered by idarktech on October 25, 2012 at 12:11 AM

    For clarification, is it for your  Summary of Educational Experience field? I can't seem to find 6 column matrix with your form as of checking. 

    Thank you.

  • Profile Image

    Answered by positiveplans on October 25, 2012 at 02:16 PM

    Yes it was - but I made it 4 columns just to reach my deadline.  I woudl prefer six columns.  thanks

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 02:57 PM

    Hello there!

    Here is a form with the 6 column matrix - Summary of Educational Experience field

    This is the CSS for the form.

    You will see that I have followed the drections of idarktech to accomplish this:

    .form-matrix-values {padding-left: 8px;padding-right: 8px;}

    /* 1st Column */.form-matrix-row-headers +.form-matrix-values .form-textbox {width: 200px;}

    /* 2nd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {width: 100px;}

    /* 3rd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{width: 100px;}

    /* 4th Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 75px;}

    /* 1st Column */#id_49 .form-matrix-row-headers +.form-matrix-values .form-textbox {width: 120px;}

    /* 2nd Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {width: 80px;}

    /* 3rd Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{width: 50px;}

    /* 4th Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 50px;}

    /* 5th Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 50px;}

    /* 6th Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 50px;}

    Let us know if you need further assistance!

  • Profile Image

    Answered by positiveplans on October 25, 2012 at 09:22 PM

    so will this keep my four columns as it is and allow me to do six colums as well?

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 10:39 PM

    Hi there,

    Yes, Here is a visual explanation of the CSS code:

    #id_49 is the ID of the last Matrix field on your form.

    Let us know if you need further assistance

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 10:41 PM

    Please take a look at this form to fully understand what this code accomplishes.

    http://form.jotformpro.com/form/22986178420965

  • Profile Image

    Answered by positiveplans on October 25, 2012 at 10:58 PM

    THANKS!

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 11:03 PM

    On behalf of my colleague idartech, you are welcome! :)