This module auto-converts form input fields with space-hogging labels into compact mobile-friendly input fields, with placeholders that animate into much smaller labels the moment text is keyed in. This UI design is known as the Float Label pattern, devised by Matt D. Smith to combat UX issues on mobiles. With the Float Label pattern applied to your forms:
- space-hungry labels automatically turn into in-field placeholders, making the form compact
- when the user types over the placeholder, it floats up and becomes smaller but remains visible, serving as a reminder
- forms look simpler and cleaner and the animation adds a subtle touch
This snappy UI feature is configurable across all pages on your site without programming. Try it live.
No loss of accessibility as the original label is moved, not removed.
jQuery implementation used with this module by ClubDesign, based on the idea by Matt D. Smith.
Set up couldn't be easier. Switch it on and enter the pages that should have their input fields decorated with float labels. See the README.txt. Should work with pretty much any form, but as an example think of core's Contact form, e.g., in a block.
There have been some interesting recent alternative implementations of the Float Label pattern. These implementations are currently under consideration for incorporation with this module, both in D7 and D8.
Picture of Rocko and Marly from Snapshots of Existence.
- Maintenance status: Actively maintained
- Development status: Under active development
- Module categories: Content Display, Mobile
- Reported installs: 82 sites currently report using this module. View usage statistics.
- Downloads: 2,547
- Automated tests: Enabled
- Last modified: January 10, 2016
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.