Allowing the user to add input fields

---

I have a form where the user can input as many usernames as they'd like. I've decided to show the form with 3 inputs initially, to encourage the user to input more than one username.

When the user clicks the add button on the last row, another input is created, and the button moves to the new input (so it's always on the last row).

There is a delete button on new inputs, but the first one cannot be deleted, as the user is required to input a minimum of 1 username.

---

Obviously this is a pretty poor interface at the moment.

Are there any existing patterns or examples of good UX that could be replicated in this scenario?

Answer

Why did you say its a poor interface? Have you tested this with your users? One minor suggestion though, I would prefer to place the add button below the fields. The add button in your design gives the impression that the action is exclusive to the last field. The username fields should be viewed as a group, therefore adding a new field should affect the group.

^{download bmml source – Wireframes created with Balsamiq Mockups}