[Tips & Scripts] Floating Inline Field Labels

  • 12 February 2016
  • 6 replies
  • 196 views

Userlevel 3
  • Former Unbouncer
  • 23 replies

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:
http://unbouncepages.com/floating-labels/

**************************
_ WARNING: YOU ARE ENTERING DEVELOPER TERRITORY _
Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
**************************

Scripts Needed:
Grab the latest javascript here:
https://gist.github.com/victorzen/465390156b3a94790832

Instructions:
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 2. Open the Javascript console in the builder and create a new script, with placement set to HEAD.

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.

Testing:
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.

Conclusion:
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/     


6 replies

Awesome tip Vic!  I look forward to trying this one out.

Wow, this is pretty cool… Definitely need to give this a try on some pages. Certainly a good a/b test. For those who try it out (myself included) please note the differences in conversion rates should be noted and post them here. It will be interesting to see what, if any, impact this bit of code has on CRO.

Absolutely, Joe! I’m curious about this one myself as well. 

I just had the chance to try this out… first seamless. One shot its working. So if you are on the fence about implementation and you are comfortable with adding javascript/css to your landing pages you will have no issues.

Is there a way to have the place holder text be center aligned and then go to the bottom once a user starts typing?

It is a little detail but my design team picked up on it right away.

Also, if you are running any other javascript on the form (in this case I am using a date picker) that no longer works.

Hmmm, not working for me, and neither is the example at http://unbouncepages.com/floating-labels/  so I don’t believe it is my implementation.  Running latest Chrome on latest OSX - also tried it on Safari.

Has something changed recently?

Userlevel 3

Hi Michael - thanks for catching that!

I have fixed a broken URL in the script and now it should be working fine 🙂
Please give it another try and let me know if you have any questions!   

Reply