Inline labels (labels that are displayed inside the actual form field) are great for a number of reasons, particularly because they save space and create a much cleaner design experience, which is a must in the ever-growing world of mobile devices. However there is a downside; they disappear when you start typing, which can result in the loss of context.
This might not be a huge problem when it comes to simple information or you only have one or two fields, like your name or email address, but as soon as you add more fields where different type of data is needed, inline labels become problematic. One way to overcome this problem is with the use of floating labels.
Floating labels refer to inline labels that are reduced in size and moved to the top of the field after the user focuses it and starts typing:
You can see the effect built in Unbounce here:
_ WARNING: YOU ARE ENTERING DEVELOPER TERRITORY _
Step 1. Ensure you have inline labels (placeholders) working following the instructions here: http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields/#content7
Step 3. Paste the code which you can find in our GitHub here.
Step 4. Once you’re done, open the Stylesheets section at the bottom of the page builder and paste the CSS code found here.
Step 5. You can change the look of the floating label by editing the type of font, size and color. You can also play around with the placement by changing the value of the ‘top’ property.
Step 6. Save and republish your page to see the effect.
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.
If you’d like to know more about the plugin used for this tutorial and all the options available, please visit the creators page here: http://clubdesign.github.io/floatlabels.js/