Floating Label Animation bei Formular Input-Feldern

In diesem Webflow Tutorial geht es um die Animation von Labels bei Inputfeldern, wie man es von Material Design und Android Formularen kennt. Es wird gezeigt, wie man Labels innerhalb des Eingabefelds positionieren kann und wie man sie animiert, wenn das Feld aktiv ist. Es wird auch erklärt, wie man Formblöcke und Formularelemente in Webflow verwendet. Die Lösung ist eine reine CSS-Lösung, die ohne JavaScript auskommt. Es wird auch auf die Verwendung von Custom CSS und Combo-Klassen eingegangen.

Webflow Tutorial: Animierte Input Labels wie bei Material Design

Willkommen zu einem neuen Webflow Tutorial. Mein Name ist Jonas Arleth und heute zeige ich dir, wie du Floating Labels erstellst, die sich dynamisch verschieben, sobald du hineinklickst. Diese Methode funktioniert komplett ohne JavaScript und ist eine reine CSS-Lösung, die du direkt im Webflow Designer anwenden kannst.

Einleitung: Was wir erstellen werden

In diesem Tutorial werde ich dir zeigen, wie du Inputfelder gestaltest, bei denen die Labels innerhalb des Feldes starten und sich nach oben verschieben, wenn du in das Feld klickst. Das sorgt für ein sauberes und aufgeräumtes Design, insbesondere wenn du viele Formularfelder auf einer Seite hast. Diese Technik ist im Google Material Design Standard und lässt sich leicht nachbauen.

Vorbereitung: Ein Formblock hinzufügen

Bevor wir loslegen, stelle sicher, dass du ein Formblock-Element hinzufügst. Dies findest du im Bereich "Forms" in Webflow. Ziehe es einfach in dein Projekt. Wichtig ist, dass alle Formularfelder innerhalb dieses Formblocks liegen müssen.

Schritt 1: Formblock Styling

Standardmäßig gibt Webflow diesen Elementen bestimmte Stylings mit. Um das zu ändern, stelle sicher, dass der Formblock die volle Breite einnimmt:

1. Wähle den Formblock aus.
2. Setze die Breite auf 100%.
3. Entferne jegliche voreingestellten Padding und Margin und setze sie auf Null.

Styling der Inputfelder

Nun, da der Formblock vorbereitet ist, können wir mit dem Styling der Inputfelder beginnen.

Schritt 2: Inputfeld und Label erstellen

1. Benenne das Inputfeld als demo-input-field und das Label als demo-label.
2. Setze eine Mindesthöhe für das Inputfeld, z.B. 5 Rem.

Schritt 3: Farben und Outline festlegen

1. Setze die Hintergrundfarbe des Inputfeldes auf Weiß.
2. Verwende eine Graue Farbe für die Outline und den Placeholder-Text.
3. Stelle sicher, dass der Text innerhalb des Inputfeldes schwarz ist.

Schritt 4: Inputfeld Fokus Zustand

1. Füge eine Hover- und Fokus-Transition hinzu, damit das Inputfeld bei Interaktion eine dickere und schwarze Outline erhält.

Label Positionierung und Animation

Schritt 5: Label innerhalb des Inputfeldes positionieren

1. Erstelle einen div Wrapper um das Inputfeld und das Label und benenne ihn als demo-input-group.
2. Setze diesen Wrapper auf position: relative.
3. Setze das Label auf position: absolute und verschiebe es um 50% nach oben.
4. Verwende transform: translateY(-50%), um das Label exakt in der Mitte zu positionieren.

Schritt 6: Label Animation beim Fokus

1. Füge eine CSS-Transition hinzu, um das Label weich an seine Zielposition zu animieren.
2. Verwende pointer-events: none für das Label, damit es nicht den Klick auf das Inputfeld blockiert.

Custom CSS für die Animation

Schritt 7: Einfügen von Custom CSS

Füge ein Embed-Element in den demo-wrapper ein und schreibe den Custom CSS Code aus dem Video hinein:

<style>

 .demo-input-field:focus + .demo-label,
 .demo-input-field:not(:placeholder-shown) + .demo-label {
   top: 0%;
   margin-left: 1rem;
   font-size: 1.1rem;
   color:#000000;
 }

</style>


Im Webflow Inpur Formular muss ein Leerzeichen als Placeholder mit reingeschrieben werden!

Schritt 8: Testen und Feinabstimmen

1. Teste die Funktionalität, indem du in das Inputfeld klickst und sicherstellst, dass sich das Label korrekt bewegt.
2. Passe eventuelle Feinheiten wie die Schriftgröße oder den Abstand an.

Fazit

Mit diesen Schritten hast du nun ein animiertes Inputfeld erstellt, das sich dynamisch verhält und ansprechend aussieht. Diese Methode ist nicht nur visuell ansprechend, sondern auch leicht zu implementieren und anpassbar für verschiedene Projekte.

Falls du tiefer in Webflow einsteigen möchtest, empfehle ich dir meinen Webflow Online-Kurs.

Ich hoffe, dieses Tutorial war hilfreich für dich. Viel Spaß beim Ausprobieren und Anpassen deiner eigenen Inputfelder in Webflow!