How can I design a registration form with 10 fields for multiple users?

Question

I'm in a situation to design registration form that asks A Dad [a user] to register his "Son or Sons" in a sports activity and pay for this registration.

In order to enable Dads to pay one time even if they have more than one son to register - 2 or 3 sons, for example,- Dad should add all details for every son individual. Usually, this details is about 10 fields, they are all required and there is no way to reduce these fields or details.

How can I ask Dad [a user] to add every son details individual in a simple elegant way that can be applied in web and responsive for mobile user interface (UI), in other words, I'm looking for best practices UI Patterns for inspiration in such a case.

There is no problem if a dad has one son because in this case, he will add the 10 fields details one time.

Answer 1

As in my mind, you should separate the fields into 2 types:

1. Fields which is shared between sons
2. Fields which is related to son

You can get shared information in separated section and put a section in order to let dad to add his sons. By clicking on the "New Son" button, the rest of fields will be appeared.

It is highly recommended to reduce the number of fields or at least group them. If you can not separate fields and all of them is related to sons, you don't need the first form group.

Answer 2

You'll need to screens. One for listing the number of children of the object (dad) and one for adding new children.

an editable table for listing and then a creation screen for adding new children

the listing must have functions for removing/editing children created in error or for modification

There are patterns for both these views on sites like http://www.mobile-patterns.com/

Answer 3

Seems to me that the user, in this case, the dad, is paying to register his children for the sports activity. If this is the case, then his goal is to confirm their participation, so why require all the fields to be filled at the checkout moment? Seems it would be easier to have them enter the number of registrations needed, fill the needed info to proceed, pay and then provide further details.

I think it's important to make it clear to the user that they must pay for each son's registration, for that reason I'd present each registration as products that are added to a shopping cart and make the price and item count visible as the user selects the number of registrations needed.