Floating labels: Using patterns to boost your contact form conversions
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
- Originally published on UX Collective
Comparable Experiences: The Starting Point for Inclusive Design
A post about inclusive design and accessibility, adapted from a conference delivered on May 18 in Porto Alegre, in the UX Conf Brazil 2018.
- Originally published on Medium
What I have learned from my first Speaking Event
A while back, I had one of the biggest challenges of my career so far: I had to speak about accessibility for 10 minutes, alone, in front of more than 400 people with expertise in the subject, at the UX Conf BR 2018. I wrote a post about it!
Towards privacy-first email
With all the hype that is going on with Hey.com, the new email service, it is time to talk about a much bigger issue than a cluttered email inbox: Privacy.
- Originally published on UX Collective