Disappearing input field placeholder aesthetics for web apps

Question

Background

Users may provide various categorized input entries (e.g., danger, warning, avoid, and relax), such as those in the following image (e.g., "Relax #1", "Avoid #1", etc.):

Problem

When first shown, the screen appears as:

The blank areas (in light blue) below each category turn into autocomplete input fields when they gain focus. However, showing four input fields would clutter the aesthetic.

The idea is to give the user a WYSIWYG experience. Once the user has completed editing, the inputs disappear. The result is what other people will see (who do not have editing privileges).

Invisible input fields are interesting. For example:

1. The user clicks on "Unknown User".
2. An input field appears, allowing the user to change the "Unknown User" text.
3. The input field loses focus, the new value is saved, and the input field disappears.

Question

What would be a good way to indicate that each category can have text added below, without necessarily making the autocomplete field visible all the time?

Answer 1

If you only had one category I'd suggest using a call to action, such as saying "click here to add". However, having four of these won't look very good, so I would use dummy items instead, indicating that the region is meant to hold items, the kind of items you expect, and providing a way to edit the first item. Something like this:

Answer 2

I could consider some placeholders like so:

When any of the place holder is clicked, a textbox/autocompelte box becomes visible:

My recommendation is that even if the list already contains 1 item, you keep the place holder so that the user can know here to click to add further items to the list. This way, you have provided affordance so that people know you can click on some area of the list to add more items.