Eine Kontaktseite gehört zu den Seiten mit der höchsten Absicht auf jeder Website. Ein Besucher, der dorthin navigiert, hat bereits entschieden, dass er mit Ihnen sprechen möchte – er ist bereit, Kontakt aufzunehmen. Die Frage ist, ob Ihre Kontaktseite das einfach macht oder ob sie so viel Reibung erzeugt, dass er aufgibt, bevor er das Formular abschickt.
Dieser Leitfaden zeigt, wie eine Kontaktseite mit hoher Konversionsrate aussieht, was Sie aufnehmen sollten, was weggelassen werden sollte und welche Designentscheidungen den Unterschied ausmachen.
Der Kernzweck einer Kontaktseite
Eine Kontaktseite hat eine einzige Aufgabe: Absicht in Kontakt umwandeln. Der Besucher ist angekommen, weil er eine Frage stellen, ein Problem melden, Informationen anfordern oder eine Anfrage stellen möchte. Jedes Element auf der Seite sollte diesem Ziel dienen – oder entfernt werden.
Der häufigste Fehler ist, die Kontaktseite als Ort zu behandeln, an dem alles hinkommt: die vollständige Adresse, jede Telefonnummer, die eingebettete Karte, die Social-Media-Links, die Team-Fotos, die FAQ-Übersicht, die Geschäftszeiten für jeden Standort und ein Kontaktformular mit 12 Feldern. Das Ergebnis ist eine überfüllte Seite, auf der der eigentliche Weg zur Kontaktaufnahme begraben ist.
Wählen Sie die primäre Aktion, die Besucher ausführen sollen, und machen Sie sie dominant. Alles andere ist sekundär.
Wesentliche Elemente
1. Das Kontaktformular
Für die meisten Unternehmen ist das Kontaktformular das primäre Element. Es sollte:
- Above the fold oder sofort sichtbar sein – ohne Scrollen
- Kurz sein – die Mindestanzahl an Feldern, die für die Bearbeitung der Anfrage erforderlich sind (in der Regel: Name, E-Mail, Betreff, Nachricht)
- Klar beschriftet sein – verwenden Sie deutliche Feldbezeichnungen, nicht nur Platzhaltertext (Platzhaltertext verschwindet, wenn der Besucher zu tippen beginnt)
- In Echtzeit validiert werden – zeigen Sie Feldfehler sofort an, wenn ein Pflichtfeld leer ist oder eine E-Mail-Adresse falsch formatiert ist, nicht erst beim Absenden
Die Anzahl der Formularfelder ist die größte einzelne Reibungsvariable auf einer Kontaktseite. Jedes zusätzliche Pflichtfeld reduziert die Abgabequote. Fügen Sie Felder nur hinzu, wenn sie einen konkreten betrieblichen Nutzen haben – nicht weil es „schön wäre, es zu wissen".
2. Eine klare Überschrift
Der Seitentitel und die Unterüberschrift sollten bestätigen, dass der Besucher am richtigen Ort ist, und die Erwartungen setzen. Vergleichen Sie:
Allgemein:
Kontakt
Spezifisch und beruhigend:
Kontaktieren Sie uns – Wir antworten innerhalb eines Werktages
Die zweite Version beantwortet die implizite Frage des Besuchers: „Wenn ich das absende, wird mir jemand tatsächlich antworten?"
3. Erwartung zur Antwortzeit
Geben Sie explizit an, wie schnell Sie antworten. „Wir melden uns innerhalb von 24 Stunden bei Ihnen" setzt eine konkrete Erwartung und signalisiert, dass Einsendungen überwacht werden. Vage Aussagen wie „Wir melden uns in Kürze" erzeugen Unsicherheit und senken das psychologische Vertrauen beim Absenden.
4. Bestätigung nach dem Absenden
Wenn der Besucher das Formular abschickt, zeigen Sie sofort eine klare Erfolgsmeldung an. Sie sollte:
- Bestätigen, dass die Nachricht eingegangen ist
- Die erwartete Antwortzeit wiederholen
- Optional eine alternative Kontaktmethode für dringende Angelegenheiten nennen
Eine Weiterleitung zur Startseite oder eine generische „Danke"-Seite ohne Kontext lässt Besucher im Ungewissen, ob ihre Einsendung übermittelt wurde.
Sekundäre Elemente, die sich lohnen
Diese Elemente fügen Wert hinzu, ohne Unordnung zu erzeugen, wenn sie unterhalb des primären Formulars oder in einer Seitenleiste platziert werden:
E-Mail-Adresse und Telefonnummer
Einige Besucher bevorzugen den direkten Kontakt gegenüber einem Formular. Eine E-Mail-Adresse und Telefonnummer – mit Hinweisen, wann jemand erreichbar ist („Mo–Fr, 9–18 Uhr MEZ") – schafft Vertrauen und bietet eine Alternative für Besucher, die sofortigen Kontakt wünschen.
Geschäftszeiten
Zeigen Sie Ihre tatsächlichen Geschäftszeiten an, idealerweise mit einem Live-Indikator „Jetzt geöffnet" / „Geschlossen – öffnet Montag um 9:00 Uhr". Das verhindert, dass Besucher ein Formular absenden und samstags um 23 Uhr eine sofortige Antwort erwarten.
Standort / Karte
Relevant für Unternehmen mit einer physischen Präsenz. Eine eingebettete Karte mit einer Markierung ist nützlich, sollte aber das Kontaktformular niemals aus dem sichtbaren Bereich verdrängen. Platzieren Sie sie unterhalb des sichtbaren Bereichs.
FAQ-Übersicht
Drei bis fünf vorab beantwortete Fragen auf einer Kontaktseite können häufige Fragen abfangen, die keine persönliche Antwort erfordern. Das nutzt sowohl dem Besucher (sofortige Antwort) als auch dem Team (weniger einfache Einsendungen zu bearbeiten).
Nehmen Sie nur Fragen auf, die tatsächlich häufig gestellt werden und deren Antworten spezifisch genug sind, um nützlich zu sein. „Wann antworten Sie?" mit der Antwort „Innerhalb von 1 Werktag" ist nützlich. „Was kann ich fragen?" ist es nicht.
Was weggelassen werden sollte
Unnötige Social-Media-Links. Social-Media-Links auf einer Kontaktseite lenken Besucher von der Seite weg, bevor sie Kontakt aufgenommen haben. Wenn Sie sie einbeziehen, platzieren Sie sie unten – nicht neben dem Formular.
Lange Unternehmensbeschreibungen. Die Kontaktseite ist nicht der Ort, um Ihr Leitbild zu erklären oder Ihre Dienstleistungen aufzulisten. Der Besucher hat bereits entschieden, Sie zu kontaktieren. Lassen Sie ihn nicht Marketingtexte lesen, bevor er absenden kann.
CAPTCHA mit schlechter Benutzerführung. CAPTCHAs mit verzerrtem Text oder verwirrenden Bildrastern erhöhen die Reibung für legitime Nutzer und bieten nur begrenzten Schutz vor modernen Spam-Bots. Wenn Spam-Schutz benötigt wird, ist ein unsichtbares CAPTCHA (reCAPTCHA v3 oder hCaptcha) oder ein Honeypot-Feld weniger störend.
„Demnächst verfügbar"-Abschnitte. Wenn eine Kontaktmethode noch nicht verfügbar ist, zeigen Sie sie nicht auf der Seite an.
Layout-Optionen
Einspaltig
Einfach und fokussiert. Formular in der Mitte der Seite, Kontaktdaten darunter oder daneben. Funktioniert gut für kleine Unternehmen und Dienstleister.
Zweispaltig
Formular in der linken Spalte (primär), ergänzende Informationen (Adresse, Telefon, Zeiten, Karte) in der rechten Spalte. Funktioniert gut für Unternehmen, die mehrere Kontaktoptionen ohne Hierarchie vermitteln müssen.
Volle Breite
Das Formular erstreckt sich über die gesamte Seitenbreite. Ideal für minimalistische Designs, bei denen das Formular selbst der gesamte Fokus ist.
Überlegungen für mobile Geräte
Ein erheblicher Teil der Kontaktformular-Einsendungen stammt von mobilen Geräten. Auf mobilen Geräten gilt:
- Eingabefelder sollten groß genug sein, um ohne Zoom angetippt zu werden
- Die Tastatur sollte automatisch zum richtigen Typ wechseln (E-Mail-Tastatur für das E-Mail-Feld, numerische Tastatur für Telefon)
- Die Senden-Schaltfläche sollte mit dem Daumen erreichbar sein (unterer Bildschirmbereich, volle Breite)
- Das Formular sollte kein horizontales Scrollen erfordern
Testen Sie Ihre Kontaktseite auf einem echten Telefon, bevor Sie sie veröffentlichen – die Emulation in einem Browser-Entwicklertool erfasst nicht alle Touch-Interaktionsprobleme.
Visuelle Designprinzipien
Weißraum. Eine Kontaktseite braucht Platz zum Atmen. Überfüllte, dichte Seiten wirken bürokratisch und reduzieren das Vertrauen. Geben Sie jedem Element visuelle Trennung.
Kontrast. Die Senden-Schaltfläche sollte visuell prominent sein – eine Farbe, die sich vom Hintergrund und von den Formularfeldern abhebt. Sie sollte das visuell offensichtlichste Element auf der Seite sein.
Fehlerzustände. Gestalten Sie den Validierungsfehlerzustand vor dem Einreichungszustand. Rote Ränder, klare Fehlermeldungen unterhalb des Feldes und eine Zusammenfassung oben im Formular für längere Formulare sind allesamt gute Praktiken.
Markenkonsistenz. Die Kontaktseite sollte dem visuellen Stil der übrigen Website entsprechen. Ein Unterschied in Farben, Schriftarten oder Layoutstil erzeugt ein subtiles Misstrauenssignal.
Wie Nura24 das Kontaktseiten-Design angeht
Nura24 enthält ein Kontaktseiten-Modul mit einem Drag-and-Drop-Komponentenbaukasten: Kontaktformular, Textblöcke, Karteneinbettung, Geschäftszeiten mit einem Live-Geöffnet/Geschlossen-Indikator, Telefonnummern, E-Mail-Adressen, Social-Media-Links, Team-Karten, FAQ-Übersicht und CTA-Schaltflächen – alles ohne Code konfigurierbar. Das Formular kann als JavaScript-Snippet, als iFrame oder als eigenständige Seite unter Ihrer Mandanten-Subdomain oder einer eigenen Domain eingebettet werden. Die Einsendungsverarbeitung umfasst automatische Antwort-E-Mails an den Besucher, Benachrichtigungen für Mitarbeiter und optional die automatische Ticket-Erstellung. Die visuelle Anpassung umfasst Farbe, Schriftart, Rahmenradius, Hell-/Dunkelmodus und Layout – sodass die Kontaktseite zu jeder Marke passen kann, ohne benutzerdefiniertes CSS.