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).

  • is unclear what is a contact type. Could you explain this please? Commented May 6, 2016 at 13:07
  • why do you have the options of selecting existing contact in a add new contact form? Commented May 6, 2016 at 15:10
  • @MarcoTatta Contact Type is Sales Contact / Marketing Contact / Invoicing Contact / etc. Commented May 7, 2016 at 19:56

4 Answers 4


I would think something like this. Give them a drop down to select existing contacts, with an option for "New contact...". If they select an existing contact, pre-populate the form. If they select "New contact..." clear it out so they can enter details for a new contact.


download bmml source – Wireframes created with Balsamiq Mockups

  • Yes, this is what we ended up implementing. My bad for not updating this sooner. Thanks to your answer though, I got the notification. :) Commented Oct 5, 2016 at 8:30

A few points:

1) Make sure there is a default state so that if a user type is not manually selected it doesn't trigger a fault with the back-end, is saved into a findable default place/category/type, and the info is not lost completely.

2) What is the most vital information to capture? As this is titled "Add a contact" I suspect it's the user type and user name; bring them together at the top so that the user will, at the very least, fill those in before they get bored.

3) Put the less interesting and less vital stuff at the bottom.

4) Only use "an" before a vowel sound ;-)

Something like this:


download bmml source – Wireframes created with Balsamiq Mockups


To me the main function of your form is to create or update a contact. So I'd suggest renaming it to: Create / update a contact. Then move the drop-down with existing contacts and the button to create a new contact to the top, side-by-side:

[ existing contacts drop-down ] [ + new contact ]

This makes the purpose of the modal much clearer. Don't show the other fields, or dim and disable them. After the user picks one of the two options show the other fields. If an existing contact was selected populate those fields, otherwise leave them empty.


Without knowing what would be the platform and other elements that go along makes it difficult to suggest for best possible approach at its interactions. By general you have to conform with the flow of importance or how most users perceive the entries. Don't sacrifice the functionality and always check if the elements are sensible.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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