How to display and Handle two different forms with overlapping element?

Question

I have two forms of which some elements overlap.

I was wondering how should I approach the situation, there is a possibility to use tabs, one for the common fields and other two for the corresponding form elements for different categories. Other option is I can save the common elements in a temporary database on 'Next' button click then present the relevant form based on the selection of the category in the previous page. What else can I do ?

Sorry if I wasn't clear the first time.

Let me try to explain with an example, say I have a signup page. And my website supports two kind of users, user A and user B, if user A wants to signup he/she has to fill signup Form A and likewise user B fills up signup Form B. Since both of these users are of different type(different role on the website) they provide different kind of information(elements) to signup with. But some information(elements) is common on both the forms, for example like : Name, Email etc. The actual forms are big and complex and ask complex data from the users of both types but some information they ask are similar. And I don't want to make two different forms with some of the same elements.

Answer 1

You say that you don't want to make two different forms with some of the same elements. While you may have your own reasons for this, it will probably be more useful from the user's point of view, as well as being easier to build.

Assuming the needs of the user groups are quite different, then they will have different reasons for signing up. Assuming you have two user groups, it's likely that they'll easily be able to decide which group they belong to, and make the correct choice at the start of the signup process. As a result, it is unlikely that they will need to see (or even be aware of) the 'other' sign up form.

You could use AJAX to load different fields conditionally, but this requires extra complexity to design, will probably take longer to build, and will require extra user and QA testing. Also, if the two groups' required fields differ substantially from each other, it could increase the likelihood of user error. Some users may not notice the fields being added, removed or changed based on their earlier choices until it is pointed out to them.

The simplest option is likely the best. Have separate forms for each of the user groups, providing a clear and focused journey for each.