Wenn du individuelle Angaben deiner Besucher:innen benötigst, dann ist das Eingabefeld die beste Option. Frage z.B. einfach nach dem Vor- und Nachnamen oder der E-Mail.

In diesem Artikel erfährst du, wie du den Inhalt, die Einstellungen und das Design des Blocks anpasst.

Inhalt bearbeiten

Nach dem Klick auf einen Block findest du rechts den Bereich Inhalts. Hier fügst du neue Elemente hinzu oder bearbeitest bestehende Inhalte.

Nutze das Block-Label, um deine Frage zu stellen oder die Auswahl zu erklären. Das hilft Nutzer:innen, den Kontext zu verstehen und verbessert die Barrierefreiheit, zum Beispiel für Screenreader.

Der Platzhalter zeigt einen Beispieltext im Feld an, solange noch keine Eingabe erfolgt ist. Mit Info-Text anzeigen kannst du zusätzliche Informationen unter dem Eingabefeld einfügen, zum Beispiel um darauf hinzuweisen, dass ein Feld optional ist.

Die Fehlermeldung legt den Text fest, der angezeigt wird, wenn eine falsche Eingabe erfolgt oder wenn versucht wird, ohne Eingabe in einem erforderlichen Feld weiterzunavigieren.

Einstellungen anpassen

Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.

Allgemein

Passe die wichtigsten Einstellungen für den Block an, z. B. indem du Werte als sensibel markierst, sodass sie nicht in unserer Datenbank gespeichert werden, oder den Block als erforderlich festlegst, sodass Nutzer:innen eine Option auswählen müssen, bevor sie fortfahren können.

Mit Auto-Fokus wird der Cursor automatisch in das Eingabefeld gesetzt, sodass Nutzer:innen direkt lostippen können. Über die Auto-Vervollständigung kannst du vordefinierte Optionen hinzufügen, aus denen Nutzer:innen auswählen können.

Erscheinungsbild

Lege fest, ob der Block nur auf Mobile, Desktop oder gar nicht angezeigt wird. Du kannst außerdem eine Hintergrundfarbe für den Block wählen und das Label-Verhalten anpassen:

Standard: Standard-Label, welches vom Input überschrieben wird
Schwebend außerhalb: Label schwebt außerhalb des Inputs, wenn der User tippt
Schwebend innerhalb: Label bleibt innerhalb des Eingabefeldes und schwebt außerhalb des Inputs der User

Abstände

Passe die Breite des Blockes (S, M, L oder max.) an und definiere die Abstände nach oben, unten, links und rechts mit einer Pixelangabe.

Dekorationen

Du kannst das Eingabefeld weiter anpassen, indem du Präfix Text oder ein Präfix Icon vor der Eingabe hinzufügst, sowie Suffix Text oder ein Suffix Icon nach der Eingabe.

Mit der Eingabemaske lässt sich der Eingabewert anhand eines visuellen Musters transformieren, wie z.B.

Telefonnummern (DE, US)
Kreditkarte
Datumseingabe (verschiedene Formate)
Nur Buchstaben
Nur Ziffern

Über Max. Zeichen aktiviert kannst du die maximale Anzahl an Zeichen festlegen, und die Option Auto-entferne Leerzeichen löscht automatisch alle Leerzeichen vor oder nach dem Eingabewert.

Validierung

Mit Auslösen bei legst du fest, nach welcher Aktion der Nutzer:in die Validierung durchgeführt wird und wann das Ergebnis angezeigt werden soll, z.B. bei Navigation oder Verlassen.

Über E-Mail Muster validieren stellst du sicher, dass die Eingabe einer gültigen E-Mail-Adresse entspricht. Mit Regulären Ausdruck validieren kannst du ein eigenes Muster definieren, um zu prüfen, ob die Eingabe einem bestimmten Format entspricht, zum Beispiel dem einer E-Mail-Adresse. Weitere Informationen dazu findest du hier.

Labels & Variablen

System Label legen fest, wie deine Daten gespeichert und organisiert werden, während Variablen es dir ermöglichen, diese Daten dynamisch in deinem Flow zu nutzen und anzuzeigen. Du kannst ein Label für den gesamten Block festlegen, um deine Daten strukturiert und leicht nutzbar zu halten.

Über Inhalt kannst du einen vorausgefüllten Wert des Feldes definieren. Die User:in kann den Wert ändern, sofern der Block nicht über die Einstellungen deaktiviert wurde.

Erweitert

Mit Feld Deaktiviert verhinderst du, dass Nutzer:innen Werte in das Feld eingeben können. Der native Eingabefeld-Typ legt das Format des Eingabefeldes fest, beispielsweise Datum oder Telefonnummer, und passt das Layout entsprechend an. Dies ist besonders auf mobilen Geräten nützlich: Bei Auswahl von Telefon wird der Nummernblock angezeigt, bei Datum der native Datumsauswahl-Dialog. Ob ein angepasstes Eingabelayout angezeigt wird, hängt vom Gerät und dessen Unterstützung ab.

Um es den Nutzer:innen noch einfach zu machen, ihre Daten einzufügen, kannst du unsere Funktion zur nativen Autovervollständigung nutzen. Dort kannst du das Autocomplete Attribut einfügen, z.B.:

Vorname = given-name,
Nachname = family-name,
E-Mail = email,
Telefon = tel etc.

Sobald die Attribute in den einzelnen Eingabefeldern hinterlegt sind, kann der Browser diese erkennen und automatisch ausfüllen.

🔎 Lerne hier mehr darüber, wie die Native Autovervollständigung dir bei der Conversionoptimierung helfen kann.

Block designen

Nach dem Klick auf einen Block findest du rechts den Bereich Design. Hier kannst du ein vordefiniertes Style-Set für diesen Blocktyp wählen oder Farben, Schriftarten und Abstände individuell anpassen.

Designänderungen an einem Blocktyp wirken sich automatisch auf alle Blöcke dieses Typs im Flow aus. So bleibt dein Design einheitlich, übersichtlich und leicht zu ändern, ohne jeden Block einzeln gestalten zu müssen.

🔎 Erfahre mehr dazu in unserem Artikel: Design Presets für Blöcke