Design

3 min

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.

How to Create Floating Labels on Webflow Inputs

Example

1. HTML structure in an Embed

2. The CSS

3. The script

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials