Hinzufügen des Eingabefeldes

Im Tab Blöcke gehe zu Eingabe und ziehe den Eingabefeld-Block in deinen Heyflow
Passe die Einstellungen wie z.B. Dekoratoren und Validierung an
Füge ein Systemlabel hinzu, um sicherzustellen, dass du die Daten auf sinnvolle Weise weiterverarbeitest.
Publiziere deinen heyflow und schon bist du startklar!

Label und Platzhalter

In der Spalte Inhalt bearbeitest du das Label sowie einen Platzhaltertext, der Hinweise gibt, die den erwarteten Wert eines Eingabefeldes beschreiben. Dies kann z. B. ein Name, eine Adresse, eine Berufsbezeichnung oder ein bevorzugtes Reiseziel sein.

Dekoratoren und Validierung

Präfixe und Suffixe

Füge Symbole, Text und Icons vor oder nach einem Eingabefeld ein, um Personen zu informieren oder dein Design auf die nächste Ebene zu bringen.

Maske

Das Hinzufügen einer Maske schränkt das Format der Eingaben ein, z. B. eine Kreditkartennummer oder ein Datum.

Validierung

Passe deine Fehlermeldung an und lasse Werte wie z. B. E-Mails validieren, wenn der Fokus aufgehoben wird (wenn du aus dem Feld klickst) oder wenn der Benutzer versucht, zum nächsten Screen zu navigieren.

Regular Expression

Eine Regular Expression (Regex) ist ein Muster, das dazu genutzt werden kann, ein bestimmtes Format zu prüfen, wie z.B. das einer E-Mail-Adresse. Weitere Informationen dazu findest du hier.

Versteckte Eingabefelder

Manchmal möchte man in der Antwort Informationen sehen, die der Benutzer im Flow nicht sehen soll, z. B. eine eindeutige Kennung für den Benutzer oder den Flow usw.

Mit einem versteckten Eingabefeld (hidden input field) kannst du Daten einfügen, die von den Nutzern nicht gesehen oder geändert werden können, wenn eine Antwort eines Flows übermittelt wird.

Wichtig: Da der gesamte Flow beim Initialisieren geladen wird, wird der Inhalt des versteckten Eingabefeldes automatisch zu allen Antworten hinzugefügt.

Du kannst Eingabefelder in den Einstellungen des Blocks unter Aussehen ausblenden. Sie sind dann nicht mehr für den Nutzer sichtbar.

Dieser Block kann über die Verwendung von Variablen, z.B. aus der URL, befüllt werden, oder du kannst unter Labels & Variablen und Inhalt einen vorausgefüllten Wert einfügen.

Bearbeitungsoptionen

Allgemein

Sensitiv: Wenn aktiviert, werden die Werte nicht in unserer Datenbank gespeichert (mehr Informationen hier).
Auto-Fokus: Setzt den Maus-Fokus auf das Eingabefeld, sodass die User:in direkt lostippen kann.
Auto-Vervollständigung: Füge vordefinierte Optionen hinzu, aus denen User:innen wählen können.
Benötigt: Wenn aktiviert, müssen deine User eine Auswahl treffen, bevor sie im Flow weiter klicken können. Die Eingabe ist dann obligatorisch.

Abstand

Breite: Hierüber kannst du die maximale Ausbreitung des Blockes anpassen und zwischen S, M, L und maximaler Breite auswählen.
Oben, Unten, Links und Rechts: Über diese Optionen kannst du den Abstand zu allen Seiten festlegen. Verwende hierzu entweder den Schieberegler oder lege die genaue Pixelanzahl fest.

Aussehen

Sichtbarkeit: Hierüber kannst du auswählen, ob der Block nur in der mobilen bzw. Desktop Version angezeigt wird oder diesen gänzlich verstecken.
Hintergrundfarbe: Du kannst du eine Farbe auswählen, die als Hintergrund für den Block genutzt wird.
Schwebendes Label: Das Label erscheint zunächst innerhalb des Feldes, und wenn der Benutzer mit ihr interagiert, "schwebt" das Label über dem Feld und macht Platz für die Eingabe eines Wertes durch den Benutzer.
Info-Zeile anzeigen: Füge zusätzliche Informationen unter dem Eingabefeld ein, z. B. um darauf hinzuweisen, wenn ein Feld optional ist.

Dekoratoren

Präfix Text: Lege ein extra Textfeld vor der Eingabe fest.
Präfix Icon: Lege ein extra Feld mit Icon vor der Eingabe fest.
Suffix Text: Lege ein Textfeld nach der Eingabe fest.
Suffix Icon: Lege ein extra Feld mit Icon nach der Eingabe fest.
Maske: Transformiert den Eingabewert anhand eines visuellen Musters. Dies kann im Falle eines Datums sinnvoll sein.
Max. Zeichen aktiviert: Wenn aktiviert, kannst du die maximale Anzahl an Zeichen festlegen.
Auto-entferne Leerzeichen: Entfernt Leerzeichen, die vor oder hinter dem Eingabewert gesetzt wurden.

Validierung

Auslösen bei: Wähle, nach welcher Aktion der Nutzer:in die Validierung stattfinden soll und das Ergebnis angezeigt werden soll.
Fehlermeldung: Lege den angezeigten Text der Fehlermeldung fest, der bei einer falschen Eingabe angezeigt wird.
E-Mail Muster anwenden: Wenn aktiviert, muss die Eingabe eine valide E-Mail-Adresse sein.
Regular Expression anzeigen: Lege ein Muster fest das dazu genutzt wird, ein bestimmtes Format zu prüfen, z.B. das einer E-Mail-Adresse.

Labels & Variablen

System Label: Lege ein System Label für den Block fest.
Variable: Siehe Variable.
Inhalt: Der vorausgefüllt Wert des Feldes. Die User:in kann den Wert ändern, sofern der Block nicht über die Einstellungen deaktiviert wurde.

Erweitert

Deaktiviert: Wenn aktiviert, ist keine Eingabe mehr möglich.
Nativer Eingabefeld-Typ: Der native Eingabetyp bestimmt das Format eines Eingabefeldes, wie z. B. ein Datum oder eine Telefonnummer, das ein bestimmtes Layout hat. Dies ist besonders auf mobilen Geräten hilfreich: Wenn du z. B. “Telefon” auswählst, wird mobilen Benutzern nicht die Standardtastatur, sondern der Nummernblock angezeigt. Auch wenn du”Datum” auswählst, wird mobilen Benutzern eine native Datumsauswahl angezeigt. Ob ein anderes Eingabelayout angezeigt wird, hängt vom Gerät und dessen Unterstützung dieser Funktionalität ab.
Native Auto-Vervollständigung: Lege fest, ob die unter Allgemein bestimmten Elemente zur Auto-Vervollständigung, zur Verfügung stehen.