How can I provide a simple dialog for a user to enter multiple email addresses (for invitations)?

Question

I'm creating a dialog (modal) that asks the user to enter multiple email addresses to which an item on the website is shared to. The dialog is about 530x500 pixels big.

Right now I'm asking the user to enter an email address in a textfield and hit enter. Upon hitting enter, the email address appears as a box in a vertical stack of boxes below the text field. Each box has a remove link so the user can remove any email address they've entered. This basically looks like a vertical version of the usual 'tag' boxes used in Hotmail or Yahoo's webmail's to/cc/bcc text inputs.

Any better way of doing this? Especially taking into account common copy-paste scenarios, or integration with third-party address book services.

Answer 1

The description you've given sounds just fine to me - the only change I'd make would be to allow the user to enter multiple comma (,) or semi-colon (;) separated email addresses at once, with your code separating/parsing them into distinct addresses when they user presses enter.

This takes care of the copy/paste scenario - the key trap is not to be too sensitive when parsing the addresses, as there is wide variety in "valid" addresses.

[Example: I've had an e-commerce site refuse my user registration because my email address contained a period (.)! I took my business elsewhere.]

Answer 2

You could provide a textarea to paste in clipboard information or comma separated email adresses. Upon pressing enter or on change to this textarea you could parse the content and list the email adresses in the stacked boxes like you already do. This way the user can remove unwanted adresses or add others

Answer 3

If you fancy a little javascript you could setup a simple "observer" textarea (or texfield);

1) you user starts typing some email address, and your js checks each typing;

2) once your script recognizes a potential end-of-address char (eg, space, comma, colon) parses the field's content

3.a) if it is a valid email, adds it to a (visible) list and clears the input field content

3.b) if it isn't a valid email address some error feedback appears somewhere

4) [repeat from 1) ]

note 1: consider that each built-up list element (the single added addresses) should have a simple removal icon;

note 2: you can store each correct address in some hidden field (easiest for removal).