Floating labels: Using patterns to boost your contact form conversions

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 on my 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.

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 as shown here. 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store