The context:

The user is creating a client record. Against each record their could be one or more contacts (people) provided. Often this will be adding 1 or 2 but could sometimes be up to 5-10.

The task:

Simply, The user will add each known person to the list then continue to the next step in the account creation process. Changes are saved when the page is submitted (no technical need to do this at each line).

Current mockup:

This is what I have proposed. The top one is the default view. The second is when a contact has been added. Note: There will be a delete line option. Add contacts


Are there any potential issues with this approach?

  • Will the user expect a 'save' option at the end of the line? (saving is technically done when the page is submitted).
  • Is the placement of the 'Add another' / add new line appropriate?
  • Would an 'Add contact' button be more appropriate near the top of the list?

3 Answers 3


This looks like a pretty good starting point. To explicitly answer your questions:

Will the user expect a 'save' option at the end of the line? (saving is technically done when the page is submitted).

Do not present a 'save' button unless it actually saves the data! So if data is only saved when page is complete, I would not recommend having line-by-line save buttons.

This does raise several questions, though:

  • How will errors be presented? If I've just filled in 5-10 contacts, will I get errors for all lines at once? This might be much harder to deal with than checking each field as it is entered. You should consider using in-line validation, presenting alerts OnChange (e.g. if email address does not appear to be valid -- no '@', for instance.

  • Can you auto-save each field OnChange? This would lessen potential errors if something crashes after the user enters a number of contacts but has not yet clicked the explicit save option.

Is the placement of the 'Add another' / add new line appropriate?

Would an 'Add contact' button be more appropriate near the top of the list?

Given the current specification, it makes a lot more sense to me to have the button at the bottom of the list, where the new line will appear. However, you may want to consider whether you need the button at all, versus simply adding a new blank line when the line above is typed into. This is the approach that iOS contact pages take, for instance, and it seems to make it easier to not break the user's flow.

I would consider something like the following flow:


download bmml source – Wireframes created with Balsamiq Mockups

  • 3
    +1 I like some of the ideas in this. I wonder, when a user first arrives at the page could they have a moment where they say "Oh no, I only see one row. But I want to add 5 contacts"? Is there a way to reassure them or hint at the ability to add more?
    – Jay
    Aug 17, 2012 at 8:27
  • 3
    A word on the in-line validation: This should be implimented with intelligence. Don't validate on every change, because the user will then get the nice message: "This is not a valid adress" immediately after type in the first letter. (Of course it's not a valid adress, but I'm not finished yet!) So the best moment to validate is onBlur. Aug 17, 2012 at 11:02
  1. Now you may want to add a Save button for this page so that the user knows that he added all of those contacts successfully. However, this is not absolutely necessary and it depends on the context of this page and the way you are using the Save button throughout the application.

  2. I think the position of the 'Add contact' is alright and it suggests and it follows the flow of your UI. I would not recommend putting this button on the top because if you had 100 contact records, each time you'd want to add another one you would have to scroll back to the top to do it.

Some suggestions:

  1. You might consider adding a divider in between every contact to get a better visual separation of every record. Also try changing the background of that row when the user hovers on it. That will work as an indicator and show them on what row they are at.
  2. I am not sure about the position of the 'Edit' button. What happens if the email address is too long? I'd suggest showing the 'Edit' button only only when the user hovers that row or make the 'Edit' text more like a smaller button sticking out of your container upon hover.
  • Adding extra lines on the screen can often add extra elements that the user needs to process visually and aren't always helpful, so adding a line between each input row might get busy. Having the read-only entry and the input fields seems to provide sufficient visual distinction.That said, I'm not sure why the entries need to convert to read-only with an edit button after entry. Why not just provide all rows as input fields with alternate row colors? The user can quickly go back and edit with less clicks (no clicking Edit button).
    – Dmacatude
    Aug 7, 2015 at 19:07

Working on something similar, it may be more complicated than it seems to add multiple fieldsets with an auto-append way

I would like to hear your opinions about the following issues:

  1. In the initial state should the user see that it is possible to add multiple fieldsets?

  2. The new line added should appear just when the user starts to type in the first field or on focus out of the last field?

enter image description here

Your Answer

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

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