How to group common (to a list and other input groups) input fields

Here's my scenario - I have the following three input fields:

  • Type
  • Remarks
  • Uploads (Popup which allows users to drop files)

Now, these three fields are associated to a person object. The user has the option to select an existing person (from a drop-down list) or add a new person.

I have laid out the fields in the following manner.

On the top of the page, I have the three fields (type, remarks, uploads) one after the other. Below that, the user has the option to select an existing user (from a drop-down) or create a new user via a form (which is collapsed by default).

However, this can be confusing for the user (for example, if the user does not select a type before selecting a person, the person would be added without the type to the model and this would fail when submitting to the backend).

What would be the best way to structure this form?

Screenshot: enter image description here (the "Or Add New" header is collapsed right now).

Tags: