I'm working on a form where the user can enter multiple "disciplines" using multiple text fields, the form starts out like this:
then if they press the button (Add SUB), this happens:
As you can see the button got disabled and a new "Sub Discipline" field got added.
If they start typing in a "discipline" field another field will be created, and the same thing goes for the "Sub Discipline".
like the above image.
Does this design deliver the idea of hierarchy in the form to the user? If not, how can I improve it? Should I add a line the connects each sub with its parent like a tree?
That's what I've come up with so far:
I changed things around a bit.
now the use is presented with a box (the container of the inputs) but it acts as a button to add a new container, like this:
download bmml source – Wireframes created with Balsamiq Mockups
and on click the box shifts down and another box with the appropriate inputs is added, like this: