Login-Formulare: Felder, Ablauf, Passwort-Reset

Ein Besucher kommt auf deine Website und klickt auf „Anmelden“. Er erwartet einen reibungslosen Login. Stattdessen landet er in einem Formular, das ihn frustriert. Die Passwortanforderungen sind bis zum Absenden versteckt. Das Passwortfeld ist klein und schwer zu bedienen. Es gibt kein „Passwort anzeigen“, also kann er nicht prüfen, was er getippt hat. Er gibt das falsche Passwort ein. Er klickt auf „Passwort vergessen“ und landet in einem verwirrenden Ablauf zum Zurücksetzen. Ein paar Minuten später gibt er auf und kommt nie wieder.

Login- und Passwort-zurücksetzen-Formulare sind entscheidende Kontaktpunkte. Sie stehen zwischen einem wiederkehrenden Besucher und seinem Konto. Ist die Erfahrung schlecht, geht er nicht einfach. Er hält deine Website für nicht vertrauenswürdig. Dieses Kapitel zeigt, wie du Login- und Passwort-zurücksetzen-Formulare baust, die sicher und intuitiv sind und die Zeit deiner Nutzer respektieren.

Welche Felder braucht ein Login-Formular?

Ein Login-Formular braucht genau drei Dinge. Erstens eine Möglichkeit festzustellen, wer die Person ist. Zweitens eine Möglichkeit, ihre Identität zu prüfen. Drittens eine Möglichkeit, angemeldet zu bleiben. Das bedeutet mindestens drei Felder.

Das E-Mail-Feld

Nutze die E-Mail-Adresse, nicht den Benutzernamen. E-Mail ist einfacher. Nutzer vergessen Benutzernamen. Ihre E-Mail-Adresse vergessen sie nicht. Lass dieses Feld eine E-Mail-Adresse akzeptieren und beschrifte es klar mit „E-Mail-Adresse“. Nutze das HTML-Attribut `type="email"`, damit Handytastaturen das @-Zeichen zeigen und die E-Mail-Prüfung automatisch läuft. Ergänze im HTML-Attribut `autocomplete="username"`, damit Browser und Passwort-Manager wissen, dass hier die Login-Kennung hingehört, und sie für Nutzer mit gespeicherten Zugangsdaten automatisch ausfüllen können.

Das Passwortfeld

Nutze `type="password"`, damit der Text verborgen ist. Ergänze `id="current-password"` und `autocomplete="current-password"`, damit Passwort-Manager dieses Feld erkennen und gespeicherte Passwörter automatisch einfügen. Erlaube das Einfügen aus der Zwischenablage. Sicherheitsexperten sind sich einig, dass das Sperren des Einfügens in Passwortfeldern Angriffe nicht verhindert. Es ärgert nur Menschen, die Passwort-Manager nutzen.

Mache das Passwortfeld optisch mindestens 10 Zeichen breit. Ein kleines Eingabefeld wirkt beengt. Nutzer zweifeln, ob ihr langes Passwort hineinpasst. Ein breiteres Feld schafft Vertrauen und senkt Fehler beim Absenden.

Schalter zum Anzeigen des Passworts

Nimm einen Schalter „Passwort anzeigen“ oder „Passwort einblenden“ auf (meist ein Augensymbol oder Kontrollkästchen). Ist er aktiv, wechselt das Passwortfeld zu `type="text"`, damit Nutzer sehen, was sie getippt haben. Das ist kein Sicherheitsrisiko. Es ist eine Komfortfunktion, die Fehler beim Absenden und Frust verringert. Nutzer tippen Passwörter sorgfältig und wollen sie vor dem Absenden prüfen.

Kontrollkästchen „Angemeldet bleiben“ (optional, aber empfohlen)

