Consider using the float-labels UX pattern in your forms. Labels are displayed as placeholders. When the field get the focus, its label is reduced in size and moved above or to the field’s top left corner.
Your conversion rate will thank you!
Shorter forms have a few advantages:
- the user are less likely to abandon a shot form than a long form (even when the shorter length is only perceived, as with floating-labels)
- short and simple forms work better on mobile devices
- the float-labels UX pattern is becoming very popular. Your visitors will recognize it and are already familiar with it.
Float-label can be easily implemented with just a few changes in your HTML and CSS. Chris Coyier wrote a few functioning examples of float-labels on CSS-Tricks.
Franco Folini lives and works in the eCommerce territory, a wild area between the Kingdom of Technology and the Kingdom of Marketing. He speaks fluently the language of both realms. For many years, Franco has been helping people bridge the divide and successfully collaborate.
If you want to find out more about Franco, visit his LinkedIn profile or send him an email folini[at]gmail.com
What was the uplift in conversion rate resulting from the floating labels change?
I don’t have a specific number, but improving the user experience and reducing the friction always benefits the conversion rate.