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.

Eva Quilez website now live!

Eva Quilez works internationally as a highly sought after make up and special effects artist. She has worked with Pedro Almodovar and Penelope Cruz, as well as Vinila Von Bismarck and others.

Having been let down by a previous designer, Rigby & Jones stepped into the frame to create a snappy and very simple, clean layout.

Eva’s work base is in both Spain and the UK, so we wanted to produce a site that was bi-lingual, and not by simply duplicating all the content into a second site.

This is something I’ve wanted to have a go at for some time, and this site uses a very elegant system to allow inputting in both languages (it is extensible, so other languages can be added very simply if needed). You can flip between Spanish and English very quickly – using an XML feed. All other layout aspects remain the same to allow for fast loading.

The ‘fast-view’ gallery is purely CSS and of my own design (I must give it a better name!) and we’ve used it before, famously on www.flukeshot.co.uk

After an initial chat on Skype, Eva was uploading and adding picture captions very quickly from Barcelona whilst we polished the design here in London.

The site has a very clean architecture and is valid XHTML as well as being happily iPhone compatible.

You can visit Eva’s site here:

www.evaquilez.com