Ein Kontrollkästchen „Auf diesem Gerät merken“ oder „Angemeldet bleiben“ ist optional, verbessert aber das Erlebnis. Ist es aktiv, dauert die Sitzung länger, oder der Browser speichert (sicher) ein dauerhaftes Login-Token. Nutzer müssen sich dann nicht bei jedem Besuch anmelden. Bei Konten mit geringem Risiko ist das sicher. Bei Konten mit hohem Schutzbedarf (Finanzen, Gesundheit, Admin-Bereiche) lass es weg oder verlange für sensible Aktionen eine erneute Anmeldung.

Nimmst du ein Kontrollkästchen „Angemeldet bleiben“ auf, sage klar, was es tut. „30 Tage lang merken“ ist klarer als nur „Merken“.

Link „Passwort vergessen“

Setze einen Link „Passwort vergessen?“ direkt unter das Passwortfeld oder rechts daneben. Das ist nicht optional. Nutzer vergessen Passwörter. Biete einen offensichtlichen Weg, es zurückzusetzen. Finden sie den Link nicht, verlassen sie die Website und kommen vielleicht nie wieder.

Wie sollte ein Formular zum Zurücksetzen des Passworts funktionieren?

Das Zurücksetzen eines Passworts hat mehrere Schritte. Jeder Schritt zählt. Jeder Schritt ist eine Stelle, an der Nutzer verwirrt sein und abbrechen können.

Schritt eins: E-Mail-Bestätigung anfordern

Der Ablauf beginnt, wenn ein Nutzer im Login-Formular auf „Passwort vergessen“ klickt. Er landet auf einer Seite mit etwa „Gib deine E-Mail-Adresse ein, um dein Passwort zurückzusetzen.“ Es erscheint ein einziges E-Mail-Feld. Mehr nicht. Keine zusätzlichen Felder. Keine Frage nach Benutzername oder Sicherheitsfragen. Nur die E-Mail-Adresse.

Der Button sollte etwas Klares und Handlungsorientiertes sagen. „Link zum Zurücksetzen senden“ oder „Anleitung zum Zurücksetzen erhalten“ sagt, was als Nächstes passiert. „Senden“ ist vage.

Schritt zwei: Link zum Zurücksetzen per E-Mail senden

Sendet der Nutzer seine E-Mail-Adresse ab, schickt dein System sofort eine E-Mail zum Zurücksetzen des Passworts. Die E-Mail sollte innerhalb von Sekunden ankommen, nicht von Minuten. Tempo zählt. Dauert die E-Mail 10 Minuten, glauben Nutzer, es habe nicht geklappt, und versuchen es erneut oder gehen schlimmstenfalls.

Die E-Mail zum Zurücksetzen enthält einen einmaligen Link (oder einen Code, den sie auf der nächsten Seite eingeben). Der Link sollte nach einer festgelegten Zeit ablaufen, meist nach 24 Stunden. Ein Link, der nie abläuft, ist ein Sicherheitsrisiko, wenn jemand Zugriff auf das Postfach bekommt.

Schritt drei: Link prüfen und Formular zum Zurücksetzen zeigen

Klickt der Nutzer in der E-Mail auf den Link, landet er im Formular zum Zurücksetzen des Passworts. Diese Seite sollte klar bestätigen, was passiert: „Setze dein Passwort zurück“ oder „Lege ein neues Passwort fest“. Keine Verwirrung, ob er am richtigen Ort ist.

Zeige die E-Mail-Adresse, für die das Passwort zurückgesetzt wird. „Du setzt das Passwort für beispiel@email.com zurück.“ Das beruhigt sie, dass sie das richtige Konto zurücksetzen.

Schritt vier: Passwortanforderungen vor dem Absenden klar nennen

Zeige die Passwortanforderungen im Formular zum Zurücksetzen, BEVOR der Nutzer versucht abzusenden. Lass ihn nicht raten. „Dein Passwort muss mindestens 12 Zeichen lang sein und einen Großbuchstaben, eine Zahl und ein Sonderzeichen enthalten.“ Sei konkret. Zeige Beispiele dafür, was gilt.

