Jetpack contact form placeholders

Jetpack is rapidly zooming beyond its early reputation as the slow boat to China, and becoming a plugin to be reckoned with – as a suite of goodies rather than a single function plugin.

Today I tried out the contact form in Jetpack. Previously, I have almost always used the magnificent Contact Form 7, and the premium Gravity Forms for meatier interactive form content.

The Jetpack form is really easy to construct (or use the default form), but I wanted to use placeholders instead of labels. Leaving aside the controversial issue of accessibility (which is improving all the time), there appeared to be no easy way to do this in Jetpack.

In the end, a simple JQuery solution did the trick. This will actually work on other forms, but the previously mentioned ones already have built-in placeholder capability.

jQuery(document).ready(function($) { $('#my-field-id').attr('placeholder', 'My placeholder text'); }); 

The above checks that the page is loaded, then dives in and looks your ID or class with the attribute of placeholder and puts in your text.

You can hide the labels if you want, with a bit of CSS. This is best done with a minus text-indent, or the trendy new clip technique. Ideally, don’t use display:none as this will completely hide the label from screen readers, meaning especially blind or partially sighted people using specialist browsers probably won’t be able to use your form.