1

What is the best suggested way to handle the UX for submitting multiple forms by user, The user need to submit forms.

enter image description here

Example form here:

http://jsbin.com/zogeqebilohi/1/edit.

**EDIT : **

Scenario This is a feedback form submitted by student user for his course instructors. The user registration is already done and have in a separate table. The structure of table is as below

 id | name | Gender
 ------------------
 1  | n1   | male
 2  | n2   | female
 3  | n3   | male
 4  | n4   | female

The above added forms are displayed according to gender.

 IF (Gender=male) {//Display form 1}
 else if (//display form 2)

Both the forms are similar , except the change in the course instructors.

App mainly consists of three features

  1. Course instructors form
  2. about app
  • What do you mean 'best suggested way'? Can you expand on what it is you're trying to achieve here? – JonW Aug 27 '14 at 10:33
  • THis is a course instructurs review form , to be filled by students to review the course instructors performance. I am trying to figure out the better ui/ux for the user in filling this forms – user894795 Aug 27 '14 at 10:37
  • Writing a little story to express your visin could help. Something like: The user logs in. Then s/he starts to fill in information about 1st student, then submits the form. Finally s/he reviews all content and approves.... – Esin Aug 27 '14 at 13:01
  • Will the number of instructors vary? Are you able to pre-fill the instructor names? Are there other questions and will display on the same page? – bdimag Aug 27 '14 at 17:54
2

If you're committed to having each review be its own form, there is some low-hanging fruit visual cleanup you can do, like:

  • using hr's between forms
  • aligning the text field left edges
  • increasing the vertical space (padding/margin) between text fields

Also you should commit to doing some graceful handling of the form states. For instance:

  • Confirm which forms have been submitted
  • Playback of the submitted values (in non-editable form to help further distinguish)
  • Disable the submit buttons on the forms lacking any content


Here's a rough example of these concepts in practice:

enter image description here

All that said, the advice in the other answers is sound, and it's arguably preferential to have a single form submit if you're OK with aggregating the data and parsing it later.

1

Make these fields part of a one form with a single submit button. This reduces the number of interactions for the user and cognitive load. I would also consider top alining the labels and adding padding between questions for clarity. In addition you could consider adding a title for each field-set.

1

Provide less of a cognitive load. Seeing a form like that will make the user anxious, and more than likely lead to an abandon.

Instead, why not create a form similar to this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This form provides less information at first glance, but once the user wants to add more instructors, all he/she has to do is press "add new instructor" and another row of fields will append at the very top (make sure to separate by lines, or something along the lines of that). Then allow a button below to submit everything.

  • I'm revisiting this design just now (5 years later lol) - I think the "add new instructor" should be below closer to Submit all instructors to ensure that the user doesn't have to scroll all the way to the top to add a new instructor, especially when the list gets really big. – Majo0od Aug 21 '19 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.