Eine Passwortstärke-Anzeige (ein Balken, der schwach, mittel oder stark zeigt) hilft Nutzern zu verstehen, ob ihr Passwort die Anforderungen erfüllt, ohne abzusenden und einen Fehler zu bekommen. Manche Nutzer finden das hilfreich. Manche finden es frustrierend, wenn die Anforderungen unklar sind. Nutzt du eine Stärkeanzeige, kombiniere sie mit ausdrücklichen Anforderungen als Text.

Schritt fünf: Passwortfeld und Bestätigung

Frage nach einem neuen Passwort. Bitte dann darum, es zur Bestätigung noch einmal einzutippen. Dieser Bestätigungsschritt fängt Tippfehler ab. Der Nachteil: Ein Bestätigungsfeld erzeugt Hürden. Studien zeigen, dass der Verzicht auf das Feld zur Passwortbestätigung die Abschlussrate erhöht. Behältst du es, gib beiden Feldern einen Schalter „Passwort anzeigen“, damit Nutzer vor dem Absenden prüfen können, dass beide Eingaben übereinstimmen.

Schritt sechs: Sofortige Bestätigung und nächste Schritte

Haben sie ihr Passwort erfolgreich zurückgesetzt, zeige eine Erfolgsmeldung. „Dein Passwort wurde zurückgesetzt. Du kannst dich jetzt mit deinem neuen Passwort anmelden.“ Biete dann einen Link zurück zum Login-Formular oder einen Button „Zum Login“, damit sie nicht navigieren oder suchen müssen.

Schicke ihnen außerdem eine Bestätigungs-E-Mail. „Dein Passwort wurde kürzlich zurückgesetzt. Warst du das nicht, klicke hier, um dein Konto zu sichern.“ Das warnt sie, wenn jemand anderes ihr Passwort zurückgesetzt hat, und gibt ihnen einen Weg, es rückgängig zu machen.

Wo gehören Login-Formulare auf deiner Website hin?

Header oder Navigation

Der sichtbarste Ort ist der Header. Ein Link (oder Button) „Anmelden“ oder „Login“ oben rechts auf deiner Website ist dort, wo Nutzer ihn erwarten. Klicken sie darauf, führe sie entweder auf eine eigene Login-Seite oder öffne ein Modal mit dem Login-Formular. Mobile Nutzer erwarten die Anmeldung im Hamburger-Menü. Verstecke sie nie hinter mehreren Ebenen der Navigation.

Eigene Login-Seite

Lege eine eigene Seite `/login` oder `/sign-in` an. Diese Seite enthält das Login-Formular und sonst nichts. Keine Blogbeiträge. Kein Marketingtext. Nur das Formular und nötige Hilfetexte. Eine klare, fokussierte Seite konvertiert besser als ein Login-Formular, das in eine allgemeine Seite eingebettet ist.

Seite zum Zurücksetzen des Passworts

Das Formular zum Zurücksetzen des Passworts sollte unter einer eigenen URL wie `/reset-password` oder `/forgot-password` liegen. Diese Seite ist nur über das Login-Formular oder über einen Link in der E-Mail zum Zurücksetzen erreichbar. Sie sollte nicht von Suchmaschinen indexiert werden. Füge dieser Seite `noindex` in deinem HTML oder in der robots.txt hinzu, damit Google nicht versucht, sie zu ranken.

Typische Fehler beim Design von Login-Formularen

Auch gut gemeinte Login-Formulare haben oft Probleme, die der Nutzererfahrung schaden.

Zu viele Felder vor dem Login

Manche Websites fragen im Login-Formular selbst nach Benutzername, E-Mail, Telefon und Sicherheitsantwort. Mache das nicht. Login ist keine Registrierung. Frage nur nach E-Mail und Passwort. Alles andere ist zusätzliche Reibung.

Versteckte oder unklare Passwortanforderungen

Sind die Passwortanforderungen bis zum Absenden versteckt, ärgern sich Nutzer. Sie geben ein Passwort ein. Sie klicken auf „Senden“. Ein Fehler erscheint: „Das Passwort muss 12 Zeichen lang sein und eine Zahl enthalten.“ Jetzt müssen sie es erneut versuchen. Zeige die Anforderungen gleich zu Beginn.

