Netlify-cms: Add help text to fields

[guayom]

This is a feature request.
Sometimes you need to give special instructions on how to fill a field.
For example, preferred image dimensions, the format for a phone number or just some help text you want to give to the user, like "This field is not shown on the page, but it is required for this and that reason ... "
Generally this text is shown below the field label or below the input.

It could be declared as such

- {label: Body, name: body, widget: markdown, helptext: "Your help text here..."}

I've found that this is an extremely useful feature. I use a lot in Dato. Many users don't edit the site very often, and they forget how they should fill some of the forms. Help texts solve that problem.

[t1merickson]

I like this idea— any ideas on how to visualize it? is there a screenshot of Dato you could share?

[erquhart]

@neutyp Dato takes the standard approach, light gray text under the field:

[tech4him1]

Any design considerations with having it above the field (right below the field name) vs below the field?

[erquhart]

That'd be tough for us considering that we're using dog ear style labels:

I think text below would work well - any specific reasons to place them differently?

[tech4him1]

Ah, yes, our type of labels would make that hard, so I think below would work just as well. Personally, I always like to have help text next to the label, because I see them as accomplishing the same purpose. They both explain to the user what to "put in the box".

[erquhart]

That's a great point. @neutyp?

[t1merickson]

Yeah, I'm not sure, here. Putting below is certainly good and fine if we can ensure the field/input/widget is only one line tall, which will certainly not always be true. If it's taller than one line, it feels visually too separated from the context.

At this point the best course of action would be to mock up some experiments of it located in different locations with differently sized fields/inputs/widgets; then discuss here visually

[erquhart]

Great point on widget height, I'd say it can't go underneath considering that.

[speexy]

I personally like a help-icon that shows me more info on click or hover for a quick reminder.

[kyleoliveiro]

What needs to be done for us to move forward with this feature?

[erquhart]

@kyleoliveiro someone needs to provide a design approach that we can agree on. After that, it can be claimed and implemented.

@neutyp I'm sort of reconsidering now - Contentful also puts help text underneath, including large fields like the markdown editor. I'd say let's get the feature in, and we can improve the UI afterward. Help text underneath could be a fine initial approach. Thoughts?

[t1merickson]

@erquhart Yeah, it's better than having no helper text. I'd say put it in, below the field, then move if we think of a better idea later.

[erquhart]

So that said @kyleoliveiro, if you're interested in taking it on, it's yours!

[gil--]

I'm willing to begin developing this under the field. Didn't realize it was requested as i had created https://github.com/netlify/netlify-cms/issues/1426

[tech4him1]

@gil-- Awesome, it's yours! Feel free to ask here or in our Gitter if you have any questions.

[gil--]

One last thought after reading through the discussion here, I could add a secondary option on all widgets called: notePlacement: top/bottom OR showNoteAbove: true/false where it's under the widget by default as per https://github.com/netlify/netlify-cms/issues/552#issuecomment-395568749 and the user is able to show above widget on a case-by-case basis using the secondary field option.

However, I'll design out a mock for note text below widget and get that working before working about too many options. ;)

[erquhart]

Agreed, getting simple support in for text below the field would be ideal, then we can iterate from there.

[gil--]

I've made a PR for this feature request, https://github.com/netlify/netlify-cms/pull/1429

Let me know what you all think?

[alexandernanberg]

This can be closed since #1429 was merged correct? 😄

[tomrutgers]

Correct! Thanks @alexandernanberg