JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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 to display many fields on a single line?Asked by Harold on April 03, 2016 at 09:58 PM
I am looking to create a form which will require multiple types of fields on a single line to assess past user experience and comfort. As an example, I would like to create something like the following (each of these fields will be on the same line):
Static Label (describing the activity in question)
Radio Button ("do you have experience with this activity")
Scale ("rate your comfort/interest level with this activity 1-5"; this could be radio buttons in a table or a drop down or something similar)
Dropdown ("limitations as participant", 3 selections "none, few, many")
Radio Button ("do you have experience teaching/coaching this activity")
Scale ("rate your comfort/interest level with teaching/coaching this activity 1-5"; this could be radio buttons in a table or a drop down or something similar)
Dropdown ("limitations with teaching/coaching", 3 selections "none, few, many")
Comment section (text area)
Obviously that's a lot to have on one line but each field can be quit small.
The form will have multiple different sections, each having a different number of these activities/lines. A table or similar format would be ideal. Below is a snippet of the physical form I'm trying to recreate.
Many thanks for your help!
I think this is possible by changing the position of the fields in the form, here is a guide to to that: http://www.jotform.com/help/90-Form-Field-Positioning.
Also, as you need to have multiple fields, I think that you would need to inject custom CSS codes to achieve it, this is possible to do, but you would need to have some knowledge about CSS and of course, we would provide you with the code as well as a sample form to achieve it.
But, I think that the best way to achieve what you want, because it is easy to use and will provide you a style like you are describing, with a format and it will look good, I would suggest you to use the Configurable List widget: http://widgets.jotform.com/widget/configurable_list.
This widget will allow you to have multiple fields in a single line, without the need to use CSS or change something else in the settings of each field, the only thing that you need to do is set the widget to display the fields that you wan and that is all.
This guide will help you to add the widget to your form: http://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form.
And this guide will help you to set up the widget on your form: http://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.
Here is a sample form with all the fields that the widget could have on it: https://form.jotform.com/60939248964976.
Feel free to clone it, this guide will help you with that: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.
Hope this will help you.
Thanks for the quick response.
I actually tried using the Configurable List widget first. The problem there was that it seems set by default to allow the user to hit the + to add additional lines. I don't want that at all. If that can be disabled then CL might be a good choice.
If it's possible with injecting custom CSS code to achieve something visually similar to the table-format example I sent, that would be amazing. That format will make it much much easier for users to go through the list "at a glance". I don't know the first thing about CSS code but I'm willing to learn!
It is possible to hide the + symbol on the Configurable widget by using custom CSS. Do you have a fixed number of rows to be added on the form? If so, you may set the Minimum and Maximum row number from the Configurable List widget options.
If you want to have only one row on the form, you may set the Maximum rows to 1 so that only one row will be displayed and no additional CSS code to be added to hide + symbol.
Hope this information helps! If you need any further assistance, please let us know. We will be happy to help.
There will be several sub-groupings so I'd need to use a number of CL widgets with different numbers of lines. From 1 line to maybe 25. So maybe I can just set the min and max number of lines for each sub-grouping to be the number I want and go from there?
Okay. Please give it a try and let us know if you need any further assistance. We will be happy to assist.
I notice that you are using a Guest account which is limited to receive only 20 submissions per month. We request you to register for a free account so that you can receive up to 100 submissions per month and manage your JotForms in a place.