Dynamic form placeholders

With only 2 lines of JS. Examples below or skip to the code: http://codepen.io/sconstantinides/pen/PqeVYJ

Placeholders can be used to clarify a form, replace labels, or offer suggestions. But how about highlighting required fields?

Let’s take a look at a form from Reliefwatch. Below we have fields for adding a survey question:

Our software supports several languages, and it’s prompting the user to enter both English and Spanish translations here. However, what’s not clear is that only English is required.

We could clarify this a few different ways. One solution is to add asterisks on the required fields. But these can be hard to notice. Another solution is to add “(optional)” to some of the labels. But this can also be hard to notice, especially in our case here: “Question (English) (optional)”

There has to be a better way. I propose:

Nice and clean, right?

Best of all, the code is remarkably easy to implement. It’s two lines of jQuery to dynamically add placeholders to every form on your site based on whether an input is optional or required.

Try it out and let me know what you think.