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.
Table of Contents:
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:
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.
: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.
More from the blog
- Takes 3 min to read.
Fancy Numbering with CSS Counters
- Takes 8 min to read.
Look Ma, No Media Queries! Responsive Layouts with CSS Grid
In this article, we’ll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It’s easier than what you may think, and since CSS Grid was built with responsiveness in mind, it’ll take less code than writing media queries all over the place.
- Takes 4 min to read.
Should I Stay or Should I Go? External links, Accessibility and New Tabs
'Opening links on new windows can be disorienting for some folks, if they are not warned in advance. That's why it's recommended to limit its usage. Providing a warning allows the user to decide if they want to leave the current window, and if so, help them find their way back. In this post, we'll discuss about the downsides of new tab links, and explore a few techniques to add an indicator to them, should you need to use them.'
- Takes 3 min to read.