How would you design a form with many dynamic fields?

Question

We have a form that allows a user to dynamically add inputs for fields. For example if you have a form for tracking projects, you want to dynamically add tasks to that project. Just to clarify my language: you dynamically add inputs for the task field. The problem is, we have 50 of those fields. Our current solution presents all 50 fields with a plus (+) next to the field to allow them to add another input box for that field. The labels for the field are to the left of the field and each input box that is added goes below the current input box.

Please trust that dynamically adding inputs is the right solution, please trust that it has been thought out, please trust that this is what the users wants, please trust that we have gone down various other roads and this is the best solution.

My question is about presentation: How would you do it?

Please keep the answers to UI design. We already have the database schema figured out.

---

Update

Current Solution is a web based application that uses JavaScript to dynamically add new inputs and looks very similar to Corey Trager's drawing:

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

Repeat 50 times...

Answer 1

Little + icon somewhere near the last task field with a link that says "Add new task". When clicked, new task field appears below current last task.

Answer 2

I would use a drag-and-drop approach, allowing the user flexibility in positioning. This is possible even using a web-application. See, for example, Dropthings (http://www.dropthings.com/). This provides all the code you'd need to implement drag-n-drop in an ASP.NET environment.

What environment are you using?

Answer 3

Thinking on from what @zachary suggested:

Display the form as it was designed to the user with the default/ last saved number of fields. At the bottom of the form place a DropDownButton that has a + icon and the words Add Field (+ Add Field).

Dropping down this button will show the list of all fields that are available. When the user selects one of these the form will grow (enough to house the new field) the new field with label will be displayed at the bottom of the form and the add field button will show below the new field.

---

Edit:

To follow on the theme of ASCII diagrams this was is what I think my suggesting would look like.

Task [......................]
        [ + Add Task ▼]

Foo  [......................]
        [ + Add Foo  ▼]

Answer 4

So, what you described can look something like this? If not, can you try "drawing" it please?

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +

Foo      [.............] +
         [.............] +
         [.............] +

Is this a web page or other technology?

Answer 5

If this is a web app then you could use Javascript to dynamically manage the additional fields. Depending on whether you can process the form asynchronously, you could use Ajax which would simplify some aspects of the form management.

Basically, each task would need an individually named and then you would need to append a new uniquely named form input element for each new field that they choose to append. Then you would have to loop through the form using Javascript before submitting the form or you would loop through the POST data after its submitted.

Of course, this introduces Javascript as a requirement for your web app which isn't always viable.

Answer 6

This may be completely off the mark, but depending on the requirements for the fields, and if this is the configuration or the data entry interface.

If the fields do need to be open for data entry, you could leave have them defined as a list of fieldnames and values, and use click-to-edit to dynamically place input boxes on each element as needed.

This solution could reduce visual noise as well as save vertical space. As you can see the form input takes up more space than plain text. You can cater for keyboard users by capturing tab events and triggering the next field's click to edit functionality.

It could look something like this. ( having just clicked on Foo to edit the content)

Name   : Joe Blogs
Phone  : 555-1234
Cheese : Stilton
        -----------
Foo     | SNAFU   |    
        -----------
Bar    : fubar
Fifty  : Whatever

(+) Add new field...

---

OR

If this is a configuration page, ie where you add new fields to be filled in on another screen or stage in the process, you could define a list of fields sequentially, which are then displayed to the user for data entry.

              -------------------------------------------------
Define Fields | name, phone, cheese, foo, bar ..(etc).. fifty |
              -------------------------------------------------

Then the fields are displayed in a huge grid as per the current UI.

Answer 7

Ok, now that you've added my diagram to your question, my answer is....

I'm not saying this is better, but it's an alternative. Here's a different way that replaces horizontal scrolling with clicking. Instead of navigating from "tasks" to "foo" to "bar" by vertical scrolling, use "tabs", even if you have to stack them several rows high. It does make it easier to navigate in a random order. You could even switch back and forth from this tabbed view to your current "show all" view.

[task][foo][another tab][another tab][etc][etc][etc][etc][etc][etc]
[row2][fred][another tab][etc][etc][etc][etc][etc][etc][etc]
[row3][another tab][wilma][etc][etc][etc][etc][etc][etc][etc]

[task1     ]+
[task2     }+
[task3     ]+

Answer 8

Could you not use a system similar to that implemented by face book, that has a single textbox, but allows multiple items to be added to it? There are pre-coded solutions, such as this one, which is for mootools v1.2, or this one which is for jQuery. And you could even allow auto-complete of the tasks already in the system.