Keine Option zum Anzeigen des Passworts

Nutzer sehen nicht, was sie getippt haben. Sie senden ab. Es ist falsch. Sie versuchen es erneut. Wieder falsch. Ein einfacher Schalter erspart diesen Frust.

Verwirrende Fehlermeldungen

Sage Nutzern nie „Ungültiger Login“. Das hilft nicht. Nutzen sie die falsche E-Mail-Adresse? Das falsche Passwort? Ist das Konto nicht aktiviert? Sei konkret. „Für diese E-Mail-Adresse wurde kein Konto gefunden“ oder „Das Passwort ist falsch“ sagt ihnen, was sie beheben müssen. Willst du aus Sicherheitsgründen vage bleiben, gib ihnen einen Weg zur Wiederherstellung. „E-Mail-Adresse und Passwort passen nicht zusammen. Versuche es erneut oder setze dein Passwort zurück.“

Der Link zum Zurücksetzen läuft zu schnell ab

Ein Link zum Zurücksetzen, der nach 15 Minuten abläuft, frustriert Nutzer. Sie prüfen ihre E-Mails nach der Arbeit. Der Link ist tot. Sie müssen von vorn beginnen. Gib ihnen mindestens 24 Stunden.

Der Ablauf zum Zurücksetzen führt auf eine verwirrende Seite

Manche Abläufe schicken Nutzer auf eine Seite, die nicht klar sagt, was zu tun ist. Sie klicken auf den Link zum Zurücksetzen. Sie landen auf einer Seite mit unklarem Text und ohne Formular. Sie denken, etwas sei schiefgegangen. Mache es offensichtlich. „Setze dein Passwort für beispiel@email.com zurück“ mit einem Passwortfeld und einem Senden-Button.

Sicherheit bei Login und Zurücksetzen des Passworts

Ein Login-Formular ist ein sicherheitskritischer Teil deiner Website. Schütze es richtig.

Nutze HTTPS für den gesamten Login-Verkehr

Deine Login-Seite muss über HTTPS ausgeliefert werden, nicht über HTTP. HTTPS verschlüsselt die Daten bei der Übertragung, damit Hacker E-Mail-Adresse und Passwort auf dem Weg zu deinem Server nicht lesen können. Das ist nicht verhandelbar. Hat deine Website kein SSL-Zertifikat, besorge eines. Die meisten Hosting-Anbieter stellen heute kostenlose SSL-Zertifikate bereit.

Prüfe die Passwortstärke auf dem Server

Die Prüfung im Browser hilft Nutzern, aber verlasse dich nicht allein darauf. JavaScript-Prüfungen lassen sich umgehen. Prüfe das Passwort auf deinem Server. Kontrolliere, dass es deine Anforderungen erfüllt. Akzeptiere nur Passwörter, die deinen Stärkestandards entsprechen.

Hashe Passwörter mit Salt in deiner Datenbank

Speichere Passwörter nie im Klartext. Nutze einen sicheren Hash-Algorithmus (wie bcrypt oder Argon2) mit Salt. Selbst wenn jemand deine Datenbank knackt, kann er die Passwörter nicht lesen. Ein korrekt gehashtes Passwort lässt sich nicht in das ursprüngliche Passwort zurückrechnen.

Begrenze die Zahl der Login-Versuche

Versucht jemand, sich 10 Mal in einer Minute anzumelden, sperre ihn. Eine Begrenzung der Versuche verhindert Brute-Force-Angriffe, bei denen Hacker Tausende Passwortkombinationen probieren. Warte nach einigen Fehlversuchen 15 Minuten, bevor du weitere Versuche erlaubst.

Lass Tokens zum Zurücksetzen schnell ablaufen

