Deine Website kann noch so schön sein: Ob sie sich lohnt, entscheidet sich in dem Moment, in dem jemand auf den Button klickt und das Formular abschickt. Alles davor ist Vorbereitung auf genau diesen Augenblick.
Diese Lektion behandelt das Ziel der Reise: den Call-to-Action als Handwerk und das Formular selbst. Beides kannst du an deiner eigenen Seite prüfen und verbessern, ohne eine Zeile Code zu schreiben.
Kurzantwort
Was macht gutes Formular Design aus?
Gutes Formular Design räumt dem Besucher im Moment der Anfrage jede Hürde aus dem Weg: ein Button, der nach Handlung aussieht und dessen Text ein Versprechen trägt, so wenige Felder wie für den ersten Kontakt nötig, sichtbare Labels, konkrete Fehlermeldungen und Vertrauen direkt am Absenden-Punkt.
Das ist Handwerk mit prüfbaren Regeln. Wer sie kennt, sieht in seinem Formular nicht mehr “da kommt halt nichts rein”, sondern “elf Pflichtfelder hinter einem Button, der nichts verspricht”, und kann das beheben.
📌 Für wen ist das relevant: Für Selbstständige und kleine Unternehmen, deren Website am Ende fast immer auf eines hinausläuft: ein ausgefülltes Formular oder einen Anruf.
- Du arbeitest durchgehend am Beispiel der Schreinerei Brenner: ihr Formular wird von einer 11-Felder-Hürde zu einer 4-Felder-Einladung
- Jeden Handgriff kannst du direkt auf deine eigene Seite übertragen
- Am Ende steht die Formular-Inventur: acht Prüffragen für den Moment der Anfrage
Das lernst du in dieser Lektion
Du kannst die Anfrage-Strecke deiner Website als Fremder durchlaufen und jede Hürde konkret benennen.
Du kannst jeden Buttontext in ein Mikro-Versprechen umschreiben und die Gewichtung von primären und sekundären Buttons prüfen.
Du kannst jedes Formularfeld rechtfertigen oder streichen und die vier häufigsten Handwerksfehler in deinem Formular finden und beheben.
Du kannst die Abschlusszone deines Formulars mit Vertrauenselementen ausstatten, die dem Besucher die letzten Zweifel nehmen.
Inhalt
01 ·
Der teuerste Moment der Website
Denk an alles, was du in deine Website gesteckt hast: das Design, die Texte, die Referenzen, die Ladezeit. All das hat eine einzige Aufgabe: Es soll einen Fremden so weit bringen, dass er dir schreibt oder dich anruft. Verdient wird auf einer Website genau in diesem einen Moment.
Deshalb ist der Weg zur Anfrage die teuerste Strecke deiner Seite. Jede Hürde, die irgendwo auf der Website stört, stört hier am stärksten, denn der Besucher hat bereits Zeit investiert und kann trotzdem jederzeit gehen. Ein Button, der nichts verspricht, oder ein Formular, das wie ein Verhör wirkt, entwertet alles, was davor gut war.
Ein Rahmensatz vorweg, damit du weißt, worauf du dich stützt: Die Regeln dieser Lektion sind bewährtes Handwerk des Fachs, keine Naturgesetze, und der einzige normierte Zahlenwert ist die WCAG-Zielgröße für Bedienelemente in Sektion 02. Alles andere kannst du direkt an deiner eigenen Seite prüfen, statt es glauben zu müssen.
Unser Beispiel bleibt die Schreinerei Brenner, die frei erfundene Handwerksfirma aus der Lektion zu den Design-Prinzipien. Ihre Website sieht inzwischen aufgeräumt aus, aber die Anfragen bleiben trotzdem aus. Ein Blick auf die Anfrage-Strecke zeigt, warum.
Der Weg des Besuchers: Er kommt auf die Startseite, liest sich auf der Leistungsseite fest und klickt auf “Kontakt”. Dort wartet ein Formular mit elf Pflichtfeldern, von der Anrede über Straße und Postleitzahl bis zum Budget-Dropdown, und darunter ein grauer Button mit der Aufschrift “Absenden”. Jedes einzelne Element ist gut gemeint, und zusammen bilden sie eine Wand.
Schaubild: die Anfrage-Strecke der Schreinerei Brenner. Alle Hürden sitzen auf den letzten Metern, genau dort, wo der Besucher am kürzesten vor der Anfrage steht.
Sieh dir an, wo die Marker sitzen: Alle drei Hürden liegen zwischen dem Klick und der fertigen Anfrage. Genau diese Zone behandeln die nächsten vier Sektionen, Hürde für Hürde. Was davor liegt, der Call-to-Action im ersten Sichtfeld und seine Wiederholung im Seitenverlauf, hast du in den Lektionen zur Hero-Section und zum Seitenaufbau geklärt.
Eine zweite Abgrenzung: Hier geht es um den Moment der Handlung, nicht um das Gesamtkonzept einer Seite, die nur für eine Kampagne existiert. Wie so eine Seite als Ganzes aufgebaut wird, zeigt unser Beitrag zu Landing Pages.
💡 Praxis-Tipp
Durchlaufe heute deine eigene Anfrage-Strecke als Fremder. Nimm dein Handy, öffne deine Website im privaten Fenster und stell dir die Aufgabe: Ich will ein Angebot anfragen, und ich kenne diese Firma nicht.
Notiere jede Stelle, an der du suchst, zögerst oder etwas eintippen sollst, das dir zu viel erscheint. Diese Notizliste ist dein Arbeitsplan für den Rest der Lektion, denn jede der folgenden Sektionen behebt eine Sorte dieser Hürden.
Für die Conversion heißt das: Verbesserungen am Moment der Anfrage wirken auf jeden einzelnen Besucher, der so weit gekommen ist. Nirgendwo sonst auf der Seite liegt ein Handgriff so nah am Ergebnis.
02 ·
Buttons, die nach Handlung aussehen
Der Call-to-Action ist die Tür zum Formular, und eine Tür erkennt man daran, dass sie wie eine Tür aussieht. Ein Button braucht dafür drei Dinge: eine sichtbare Fläche, deutlichen Kontrast zum Hintergrund und eine vertraute Form. Die Pill-Form und abgerundete Ecken sind die eingeübten Signale des Webs für “hier kannst du drücken”.
Bei der Schreinerei Brenner fehlen alle drei. Der Weg zur Anfrage ist ein grauer Textlink, und daneben steht sogar ein zweiter Button “Felder leeren”, der die Eingaben des Besuchers löschen würde. Der eine Weg, der Geld bringt, ist nicht vom Kleingedruckten zu unterscheiden.
Der Buttontext ist ein Mikro-Versprechen
“Absenden”, “Senden”, “OK”: Diese Wörter beschreiben, was die Technik tut, nicht, was der Besucher bekommt. Ein guter Buttontext ist ein Mikro-Versprechen aus der Sicht des Besuchers: “Termin anfragen”, “Angebot erhalten”, “Rückruf vereinbaren”.
Der Test dafür dauert zwei Sekunden. Setz gedanklich “Ich möchte …” vor den Buttontext und hör hin: “Ich möchte absenden” ergibt keinen Wunsch, “Ich möchte ein Angebot erhalten” schon. Wenn der Satz aus dem Mund deines Kunden stammen könnte, trägt der Button das richtige Versprechen.
Ein Button gewinnt, der zweite wird leise
Pro Sichtfeld darf nur ein Button visuell gewinnen: gefüllt, dunkel, mit Luft drumherum. Jeder weitere Weg wird zum sekundären Element, als Outline-Button oder schlichter Textlink. Das ist dieselbe Hierarchie-Regel, die du aus den Design-Prinzipien kennst, angewendet auf den Moment der Handlung.
Und der “Felder leeren”-Button? Der fliegt ersatzlos raus. Er hat keinen Nutzen, den ein Besucher je vermissen würde, und ein versehentlicher Klick zerstört alles, was gerade eingetippt wurde.
Groß genug für einen Daumen
Auf dem Handy drückt kein Mauszeiger, sondern ein Daumen. Die WCAG nennen als Zielgröße für Bedienelemente mindestens 24 mal 24 CSS-Pixel (Erfolgskriterium 2.5.8, Level AA), und das ist die Untergrenze, nicht das Ziel. Bewährt ist deutlich mehr: ein Anfrage-Button in voller Formularbreite, den der Daumen gar nicht verfehlen kann.
Was aus der Barrierefreiheit sonst noch folgt, behandelt die Lektion zur Barrierefreiheit nach dem BFSG. Hier reicht die Konsequenz: Ein Button, den man zweimal antippen muss, kostet Anfragen.
Schaubild: das Button-Paar am Brenner-Formular. Rechts gewinnt ein einziger Button das Sichtfeld, der Alternativweg (Marker 3) bleibt als leiser Textlink erhalten.
💡 Merke
Der Buttontext beantwortet die Frage: Was bekomme ich, wenn ich drücke? Prüf jeden Button mit dem “Ich möchte …”-Test. Ergibt der Satz keinen Wunsch deines Kunden, beschreibt der Button die Technik statt das Versprechen.
💡 Praxis-Tipp
Mach heute die Buttontext-Umschreibung: Sammle jeden Button und jeden Handlungslink deiner Website in einer Liste. Schreib neben jeden die Antwort auf die Frage, was der Besucher nach dem Klick bekommt, und formuliere den Text als genau dieses Ergebnis mit einem Verb.
Prüf danach die Gewichtung: pro Sichtfeld ein gefüllter Button, alle anderen Wege leiser. Buttontexte kannst du in jedem Baukasten und jedem CMS selbst ändern, dafür brauchst du niemanden.
Für die Conversion heißt das: Der Button ist die kürzeste Textstelle deiner Website mit der direktesten Wirkung. Ein Versprechen an dieser Stelle kostet nichts und arbeitet bei jedem einzelnen Besucher.
03 ·
Weniger Felder, bessere Anfragen
Elf Pflichtfelder stellen dem Besucher elf Forderungen, bevor die Schreinerei ihm eine einzige Frage beantwortet hat. Jedes Feld ist eine kleine Verhandlung: Der Besucher gibt etwas von sich preis und fragt sich, wofür das nötig ist. Deshalb braucht jedes Feld eine Rechtfertigung.
Die Prüffrage dafür lautet: Brauchst du diese Information für den ersten Kontakt oder erst für das Projekt? Straße und Postleitzahl braucht der Aufmaßtermin, nicht die erste Mail. Das Budget klärt sich im Gespräch besser als in einem Dropdown, und die Anrede braucht niemand, um zurückzurufen.
| Feld im alten Formular | Für den ersten Kontakt nötig? | Entscheidung |
|---|---|---|
| Anrede, Titel | Nein | ❌ Fliegt raus |
| Vorname, Nachname | Ja, als Ansprache | ✅ Wird ein Feld: “Name” |
| Straße, PLZ, Ort | Nein, das braucht erst der Aufmaßtermin | ❌ Fliegt raus |
| Telefon und E-Mail, beide Pflicht | Ein Rückkanal reicht | ✅ Wird ein Feld: “Telefon oder E-Mail” |
| Projektart-Dropdown, Budget-Dropdown | Nein, das klärt das Erstgespräch | ❌ Fliegt raus, der Freitext übernimmt |
| Nachricht | Ja, als Kern der Anfrage | ✅ Bleibt: “Dein Anliegen” mit gutem Label |
| Wunschtermin | Hilfreich, aber nicht nötig | ✅ Bleibt, ehrlich als optional markiert |
Übrig bleiben vier Felder: Name, Telefon oder E-Mail, das Anliegen als Freitext und ein optionaler Wunschtermin. Das ist keine Magerversion, sondern die ehrliche Antwort darauf, was ein erster Kontakt wirklich braucht.
Pflicht und optional ehrlich kennzeichnen
Was Pflicht ist, bekommt ein Sternchen, was optional ist, bekommt das Wort “optional” direkt ins Label. Nichts wird als Pflicht markiert, was keine ist, denn jede unehrliche Pflicht zwingt den Besucher, sich zwischen Lüge und Abbruch zu entscheiden. Wer beim Wunschtermin “keine Ahnung” eintippen muss, verliert das Vertrauen in den Rest des Formulars.
Ein Freitextfeld schlägt zehn Dropdowns
Die beiden Dropdowns wollten die Anfrage vorsortieren, und genau das können sie nicht. Ein Freitextfeld mit einem guten Label, etwa “Beschreib kurz dein Projekt: Was soll entstehen, und bis wann?”, liefert mehr als jede Auswahlliste. Menschen schreiben in eigenen Worten, was ihnen wichtig ist, während Dropdowns sie in Kategorien pressen, die nie ganz passen.
Bleibt der Einwand, den fast jeder Formular-Besitzer hat: Sortieren viele Felder nicht die unpassenden Anfragen aus? Sie sortieren vor allem die passenden aus, die keine Lust auf ein Verhör haben, bevor sie wissen, mit wem sie es zu tun haben. Die Qualifizierung gehört ins Erstgespräch, und ein gutes Freitextfeld liefert dir dafür mehr Substanz als jedes Dropdown.
Schaubild: das Brenner-Formular vor und nach der Feld-Rechtfertigung. Rechts fragt das Formular nur noch, was der erste Kontakt wirklich braucht.
💡 Merke
Ein Anfrage-Formular sammelt keine Projektdaten, es startet ein Gespräch. Alles, was das Gespräch klären kann, fliegt aus dem Formular. Die eine Prüffrage pro Feld: Brauche ich das für den ersten Kontakt oder erst für das Projekt?
💡 Praxis-Tipp
Leg heute die Feld-Rechtfertigungs-Liste für dein eigenes Formular an: jedes Feld untereinander, daneben zwei Spalten mit “erster Kontakt” und “erst fürs Projekt”. Setz bei jedem Feld genau ein Kreuz und sei dabei streng mit dir.
Alles in der Projekt-Spalte wird gestrichen oder ehrlich optional. Wenn du bei einem Feld zögerst, gehört es fast immer in die Projekt-Spalte, denn die Felder für den ersten Kontakt rechtfertigen sich von selbst.
Für die Conversion heißt das: Jedes gestrichene Feld macht den Einstieg leichter, ohne dass die Anfrage an Wert verliert. Und das Freitextfeld liefert dir Anfragen, in denen schon steht, worüber ihr sprechen werdet.
04 ·
Formular-Handwerk: Label, Fehler, Reihenfolge
Wenn Button und Felder stimmen, entscheidet das Kleingedruckte der Bedienung. Vier Handwerksfehler tauchen in Formularen immer wieder auf, und alle vier lassen sich ohne Designer beheben. Geh sie einmal der Reihe nach durch, danach erkennst du sie überall auf den ersten Blick.
Fehler 1: Platzhalter statt Label
Der graue Beispieltext im Feld ist kein Label, denn er verschwindet in dem Moment, in dem der Besucher zu tippen beginnt. Wer vor dem Absenden noch einmal prüfen will, was wo hingehört, sieht nur noch seine eigenen Eingaben ohne Beschriftung. Das Label gehört sichtbar über das Feld, wo es die ganze Zeit stehen bleibt.
Fehler 2: Die Reihenfolge beginnt mit dem Schwersten
Das Brenner-Formular fragte als Erstes nach dem Budget, also nach der unangenehmsten Angabe von allen. Die handwerkliche Reihenfolge läuft von leicht nach schwer: erst der Name, den jeder ohne Nachdenken tippt, dann der Kontaktweg, zuletzt das Anliegen, das Formulierungsarbeit kostet. Ein leichter Einstieg senkt die Hürde, überhaupt anzufangen, und wer drei Felder ausgefüllt hat, lässt das vierte selten liegen.
Fehler 3: Fehlermeldungen, die nichts erklären
“Ungültige Eingabe” in einem Balken über dem Formular ist eine Strafe, keine Hilfe. Der Besucher muss selbst suchen, welches Feld gemeint ist und was daran falsch sein soll. Eine handwerklich saubere Fehlermeldung steht direkt am betroffenen Feld und sagt konkret und freundlich, was zu tun ist: “Bitte gib eine Telefonnummer oder eine E-Mail-Adresse an, damit wir dich erreichen können.”
Dazu gehört eine zweite Regel: Ein Fehler darf niemals die übrigen Eingaben löschen. Wer seine halbe Anfrage noch einmal tippen muss, tippt sie meistens nicht noch einmal.
Fehler 4: Der leere Erfolgsmoment
Nach dem Absenden zeigt das Brenner-Formular eine fast leere Seite mit “Vielen Dank.” Der Besucher hat gerade den wichtigsten Schritt gemacht, und die Website reagiert mit einem Achselzucken. Gestalte stattdessen den Danke-Zustand: Bestätige, dass die Anfrage angekommen ist, sag, wann sich wer meldet, und biete einen nächsten Schritt an, etwa den Blick in die Referenzen.
Schaubild: die vier Handwerksfehler am Brenner-Formular. Jeder einzelne ist ohne Designer behebbar, und zusammen entscheiden sie, ob ein begonnenes Formular auch abgeschickt wird.
ℹ️ Warum der Platzhalter-Trick so verbreitet ist
Platzhalter statt Labels wirken aufgeräumter und sparen Höhe, deshalb greifen viele Baukasten-Vorlagen dazu. Der Preis ist unsichtbar: Der Besucher muss sich merken, was in jedem Feld stand, und genau diese Gedächtnislast soll ein gutes Formular ihm abnehmen.
Das Prinzip dahinter kennst du aus den Usability-Grundlagen: Die Seite denkt, damit der Besucher es nicht muss. Ein sichtbares Label über dem Feld ist die einfachste Anwendung dieser Regel.
Für die Conversion heißt das: Sauberes Formular-Handwerk bemerkt niemand, aber jeder bemerkt, wenn es fehlt. Die vier Fehler kosten dich genau die Besucher, die schon angefangen hatten auszufüllen, und das sind die wertvollsten von allen.
05 ·
Vertrauen am Abschluss
Das Formular ist ausgefüllt, der Daumen schwebt über dem Button. In diesem letzten Augenblick stellt sich der Besucher drei Fragen: Was passiert jetzt mit meinen Daten, wann meldet sich jemand, und muss ich das überhaupt schriftlich machen? Die Abschlusszone deines Formulars beantwortet alle drei, bevor sie gestellt werden.
Die erste Antwort ist die Antwortzeit als Versprechen: “Wir melden uns innerhalb eines Werktags.” Versprich dabei nur, was du zuverlässig hältst, denn diese Zusage ist dein erster Beweis von Verlässlichkeit, noch vor dem ersten Gespräch. Ein gehaltenes Versprechen an dieser Stelle wirkt stärker als jedes Qualitätssiegel.
Die zweite Antwort ist die Anti-Spam-Beruhigung in einer Zeile: “Keine Werbung, keine Weitergabe deiner Daten.” Der Besucher gibt dir gerade seinen Rückkanal, und seine leise Sorge lautet, dafür in einem Verteiler zu landen. Nimm ihm diese Sorge genau dort, wo sie entsteht.
Die dritte Antwort ist der Alternativweg: Nicht jeder schreibt gern, und für Handwerksthemen greifen viele lieber zum Telefon. Eine sichtbare Telefonnummer mit Erreichbarkeit direkt neben dem Formular fängt genau die Besucher auf, die vor dem Tippen zurückschrecken. Der Alternativweg konkurriert nicht mit dem Formular, er rettet Anfragen, die sonst gar nicht kämen.
Schaubild: die Abschlusszone des Brenner-Formulars. Vier kurze Elemente beantworten die letzten Fragen des Besuchers direkt am Absenden-Punkt.
ℹ️ Der Datenschutzhinweis: Pflicht ohne Angstmache
Ein Hinweis auf die Verarbeitung der Daten mit Link zur Datenschutzerklärung gehört an jedes Formular. Er darf sachlich und kurz sein, ein drohender Absatz in Juristendeutsch schreckt ab, ohne rechtlich mehr zu leisten.
Wie der Hinweis bei dir genau aussehen muss, etwa ob eine Checkbox nötig ist, ist eine Rechtsfrage. Die klärst du mit deiner Datenschutzerklärung und im Zweifel mit deinem Rechtsbeistand, diese Lektion ist keine Rechtsberatung.
💡 Merke
Die Abschlusszone beantwortet drei Fragen, bevor sie gestellt werden: Was passiert nach dem Klick, wann meldet sich jemand, und wie geht es auch ohne Formular? Jede unbeantwortete dieser Fragen ist ein Grund, den Daumen wieder wegzunehmen.
Für die Conversion heißt das: Vertrauen wird nicht nur oben auf der Seite aufgebaut, es wird am Absenden-Punkt verteidigt. Die Abschlusszone ist der billigste Ort deiner Website, um eine fast fertige Anfrage nicht mehr zu verlieren.
06 ·
Das Brenner-Formular komplett
Jetzt setzt du alle Handgriffe zusammen. Vorher: elf Pflichtfelder hinter einem grauen “Absenden”, ohne Versprechen und ohne Antwort auf die Frage, was danach passiert. Nachher: vier ehrlich gekennzeichnete Felder, ein Button mit Mikro-Versprechen und eine Abschlusszone, die die letzten Zweifel beantwortet.
An der Leistung der Schreinerei und an der Seite davor hat sich nichts geändert. Verändert wurde ausschließlich der Moment der Anfrage, die Strecke zwischen Interesse und abgeschickter Nachricht.
Schaubild: der Gesamtvergleich. Zwischen beiden Fassungen liegt kein neues Design, sondern die konsequente Anwendung aller Handgriffe dieser Lektion.
Aus den Sektionen dieser Lektion wird jetzt ein Werkzeug: die Formular-Inventur. Acht Prüffragen mit klarer Ja-oder-Nein-Antwort, und jedes Nein ist ein konkreter Arbeitsauftrag mit bekannter Lösung.
| Prüfpunkt | Die Frage an dein Formular | Sektion |
|---|---|---|
| 1. Strecke | Kommst du als Fremder ohne Suchen und Zögern vom Einstieg bis zum Formular? | 01 |
| 2. Button | Sieht der Button nach Handlung aus, und gewinnt pro Sichtfeld genau einer? | 02 |
| 3. Buttontext | Besteht der Text den “Ich möchte …”-Test? | 02 |
| 4. Felder | Kannst du jedes Feld für den ersten Kontakt rechtfertigen? | 03 |
| 5. Kennzeichnung | Ist Pflicht ehrlich Pflicht und optional ehrlich optional? | 03 |
| 6. Label | Steht jedes Label sichtbar über seinem Feld und bleibt es dort stehen? | 04 |
| 7. Fehler und Erfolg | Sagt jede Fehlermeldung am Feld, was zu tun ist, und führt der Danke-Zustand zum nächsten Schritt? | 04 |
| 8. Vertrauen | Beantwortet die Abschlusszone Antwortzeit, Datenfrage und Telefonweg? | 05 |
Zwei Grenzen der Inventur gehören dazu. Sie prüft den Moment der Anfrage, nicht, ob überhaupt genug Besucher bis zum Formular kommen. Und ob die neue Fassung wirklich mehr Anfragen bringt, zeigt erst die Messung an der echten Seite, das Handwerkszeug dafür liefert unser Beitrag zur Conversion-Optimierung.
Experten-Tipp aus der Agentur
Schick dir selbst einmal im Monat eine Testanfrage über dein eigenes Formular, vom Handy und im privaten Fenster. Prüf dabei drei Dinge: ob die Anfrage ankommt, in welchem Postfach sie landet und wie schnell die Antwort tatsächlich rausgeht.
Eine Anfrage kann nämlich auch nach dem perfekten Formular verloren gehen, in einem Postfach, das niemand liest, oder in einer Antwort, die drei Tage braucht. Halte das Versprechen aus deiner Abschlusszone genauso diszipliniert ein, wie du es hingeschrieben hast.
Pascal Cabitza
Geschäftsführer Ostend Digital
Für die Conversion heißt das: Die Inventur macht aus einer diffusen Sorge (“es kommt nichts rein”) eine Liste konkreter Handgriffe. Und jeder einzelne davon liegt näher am Ergebnis als jede Verschönerung weiter oben auf der Seite.
07 ·
💡 Recap
Formulare und Call-to-Actions in 30 Sekunden:
- Der Moment der Anfrage ist der teuerste der Website. Alles davor zahlt auf ihn ein, und jede Hürde wirkt genau hier am stärksten
- Buttons brauchen Fläche, Kontrast und ein Mikro-Versprechen. “Angebot erhalten” statt “Absenden”, geprüft mit dem “Ich möchte …”-Test, ein gefüllter Button pro Sichtfeld, mindestens 24 mal 24 Pixel groß
- Jedes Feld braucht eine Rechtfertigung. Brenner kam von elf Pflichtfeldern auf vier, weil nur zählt, was der erste Kontakt braucht, und ein Freitext mit gutem Label schlägt jedes Dropdown
- Vier Handwerksfehler entscheiden über den Abschluss: unsichtbare Labels, die schwerste Frage zuerst, pauschale Fehlermeldungen und ein leerer Danke-Zustand
- Die Abschlusszone verteidigt das Vertrauen: Antwortzeit als haltbares Versprechen, Anti-Spam-Zeile, Telefonweg und ein sachlicher Datenschutzhinweis
- Die Formular-Inventur macht daraus ein Werkzeug: acht Prüffragen, jedes Nein ist ein konkreter Arbeitsauftrag
08 ·
Selbstcheck: kannst du das anwenden?
Deine Website bekommt ordentlich Besucher, aber kaum Anfragen. Wo fängst du mit der Suche an?
Am Ende der Strecke, nicht am Anfang. Durchlaufe die Anfrage-Strecke selbst als Fremder, am Handy und im privaten Fenster, mit der Aufgabe “Ich will ein Angebot anfragen”. Notiere jede Stelle, an der du suchst, zögerst oder zu viel eintippen sollst, denn Verbesserungen an diesen letzten Metern wirken auf jeden Besucher, der bereits überzeugt genug war, so weit zu kommen.
Dein Anfrage-Button heißt “Absenden” und steht als grauer Textlink unter dem Formular. Was änderst du, und in welcher Reihenfolge?
Erst die Sichtbarkeit, dann der Text. Der Button bekommt eine gefüllte, kontrastreiche Fläche in daumentauglicher Größe, damit er überhaupt als Handlung erkennbar ist. Danach bekommt er ein Mikro-Versprechen aus Besuchersicht, etwa “Kostenloses Angebot erhalten”, und du prüfst mit dem “Ich möchte …”-Test, ob der Text einen echten Wunsch ergibt.
Ein Bekannter rät dir, das Budget-Dropdown als Pflichtfeld zu behalten, damit nur ernsthafte Interessenten anfragen. Wie entscheidest du?
Mit der Prüffrage: Brauchst du das Budget für den ersten Kontakt oder erst für das Projekt? Es gehört ins Erstgespräch, denn ein Pflicht-Dropdown schreckt vor allem die passenden Interessenten ab, die sich noch nicht festlegen wollen. Wer vorqualifizieren will, bekommt über ein gutes Freitextfeld mehr Substanz als über jede Auswahlliste.
Ein Kunde erzählt dir am Telefon, dein Formular habe “irgendeinen Fehler angezeigt”, und er habe dann aufgegeben. Welche Handwerksfehler prüfst du?
Alle vier. Prüf zuerst die Fehlermeldung: Steht sie am betroffenen Feld und sagt sie konkret, was zu tun ist, oder hängt ein pauschales “Ungültige Eingabe” über dem Formular? Prüf danach, ob die Eingaben beim Fehler erhalten bleiben, ob die Labels sichtbar über den Feldern stehen und ob die Reihenfolge von leicht nach schwer läuft.
Nach dem Absenden zeigt deine Seite nur den Satz “Vielen Dank”. Was fehlt an diesem Moment, und was direkt davor?
Danach fehlt der gestaltete Erfolgsmoment: die Bestätigung, dass die Anfrage angekommen ist, die Angabe, wann sich wer meldet, und ein nächster Schritt wie der Blick in die Referenzen. Davor fehlt die Abschlusszone, die dasselbe Versprechen schon vor dem Klick gibt: Antwortzeit, Anti-Spam-Zeile und der Telefonweg für alle, die nicht schreiben wollen. Beides zusammen macht aus dem Absenden einen Moment, der Vertrauen bestätigt statt es zu verbrauchen.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (3 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 2.5.8 Target Size (Minimum): Zielgröße für Bedienelemente mindestens 24 mal 24 CSS-Pixel, Stufe AA (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das ist der einzige normierte Zahlenwert dieser Lektion. Quellentyp: Richtlinie, keine Interessenlage
- Alle übrigen Regeln dieser Lektion, darunter der “Ich möchte …”-Test für Buttontexte, die Feld-Rechtfertigung mit der Frage nach dem ersten Kontakt, die vier Handwerksfehler und die Elemente der Abschlusszone: verbreitete Handwerkspraxis des Webdesigns, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als prüfbare Handgriffe formuliert, nicht als Messwerte, und die Lektion verzichtet absichtlich auf Prozentangaben zur Wirkung einzelner Formular-Elemente
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen, Ostend Digital, Stand 08/2026. Hinweise zum Datenschutz an Formularen sind keine Rechtsberatung
Du willst, dass aus deinen Besuchern Anfragen werden?
Wir gestalten Websites vom Moment der Anfrage her, vom Buttontext bis zur Abschlusszone, und begründen dir jede Entscheidung an der Aufgabe deiner Seite.
