Here's a handy method I came up with to "move" labels inside form fields, to save real estate. It also degrades gracefully if the user does not support JavaScript. It depends on jQuery.<\/p>\n
<\/p>\n To take it a step further, if we want these prefilled values to be wiped out when the input takes the focus:<\/p>\n Here's a handy method I came up with to "move" labels inside form fields, to save real estate. It also degrades gracefully if the user…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5,25],"tags":[37],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/225"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":3,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<form action="" method="post">
\n\t <div class="field">
\n\t <label for="name">Name<\/label>
\n\t <input type="text" name="name" id="name" \/>
\n\t <\/div>
\n\t <div class="field">
\n\t <label for="email">Email<\/label>
\n\t <input type="text" name="email" id="email" \/>
\n\t <\/div>
\n\t <div class="field">
\n\t <label for="message">Questions<\/label>
\n\t <textarea name="message" id="message"><\/textarea>
\n\t <\/div>
\n\t <div class="form-controls-no-js">
\n\t <input type="image" src="\/img\/submit.png" alt="Submit" \/>
\n\t <\/div>
\n\t<\/form><\/code><\/p>\n <\/h3>\n
jQuery<\/h3>\n
$('form label').each(function() { $(this).next().val($(this).html()); $(this).hide(); });<\/code><\/p>\n$('form label').each(function() {
\n\t $(this).hide();
\n\t $(this).next().val($(this).html());
\n\t $(this).next().focus(function() { if($(this).val() == $(this).prev().html()) $(this).val(''); });
\n\t});
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"