Ein Token zum Zurücksetzen des Passworts, das 24 Stunden gilt, ist Standard. Tokens, die 7 Tage oder länger gelten, erhöhen das Risiko, dass ein gehacktes E-Mail-Konto zu einem gehackten Konto auf deiner Website führt. Halte Tokens kurzlebig.

Protokolliere Login-Aktivität zur Betrugserkennung

Führe Protokoll über erfolgreiche und fehlgeschlagene Login-Versuche. Meldet sich jemand aus einem neuen Land oder zu einer ungewöhnlichen Zeit an, markiere das. Manche Systeme schicken eine E-Mail, wenn ein Konto von einem neuen Gerät genutzt wird. Das warnt den Kontoinhaber, wenn jemand anderes zugegriffen hat.

Login-Formulare am Handy: Was ist anders?

Mobil muss ein Login-Formular anders funktionieren.

Touch-Flächen und Button-Größe

Am Handy sind Finger nicht so präzise wie Mauszeiger. Buttons und Eingabefelder müssen größer sein. Der Senden-Button sollte mindestens 44 Pixel hoch sein. Eingabefelder sollten hoch genug für bequemes Tippen sein. Peile 44 bis 48 Pixel Höhe an.

Handytastaturen und Eingabetypen

Nutze `type="email"` für das E-Mail-Feld. Das sagt Handys, die E-Mail-Tastatur mit @ und . zu zeigen. Ohne das müssen Nutzer den Tastaturmodus wechseln. Nutze `type="password"` für das Passwortfeld, damit die Tastatur passt. Dieses kleine Detail spart Tipper und Frust.

Automatisches Ausfüllen und Passwort-Manager

Mobile Browser und Passwort-Manager-Apps können Zugangsdaten automatisch ausfüllen. Sorge dafür, dass deine HTML-Attribute das unterstützen. Nutze `autocomplete="username"` im E-Mail-Feld und `autocomplete="current-password"` im Passwortfeld. Das ist am Handy, wo Tippen langsamer ist, eine große Erleichterung.

Formularlayout auf kleinen Bildschirmen

Setze Felder untereinander. Setze E-Mail und Passwort am Handy nicht nebeneinander. Ein Feld pro Zeile. Das Formular sollte die volle Breite mit ausreichend Rand nutzen. Ein Formular, das am Handy beengt wirkt, wird nicht abgeschlossen.

Überdeckung durch die mobile Tastatur vermeiden

Erscheint die mobile Tastatur, verdeckt sie die halbe Anzeige. Sorge dafür, dass der Login-Button über der Tastatur sichtbar ist, oder biete eine einfache Möglichkeit, die Tastatur auszublenden. Manche Websites zeigen den Button erst, wenn die Tastatur geschlossen ist. Das frustriert Nutzer. Halte den Button sichtbar.

Häufig gestellte Fragen

Wie viele Passwortanforderungen sollte ich stellen?

Drei bis fünf Anforderungen funktionieren am besten. Beispiele: mindestens 12 Zeichen, ein Großbuchstabe, eine Zahl und ein Sonderzeichen. Mehr als fünf Anforderungen sind schwer zu merken. Weniger als drei machen Passwörter schwach. Zeige die Anforderungen im Formular vor dem Absenden, nicht versteckt, bis ein Fehler auftritt. Nutzer müssen sehen, worauf sie hinarbeiten. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.

Sollte ich eine Anzeige der Passwortstärke zeigen?

Ja, aber nur, wenn die Anforderungen klar angezeigt sind. Eine Stärkeanzeige (schwach, mittel, stark) hilft Nutzern zu verstehen, ob ihr Passwort akzeptabel ist, ohne abzusenden und einen Fehler zu bekommen. Kombiniere sie mit ausdrücklichen Anforderungen als Text, damit Nutzer genau wissen, was ein Passwort stark macht. Manche Nutzer finden die Anzeige hilfreich. Manche finden sie verwirrend. Teste es mit deiner Zielgruppe.

Was, wenn jemand sein Passwort UND seine E-Mail-Adresse vergisst?

