Product Designer & front-end Developer

Takes 3 min to read.

Floating labels: Using patterns to boost your contact form conversions

📝 This article was originally published on Medium.

If you prefer, you can read the original version here.

Edit: Since this post was written, I redesigned my website twice 😅. So the pattern is not being used anymore (since I don't have a contact form on the website anymore). I believe the content on the post is still relevant and shows a nifty way to implement it, though. Hope it helps you!

I’ve launched my website about two weeks ago and was surprised by the number of inquiries I had received from the contact form at the bottom of my index page.

As a UX Designer, I’m always seeking for patterns and standards to improve mine and my client’s conversion rates, and when I first saw Matt D Smith’s floating label pattern, I knew I wanted to test it on my website.

The thing is that my website took almost three years to release its beta version (because, you know, there’s always something more important to do rather than personal stuff 🙈), and after two weeks live, my mailbox had received more emails than ever before, and even though I don’t think that’s only because of the pattern, I’ve decided to create a post showing the code behind it. Here’s the pen:

A bit of background

Floating labels were born in 2013. Matt D Smith first introduced them on this shot, and since then, it had become in one of the most discussed design patterns so far.

To be truly fair, I think both supporters and detractors have exposed valid arguments for and against the use of floating labels. Here’s Chris Coyier’s opinion on the matter, Brad Frost’s pros and cons, one of the most bitter critics, and Matt Smith’s reply to it. They’ve all made good points on their assumptions, so I’ll leave them all the theoretical stuff and focus on the practical side. Let’s dive into it!

How's my approach built:

I relied on two awesome CSS features to create this pen: Sibling selectors and pseudo-classes. The mix of this underrated yet powerful techniques had created this result:

The pattern being used on my former contact page.
The pattern being used on my former contact page.

One of the most common concerns about floating label patterns is that the placeholder becomes the label. That’s a huge usability mistake. The trick here is that the label is not displaced: It’s visually hidden (using opacity: 0; which still makes it readable for screen readers) until you type something on the input: When the placeholder disappears, the label becomes visible. How’s that possible by using only CSS? Thanks to the :valid pseudo-class.

The :valid pseudo-class ensures that the label (sibling of the input field) becomes visible only when the input has at least one character, and the placeholder had disappeared. We do so by using sibling selectors (learn about them in an easy and fun way in this post which explains CSS selectors using cats).

There’s only one thing to consider, and it’s validating the input content: the :valid pseudo-class is used to check if there’s content inside the input, but it’s not helpful to determine if what the user had inputted is a valid email, for example. So, the :valid pseudo-class should be used with the help of any frontend validation library (in my case, Parsley, but you’re free to use whatever you like) to throw an error if the user had inputted invalid content.

Wrapping up

So, that’s all folks! With less than 50 lines of code, you can implement one of the most extended design patterns on your website, and boost your contact form conversions. Dependency-Free, Cross-Browser compatible, no need to use Javascript, and fully WCAG compliant. Don’t forget to fork and use the snippet wherever you want, share this post if you like it, follow me for more tips & tricks, and let me know how it goes!