How to Create Floating Labels on Webflow Inputs

Learn how to create floating labels on Webflow inputs with CSS transitions and JavaScript.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create floating labels on Webflow inputs: the label lifts above the field when the user starts typing.

Example

Professional email

Company name

Message

Class	Element	State
form-field	Wrapper div (label + input)	Relative container
form-label	Label	Absolute position, moves on focus
is-filled	form-field	Added when the input has a value

1. HTML structure in an Embed

Create the structure below in a Webflow Embed. The label and the input need to live in the same relative container.


  Email

2. The CSS

.form-field { position: relative; padding-top: 16px; }
.form-label {
  position: absolute;
  top: 28px;
  left: 12px;
  font-size: 16px;
  color: #9ca3af;
  transition: all 0.2s ease;
  pointer-events: none;
}
.form-field.is-filled .form-label,
.form-field:focus-within .form-label {
  top: 2px;
  font-size: 11px;
  color: #6b7280;
}

3. The script

document.querySelectorAll('.form-field').forEach(function(field) {
  var input = field.querySelector('input, textarea');
  if (!input) return;
  function toggle() {
    field.classList.toggle('is-filled', input.value.length > 0);
  }
  input.addEventListener('input', toggle);
  input.addEventListener('blur', toggle);
  toggle();
});

good to know

The :focus-within CSS is enough for the focus animation, but JavaScript is needed to keep the label lifted when the field is filled after blur. Without the JS, the label would drop back down onto the text when the user leaves the field, making the value hard to read.

Conclusion

Floating labels improve the UX of dense forms. See also: designing frictionless forms.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss