What term to use to show / hide pre-filled fields in a form?

Question

We have a form that is about 70% pre-filled. However, in between the pre-filled input boxes, there are a few ones that needs to be filled-out manually.

However, when we show the form, we only want the person to fill in the few ones in between that need to be filled (empty input boxes) and hide the pre-filled ones so that the user doesn't need to scroll through a long form. The pre-filled items are also most likely to be correct (populated from an existing record in database).

The problem is, we still like the user to be able to see the form in its entirety in the event that one of the pre-filled items need to be changed.

Am thinking of a button / link somewhere to say "Show / Hide pre-filled items", which will then expand / contract, depending on the user's needs.

Prefilled Hidden:

Prefilled Shown:

Of course, the form is longer but the above is just to demonstrate the concept. I am wondering if the term for "show / hide" is correct / clear enough or is there a better way to phrase it?

Or is there another way to do this?

Answer 1

It's always a good practice to show full form to users. Because user needs to verify the data which are auto-pulled. Example: Login from facebook to any app and user's profile is filled with facebook data which user has given over there but in reality there will be lot of changes that user can edit and change.

In your case show the form with filled data instead of hiding it. And make a design difference in filled data and unfilled data by using grey and black to text and text box .

I think this would help.

Let me know if i can help you more

Answer 2

When you want to save space, replace the filled in fields with non-editable text with “Edit” button next to it. Such representation of fields can be slightly more compact, but the user still sees all the information.

You can usually divide the fields into multiple sections (e.g. name, contact information, payment settings etc.) with only few fields, where all (or probably all) fields will be either pre-filled or empty and therefore requiring user action. In such case, arrange the fields in the sections and attach the “edit” button to the whole section. Example:

─ Contact information ─────[EDIT]─
First name:   John
Last name:    Doe
E-mail:       [email protected]
Telephone:    (none)

─ Foo bar information ────────────
Foo:          ╭──────────────────╮
              ╰──────────────────╯
Bar:          ╭──────────────────╮
              ╰──────────────────╯

                      ┌─────────┐
                      │ Proceed ┃
                      └━━━━━━━━━┛