2

Is there any convention what to use as placeholder for contact forms?

I came up with two possible options. One is using a fake name as placeholder, with a label on the side of the input. The other one is using the description of the input as placeholder.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The version with the labels seems to be more clear, because you still have the description along with the field. But the placeholder fake name seems to be outdated.

The other version is neat and fits in occasions where there is not much space.

Are there some guidelines to follow? Or is this just a subjective decision?

bennos
  • 125
  • 5

2 Answers2

5

I like Googles vision on this. The user should always know what the input field means, even when a user is focussed on an input field (and the placeholder disappears). Take a look at the material design guidlines:

http://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field

I also like this tutorial about floating labels:

https://www.airpair.com/frontend/posts/tutorial-angularjs-css-floating-labels

enter image description here

Jeroen de Beer
  • 338
  • 2
  • 8
1

User should always know what he is doing or what information needs to be entered

Always use Descriptive labels like

Enter Your name

Enter a valid email

and never use Submit on a form button, it must be descriptive too

Here are few JQuery and JS plugins for Floating Labels

http://clubdesign.github.io/floatlabels.js/

http://labs.mikemitchell.co.uk/FloatLabelJS/

Ahsan Idrisi
  • 713
  • 1
  • 4
  • 6
  • In my opinion you should not use Javascript when there are so many simple CSS only options for floating labels. The first example I could find just by asking Google: https://codepen.io/simoberny/pen/gpddYQ – laEm Jan 29 '18 at 08:42