2

In HTML5 you can use placeholders in your forms to name fields or guide the users. I would like to use this in Jetpack forms but it seems it doesn't support it. You can add a default value like default="Your name", but the user will then have to delete this text before writing. With placeholders the field is cleared when you start writing.

Any workarounds in JavaScript maybe?

2

You can do this by means of jQuery (which means this is rather a jQuery/JavaScript question).

Put the following in one of your (already included) JS files, or create a new JS file and enqueue it, or hard-code it in between <script>...</script> tags:

jQuery(document).ready(function($) {
    $('#my-form-field').attr('placeholder', 'Please enter your name...');
});
| improve this answer | |
  • Forms in Jetpack ignores the placeholder attribute (added manually) but this will work you think? – BoBoz Apr 23 '13 at 19:56
  • Well, I don't use Jetpack Contact Form, so why don't you try it and we both know for sure? :) I'm pretty confident this will work, unless Jetpack Contact Form removes anything not wanted (after your script is executed). – tfrommen Apr 23 '13 at 19:59
  • Thanks, and will of course try it out. Although I'm not trusting Jetpack from not removing stuff. – BoBoz Apr 24 '13 at 10:59
  • Yeah, works! For others using Jepack contact forms, below is a working jQuery selector ` jQuery(document).ready(function($) { $('.contact-form input').attr('placeholder', 'Please enter your name...'); }); ` – BoBoz Apr 24 '13 at 11:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.