2

Form where users can add/remove extra 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?

  • why can't you delete username 2 and 3? – Midas Apr 16 '16 at 15:42
  • 1
    @Midas I figured that if the form is loaded with 3 inputs, it would encourage users to enter extra usernames. Probably best to give the option of deleting 2 and 3 though, you're right. I've changed that now, thank you. – Jack Lewin Apr 16 '16 at 15:49
  • you should allow deleting 1st field as well, what if I change my mind and want 20 users except the one on top? do I cut and paste all 20 one field up? – Aprillion Apr 17 '16 at 18:18
  • @Aprillion I had considered this, but then if the user goes and deletes all the fields, they've got nothing to work with. I suppose the delete button could be disabled when there's only one field. – Jack Lewin Apr 18 '16 at 14:48
  • Side question: what you do you call this UI paradigm of adding new fields/inputs? "Multiselect" comes to mind, but that probably has other implications – Andy Ford Nov 12 '18 at 9:02
5

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.


mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I haven't tested with users, but I don't find it intuitive. If the designer isn't comfortable with using it, you're not off to a good start! I see your point, though. Having the add button separated from the username fields certainly makes sense. Also solves the problem of the bottom 'remove' button jumping to the left. Thank you! – Jack Lewin Apr 18 '16 at 14:51
  • and the delete icon shifting around the interface is not good practice either – colmcq Nov 12 '18 at 13:27
1

I am not saying this implementation of adding multiple websites on a form is the best design, but I think it might be cleaner than your solution.Multiple Websites on a form

You can add as many sites as you want before you save, and the ones with a valid website will be saved when you click "Save."

As is implied by the hamburger menu, you can also reorder them.

After clicking "Add Button" multiple times and filling in the last site.

Clicking "x" on all the sites leaves one blank field.

  • Not sure I agree with using the hamburger to signal reordering - to me that implies each input has a menu. Like the idea of leaving one field blank when you delete them, though! – Jack Lewin Apr 18 '16 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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