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?


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.