Das ist ein seltener Fall, aber er verdient eine Lösung. Verlange bei der Registrierung eine zweite Kontaktmöglichkeit. Vielleicht eine Telefonnummer oder eine alternative E-Mail-Adresse. Speichere sie sicher. Verliert jemand den Zugriff auf seine Haupt-E-Mail-Adresse, kann er seine Identität per Telefon bestätigen und wieder Zugang bekommen, um sein Passwort zurückzusetzen. Biete eine Support-Kontaktmöglichkeit an. Gib ihnen einen Weg, dein Support-Team zu erreichen, um die Identität zu prüfen und den Zugang manuell wiederherzustellen.

Brauche ich Zwei-Faktor-Authentifizierung in meinem Login-Formular?

Die Zwei-Faktor-Authentifizierung (2FA) erhöht die Sicherheit. Nach korrekter Eingabe von E-Mail-Adresse und Passwort bestätigen Nutzer über einen zweiten Faktor, etwa einen Code, der aufs Handy geschickt oder von einer Authenticator-App erzeugt wird. 2FA ist für Konten mit hohem Schutzbedarf unverzichtbar (Admin-Bereiche, Finanzen, Gesundheitswesen). Für Konten mit geringem Risiko (Blog-Zugang, Community-Forum) lass sie weg. Mit 2FA steigt die Wahrscheinlichkeit, dass Nutzer ihren zweiten Faktor vergessen und ausgesperrt werden. Wäge Sicherheit gegen Komfort ab.

Wie oft sollte man sein Passwort zurücksetzen müssen?

Erzwinge keine regelmäßigen Passwortwechsel. Studien zeigen, dass erzwungene Wechsel zu schwachen Passwörtern (12345, Passwort1 usw.) führen und die Sicherheit nicht verbessern. Lass Nutzer ihr Passwort unbegrenzt behalten, solange ihr Konto nicht kompromittiert ist. Vermutest du ein Datenleck, erzwinge einen Wechsel. Sonst lass sie selbst entscheiden, wann sie ihr Passwort ändern. Die meisten Nutzer setzen ein Passwort, das funktioniert, nie zurück.

Ist es besser, nach Benutzername oder E-Mail-Adresse zu fragen?

Frage nach der E-Mail-Adresse. Die meisten Nutzer vergessen Benutzernamen. Eine E-Mail-Adresse ist leichter zu merken und leichter wiederherzustellen, wenn man sie vergessen hat. Sie ist auch auf deiner Seite einfacher zu verwalten. Du musst bei der Anmeldung nicht prüfen, ob ein Benutzername frei ist, oder doppelte Benutzernamen verhindern. E-Mail-Adressen sind von Haus aus eindeutig. E-Mail funktioniert auch besser mit Passwort-Managern, die E-Mail-Adressen zuverlässiger ausfüllen als Benutzernamen.

So hilft dir WEMASY bei Login- und Passwort-zurücksetzen-Formularen

Der Formular-Builder von WEMASY unterstützt sichere Abläufe für Login und Zurücksetzen des Passworts. Erstelle ein Login-Formular mit E-Mail- und Passwortfeld. Füge mit einem Klick einen Schalter zum Anzeigen des Passworts hinzu. Lege Passwortanforderungen fest (Länge, Großbuchstaben, Zahlen, Sonderzeichen). Nutze bedingte Logik, um ein Kontrollkästchen „Angemeldet bleiben“ zu zeigen oder wegzulassen, je nach deinem Sicherheitsbedarf. Verbinde dich mit dem Authentifizierungssystem von WEMASY oder binde externe Anbieter für die Anmeldung per API ein. WEMASY übernimmt Passwort-Hashing, Begrenzung der Versuche und Sitzungsverwaltung automatisch. E-Mails zum Zurücksetzen werden sicher von deiner Domain verschickt. Tokens zum Zurücksetzen laufen nach 24 Stunden ab. Sieh nach, was in den WEMASY-Tarifen enthalten ist.