How to add a new contact inside a form using a contact dropdown?

Question

I have a form using a contact dropdown and I would like to add a contact if the contact isn't present in the list. I need at least 2 fields for a contact (firstname and lastname).

For example :

I've considered two solutions:

Solution 1: Inline form (displayed after clicking "Add new contact"):

Solution 2: Popup form (appears after clicking "Add new contact"):

Are these options suitable in terms of UX?
Should I consider a third solution?

Thanks! (btw, I'm not a UX designer)

Answer 1

I believe a more familiar approach would be to use a pop-up form.

Let's say in the future your product's functionality extends and now you could add more information for a contact (address, phone number etc.). In that case user might get confused that after a click the inline form has changed quite a bit. On the other hand, a pop-up form allows to extend the addition of the contact's information as much as you like without confusing the user.

Also you should consider using a button for adding new contact instead of a link.

Links take the user to a new location, such as a new web page or new section of the current page.

Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.

Source.