What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No signup 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.

How do I add multiple input area in one question?
Asked by positiveplans on October 24, 2012 at 07:17 PMSee 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.
http://shu.com.lc/applicationform/

JotForm Support
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/90FieldPositioning
Another way is by using Matrix tool under Power Tools, after that change the matrix input type to textbox. Check this visual guide:
Thanks!

thanks. i used the matric tool
can i adjust the columns  input area?

JotForm Support
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.
.formmatrixvalues {
paddingleft: 8px;
paddingright: 8px;
}
/* 1st Column */
.formmatrixrowheaders +.formmatrixvalues .formdropdown {
width: 100px;
}
/* 2nd Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues .formdropdown {
width: 100px;
}
/* 3rd Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formdropdown{
width: 100px;
}
/* 4th Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formdropdown {
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!

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

JotForm Support
My bad! I've provided you the wrong code, really sorry. Please use this instead:
.formmatrixvalues {
paddingleft: 8px;
paddingright: 8px;
}
/* 1st Column */
.formmatrixrowheaders +.formmatrixvalues .formtextbox {
width: 100px;
}
/* 2nd Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues .formtextbox {
width: 100px;
}
/* 3rd Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox{
width: 100px;
}
/* 4th Column */
.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox {
width: 100px;
}
It's obvious that you are using textbox but I've provided you the code for dropdown fields. Sorry about that.

THNAKS! WORKED!

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

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

JotForm Support
@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 .formmatrixrowheaders +.formmatrixvalues .formtextbox {
width: 100px;
}


JotForm Support
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.

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

JotForm Support
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:
.formmatrixvalues {paddingleft: 8px;paddingright: 8px;}
/* 1st Column */.formmatrixrowheaders +.formmatrixvalues .formtextbox {width: 200px;}
/* 2nd Column */.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 100px;}
/* 3rd Column */.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox{width: 100px;}
/* 4th Column */.formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 75px;}
/* 1st Column */#id_49 .formmatrixrowheaders +.formmatrixvalues .formtextbox {width: 120px;}
/* 2nd Column */#id_49 .formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 80px;}
/* 3rd Column */#id_49 .formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox{width: 50px;}
/* 4th Column */#id_49 .formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 50px;}
/* 5th Column */#id_49 .formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 50px;}
/* 6th Column */#id_49 .formmatrixrowheaders +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues +.formmatrixvalues .formtextbox {width: 50px;}
Let us know if you need further assistance!

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

JotForm Support
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

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

THANKS!

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