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?

Improve this question
5
  • why can't you delete username 2 and 3?
    – Midas
    Apr 16, 2016 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, 2016 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, 2016 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, 2016 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, 2018 at 9:02

3 Answers 3

Reset to default
8

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

Improve this answer
2
  • 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, 2016 at 14:51
  • and the delete icon shifting around the interface is not good practice either
    – colmcq
    Nov 12, 2018 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.

Improve this answer
1
  • 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, 2016 at 20:03
0

You can allow the user to add multiple rows simultaneously by embedding a stepper within the inline action that they can use to change the number of rows they wish to add before clicking on the Add button.

Further, as long as there are more than one fields, the user should simply be able to delete any field from the list of fields. Otherwise, they would be forced to reorder in case they wish to delete the first record.

Also, the deletion confirmation (if you wish to ensure that the user doesn't end up acting accidentally) can be reactive instead of proactive, i.e., the field can be removed immediately when the user clicks on the delete button but you can show a toast message with an action allowing them to undo the deletion. This would be an unobtrusive approach contrary to asking the user to confirm the deletion every time.

Here's a preview of what it might look like: Allowing user to dynamically create/remove input fields

Improve this answer

Your Answer

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

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