Floating Labels Form Template

Create a clean, modern, and interactive form with this slick floating label effect.

This popular design pattern saves space and adds a delightful micro-interaction by having the field's placeholder text animate upward and transform into a permanent label when the user begins typing.

Screenshot of a form where the label for an input field floats above it once the user types.

Get Source Code → Preview →

About this Floating Label Form

The floating label is a brilliant solution that combines the benefits of a placeholder (saves space) and a permanent label (user doesn't lose context after typing). This template achieves the effect with pure CSS, though a small bit of JavaScript can enhance it.

How it's done with CSS:

Each form group div is set to position: relative;.
The label is absolutely positioned inside the input area.
When the user focuses on the input, or when the input contains text (using the :placeholder-shown pseudo-class), we use CSS selectors (like input:focus + label) to move the label up and shrink its font size.
A CSS transition is applied to the label to create the smooth animation.

While CSS can handle most cases, a tiny bit of JS is sometimes added to handle edge cases, such as autofilled inputs, to ensure the label stays floated.

Features

Elegant Micro-interaction: The animation provides a satisfying and modern user experience.
Space-Efficient: Combines the placeholder and label into a single initial space.
Maintains Context: Unlike a simple placeholder, the label remains visible after the user has typed, so they always know what the field is for.
Accessible Structure: The underlying HTML uses a standard input and label, which remains fully accessible.

Dependencies

None. Uses pure HTML and CSS for the core effect, with an optional but recommended small JavaScript enhancement for robustness.

Code

Here's the full code for the floating label form template:

/* -- The core styles for floating labels -- */
.form-group-float {
    position: relative;
    margin-bottom: 25px;
}
.form-group-float .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group-float .form-label {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #999;
    background-color: #fff; /* Match form background */
    padding: 0 5px;
    transition: all 0.2s ease;
    pointer-events: none; /* Allows clicks to go through to the input */
}
/* 
    The main effect. When the input is focused or when the placeholder is NOT shown 
    (meaning it has content), move the label up and shrink it.
*/
.form-group-float .form-control:focus + .form-label,
.form-group-float .form-control:not(:placeholder-shown) + .form-label {
    top: -10px; /* Moves the label above the input */
    left: 8px;
    font-size: 0.8rem;
    color: #007bff;
}
/* Add the focus color to the border as well */
.form-group-float .form-control:focus {
    outline: none;
    border-color: #007bff;
}

/* --- Submit button --- */
.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}
</style>

<div class="floating-form-container">
    <h2>Floating Label Form</h2>
    <form action="#" method="post">
        
        <div class="form-group-float">
            <input type="text" id="float-name" name="name" class="form-control" placeholder=" " required>
            <label for="float-name" class="form-label">Your Name</label>
        </div>
        
        <div class="form-group-float">
            <input type="email" id="float-email" name="email" class="form-control" placeholder=" " required>
            <label for="float-email" class="form-label">Your Email</label>
        </div>

<div class="form-group-float">
            <input type="text" id="float-subject" name="subject" class="form-control" placeholder=" " required>
            <label for="float-subject" class="form-label">Subject</label>
        </div>

<button type="submit" class="submit-btn">Submit</button>
    </form>
</div>

View Output