Creating a multi-input form

I am trying to put together a multi input form for our swimming champs. I know you can sort of do this by shrinking but i cant get the different input types to line up.

The other way is by using a configurable list from widgets.

ive tried both but not got very far. You can see that on my form.

I've put together a word doc showing what I would like to achieve. The people using the form need to be able to tick as many races as they want. Moving forward i would like to be able to change the text for different races in the future.

Your help is appreciated.

UPDATE (June 11, 2019): The input table field has a new type called Multi-Type Columns. You will now be able to set different type for each column such as Single Choice, Checkbox, Textbox, and Dropdown.

There are many features when you use the Multi-Type Columns:

1. You can change the row and column names.

 

 

Additionally, you can set the row and column names by clicking on the gear icon.

 

 

2. You can add rows and any type of columns by clicking on the add row and add column.

 

3. You can set options for dropdown type by clicking on the downwards arrow.

 

 

Enter your dropdown options.Click on the Save Changes.

 

 

4. You can delete the rows by clicking on the cross (X) that exists for each row and you can delete the rows by clicking on the downwards arrow that exists for each column.

 

 

5. You can change the types of each column to Single Choice, Checkbox, Textbox, and Dropdown by clicking on the downwards arrow that exists for each column.

 

 

You can clone this demo form to your account: https://form.jotform.com/nelly/multitype-input-table-form

 

You can look at this guide to understand how to clone an existing form from a URL: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

 

 

If you have any question, please let us know below.

You can use the Input Table and then change the field to Textbox. The problem with this is that you can only choose 1 type of field for the whole table. Here's a screenshot:

Another option is the Spreadsheet widget. Here's how it works:

If it does not work for you, then please use the Configurable List widget instead. If you need help with aligning the fields using CSS, let us know. 

Thank you.

Thank you Jan . Unfortunately I dont think either fit what I need. Ive tried to illustrate on the screen shot. I need to list the swim races and for the swimmer to tick or check which races they want to swim. At the same time I also need them to put down their existing swim times next to the swims they check/tick so I need a mix of check box and numerical box. I've done some of this on a configurable list but do not know how to carry on the boxes down.

https://eu.jotform.com/build/81065367443357

Since you have multiple inputs for each field, configurable list widget may not suit for your requirement. The input table fields on the form can be set beside each other by increasing the width of the form to 725px and injecting the following CSS code to the form.

.form-matrix-table tr {

  height: 33px;

}

The fields should be displaying as shown below:

Let us know if that works. Please get back to us if you need any further assistance. We will be happy to help. 

Hi Kiran

thank you for this. It's almost there . How do i make it line up ?

https://form.jotformeu.com/81155248943360

Also on the configurable list on the 2nd column how to i get the number boxes to show and can I disable the + box at the bottom?

Many thanks 

Odile

I see that the labels has been removed for the second input table to enter numeric values. I would suggest to have the labels in place for the field so that you can match the values when checking the submissions. You may hide the labels to display on the form and beside the first input table by injecting the CSS code to the form.

#id_34 {

    margin-left: -73px;

}

#cid_34 > table.form-matrix-table th {

  display: none;

}

After injecting the above CSS code, the fields should be displaying as below:

Also on the configurable list on the 2nd column how to i get the number boxes to show and can I disable the + box at the bottom?

It is not possible to add multiple text boxes for each row in a configurable list. Configurable list is not the field that match your requirement.

Hope this information helps! 

Hi Kiran

many thanks for your help. I have put in the css code but the labels are still displaying and not quite lined up. Any more help would be greatly appreciated

I have checked you form and it seems to be lined up correctly.

Here is my screenshot.

Kindly clear your browser's cache, maybe your viewing a cached version of your form.

Or better, view your form in incognito mode.

Let us know how it goes.

Hi have cleared the cache and this is the view on on the tablet

I tried it in an emulator, and I can see what you see:

Please try injecting this CSS code, it should fix the issue: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 

.form-matrix-table tr {

    height: 43px !important;

}

}

Result: https://form.jotform.com/81157526326962

Let us know if you need more help.

Hi BDavid and everyone else who helped with this. I finally got there and one slip on the ipad and i managed to delete the last bit and havent managed to make it work again. Your  form https://form.jotform.com/81157526326962 looks spot on but I cant seem to copy it. is there anyway that i can clone?

Many thanks and apologies

You can clone the form by copying the link and inserting it to your Import Form that can be found when you create a  new form.

You can check this guide for more information.How-to-Clone-an-Existing-Form-from-a-URL

Done . Many thanks much appreciated .

I spoke too soon

it doesnt look like yours 

https://form.jotformeu.com/81164334543352  

I have checked the cloned form and the input table seems to working correctly.

Can you give us more information on what the issue may be? Did you receive an error message when you clone the form?

Thank you.

Hi I have refreshed and it seems ok now.

apologies and many many thanks 

odile

Good to know the issue has been resolved.

If you need any further assistance, please let us know.

Thank you.

Hi Richie_P 

the form shows great on tablet tablet and Pc but not on a phone . Is there anything we can do to solve that?

thanks

odile

You can add these css codes into your form to make the input table mobile responsive.

@media screen and (max-width: 480px){

#id_34{
    width: 100px!important;
    position: absolute;
  
    margin-left: 184px!important;

}
#id_32{
width:50px!important;
}
 
}

Guide:-How-to-Inject-Custom-CSS-Codes

Screenshot:

Please give it a try and let us know how it goes.

Thank you.

Thanks that’s great that seems to work well.

however. Have noticed another problem . I’ve attached two photos the first me s the for, as I was filling it in and the second is the receipt received. Nt all the times are coming through on the form 

Hi just done another form and times which are say 36.67 seem to be ok but for times bigger than this eg 200 breast 2.58.56 these don’t come through. Didn’t know if that would help

I have moved your question to a new thread, so that we can assist you better.

Please follow this link.https://www.jotform.com/answers/1457809

Thank you.

UPDATE: The input table field has a new type called Multi-Type Columns. You will now be able to set different type for each column such as Single Choice, Checkbox, Textbox, and Dropdown.

There are many features when you use the Multi-Type Columns:

1. You can change the row and column names.

 

 

Additionally, you can set the row and column names by clicking on the gear icon.

 

 

2. You can add rows and any type of columns by clicking on the add row and add column.

 

3. You can set options for dropdown type by clicking on the downwards arrow.

 

 

Enter your dropdown options.Click on the Save Changes.

 

 

4. You can delete the rows by clicking on the cross (X) that exists for each row and you can delete the rows by clicking on the downwards arrow that exists for each column.

 

 

5. You can change the types of each column to Single Choice, Checkbox, Textbox, and Dropdown by clicking on the downwards arrow that exists for each column.

 

 

You can clone this demo form to your account: https://form.jotform.com/nelly/multitype-input-table-form

 

You can look at this guide to understand how to clone an existing form from a URL: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

 

 

If you have any question, please let us know below.