Kreativ & Visuell

7 Tipps zum Aufbau einer erfolgreichen Kontaktseite

Nicolas Finet Nicolas Finet 7 Min. Lesezeit
7 Tipps zum Aufbau einer erfolgreichen Kontaktseite

Aktualisiert am 8. Oktober 2026 von Nicolas Finet, CEO von Sortlist.

Neu sind die seit dem 28. Juni 2025 geltenden Barrierefreiheitsanforderungen für erfasste digitale Verbraucherdienstleistungen, die 2026 abgeschlossene reCAPTCHA-Umstellung sowie ein Vergleich aktueller Verfahren gegen Formularspam.

Die sieben Grundtipps des Artikels bleiben gültig; dieser Zusatz übersetzt sie in einen prüfbaren Standard für Kontaktseiten im DACH-Markt.

Das Wichtigste in Kürze

  • Fragen Sie nur Daten ab, die für die Bearbeitung der konkreten Anfrage benötigt werden, und kennzeichnen Sie Pflichtfelder eindeutig.
  • Testen Sie Formular, Fehlermeldungen und Bestätigung vollständig mit Tastatur und Smartphone; interaktive Ziele sollten nach WCAG 2.2 grundsätzlich mindestens 24 × 24 CSS-Pixel groß sein.
  • Nennen Sie einen realistischen Antwortzeitraum und messen Sie nicht nur abgesendete Formulare, sondern auch Fehler, Abbrüche, Spamquote und tatsächliche Antworten.

Was sich bei Kontaktseiten seit 2024 geändert hat

Das Barrierefreiheitsstärkungsgesetz ist seit dem 28. Juni 2025 anzuwenden. Es betrifft nicht pauschal jede Unternehmenswebsite, wohl aber unter anderem bestimmte Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher; die Bundesfachstelle Barrierefreiheit erläutert den Anwendungsbereich und die Anforderungen mit Stand Mai 2025. Gehört die Kontaktstrecke zu einer erfassten Dienstleistung, sollte sie als Teil des gesamten Nutzungsvorgangs geprüft werden.

Auch der Spamschutz hat sich verändert: Google begann im vierten Quartal 2025 mit der automatischen Migration klassischer reCAPTCHA-Schlüssel und schloss sie laut Migrationsübersicht im ersten Quartal 2026 ab. Als Alternative bietet Cloudflare Turnstile inzwischen verwaltete, nicht interaktive und unsichtbare Modi ohne Bilderrätsel; unabhängig vom Anbieter bleibt die serverseitige Tokenprüfung erforderlich.

Welche Kontaktmöglichkeit passt zu welcher Anfrage?

Kontaktweg Geeignet für Stärke Zu prüfen
Kurzes Formular Beratung, Angebote, allgemeine Anfragen Strukturierte Weiterleitung an das richtige Team Nur notwendige Pflichtfelder, klare Fehlertexte und Eingangsbestätigung
E-Mail-Link Freie oder dokumentenreiche Anfragen Vertrauter Ablauf im eigenen E-Mail-Programm Öffentlich sichtbare Adresse kann mehr Spam erhalten
Telefon Dringende oder erklärungsbedürftige Anliegen Direkter Dialog ohne Formularschritte Erreichbarkeit, Kosten und Geschäftszeiten nennen
Live-Chat oder Chatbot Wiederkehrende Vorfragen und einfache Weiterleitung Schnelle Orientierung während des Besuchs Menschen als Ausweichweg anbieten; Hinweise zur Erstellung finden Sie im Beitrag über Chatbots
Terminbuchung Beratungen mit planbarer Dauer Verbindlicher nächster Schritt ohne E-Mail-Pingpong Zeitzone, Dauer, Stornierung und erhobene Daten transparent machen

Formularfelder: so wenig wie möglich, so viel wie nötig

Für eine erste allgemeine Anfrage reichen häufig Name und ein Rückkanal wie E-Mail-Adresse oder Telefonnummer. Das ist kein starres Zwei-Felder-Gesetz: Eine Projektauswahl oder Nachricht kann sinnvoll sein, wenn sie die Bearbeitung tatsächlich beschleunigt. Artikel 5 der DSGVO verlangt Datenminimierung; auch die BfDI erläutert den Grundsatz der Datensparsamkeit.

Vermeiden Sie Pflichtfelder für Budget, Firma oder Telefonnummer, wenn Ihr Team die Anfrage auch ohne diese Angaben beantworten kann. Verlinken Sie die Datenschutzerklärung direkt am Formular und erklären Sie knapp, wofür die Angaben verwendet werden.

„Meistens benötigst du eigentlich nur einen Namen und eine E-Mail-Adresse oder Telefonnummer.“

Praxisempfehlung aus „7 Designtipps für Kontaktseiten“, 99designs, 14. September 2021

Formulieren Sie außerdem aktiv und konkret: „Angebot anfragen“ oder „Frage senden“ beschreibt die nächste Handlung besser als ein isoliertes „Absenden“. Diese Empfehlung deckt sich mit dem Leitfaden von Pixpa vom 26. November 2021, der aktive Sprache für direktere Kommunikation empfiehlt.

Barrierefreiheit praktisch prüfen

Nach WCAG 2.2 sollen Ziele für Zeiger-Eingaben grundsätzlich mindestens 24 × 24 CSS-Pixel groß sein; der Standard nennt Ausnahmen, etwa bei ausreichendem Abstand. Die genaue Regel erläutert das W3C zu Erfolgskriterium 2.5.8. Für eine robuste Kontaktstrecke sollten Sie zusätzlich Folgendes testen:

  • Jedes Feld besitzt eine sichtbare, programmatisch zugeordnete Beschriftung; ein Placeholder ersetzt kein Label.
  • Pflichtangaben werden im Text und nicht ausschließlich durch Farbe markiert.
  • Fehler erscheinen am betroffenen Feld, beschreiben die Korrektur und bleiben für Screenreader wahrnehmbar.
  • Fokusreihenfolge, Formularübermittlung und Fehlerkorrektur funktionieren vollständig per Tastatur.
  • Die Kontaktseite bleibt auf kleinen Displays ohne horizontales Scrollen nutzbar; ergänzende Hinweise bietet der Artikel über Responsive Webdesign.
  • Nach dem Absenden folgt eine eindeutige Bestätigung mit Antwortzeitraum und alternativem Kontaktweg.

Spamschutz und aktuelle Werkzeuge im Vergleich

Verfahren Key Features Aufwand und Datenbezug Redaktionelle Bewertung
Honeypot plus Zeitprüfung Unsichtbares Zusatzfeld und Plausibilitätsprüfung der Ausfüllzeit Geringer Aufwand, keine zusätzliche externe Plattform Sehr gute erste Schutzschicht, allein jedoch nicht für starken Angriffsdruck
Serverseitiges Rate-Limiting Begrenzt wiederholte Anfragen nach definierten technischen Signalen Benötigt Backend-Logik und eine dokumentierte Speicher- beziehungsweise Löschstrategie Empfehlenswert als zweite Schutzschicht
Cloudflare Turnstile Managed-, Non-Interactive- und Invisible-Modus; Tokenprüfung über Siteverify Externer Dienst; Datenschutz, Einbindung und Fehler-Fallback vorab prüfen Gut, wenn geringe sichtbare Reibung Priorität hat
Google reCAPTCHA / Fraud Defense Checkbox- oder scorebasierte Prüfung, Cloud-Dashboard und erweiterbare Betrugserkennung Seit 2026 Google-Cloud-basierter Betrieb; Kontingente und Datenverarbeitung prüfen Leistungsfähig, aber integrations- und governance-intensiver

Ein CAPTCHA darf nie die einzige Übermittlungsbarriere sein. Prüfen Sie Tastaturbedienung, verständliche Fehlermeldungen und einen alternativen Kontaktweg; validieren Sie Tokens immer im Backend und kombinieren Sie das Verfahren mit Rate-Limiting.

Kennzahlen für Ihren Kontaktseiten-Audit

  • 28. Juni 2025: Seit diesem Datum gilt das BFSG für die erfassten Produkte und Dienstleistungen; die konkrete Anwendbarkeit muss für das jeweilige Angebot geprüft werden.
  • 24 × 24 CSS-Pixel: Mindestgröße für Zeigerziele nach WCAG 2.2, Erfolgskriterium 2.5.8, soweit keine der dort genannten Ausnahmen greift.
  • 1. Quartal 2026: Google nennt diesen Zeitraum für den Abschluss der automatischen Migration klassischer reCAPTCHA-Konten zu Google Cloud.
  • 10.000 Assessments pro Kalendermonat und Organisation: Das ist laut Google-Cloud-Abrechnung das kostenlose reCAPTCHA-Kontingent; die Nutzung aller Konten und Websites wird zusammengezählt.

Mini-Tool: Kontaktseite in acht Punkten prüfen

Markieren Sie jede nachweislich erfüllte Anforderung. Der Wert ist ein redaktioneller Schnellcheck und ersetzt weder eine Rechtsberatung noch einen vollständigen Barrierefreiheitstest.

Kontaktseiten-Check

Ergebnis: 0 von 8 Punkten. Bei 6–8 Punkten steht die Basis; bei 4–5 sollten Sie die fehlenden Punkte priorisieren; bei 0–3 liegen mehrere grundlegende Reibungs- oder Zugänglichkeitsrisiken vor.

Messen, ob die Kontaktseite tatsächlich funktioniert

Eine hohe Zahl abgesendeter Formulare allein belegt noch keine gute Kontaktseite. Erfassen Sie mindestens Formularaufrufe, gestartete Eingaben, erfolgreiche Übermittlungen, Validierungsfehler, Spamquote und den Anteil der Anfragen, die innerhalb des angekündigten Zeitraums beantwortet werden. Prüfen Sie Varianten mit einer klaren Hypothese; der Beitrag über A/B-Testing zur Funneloptimierung erklärt den methodischen Rahmen.

Lesen Sie Freitextanfragen außerdem regelmäßig qualitativ: Häufen sich Fragen zu Preis, Liefergebiet oder Erreichbarkeit, fehlen diese Informationen möglicherweise bereits vor dem Formular. Solche Erkenntnisse verbessern nicht nur die Seite, sondern die gesamte Customer Experience.

Häufige Fragen zu Kontaktseiten

Welche Angaben sollte ein Kontaktformular zwingend abfragen?

Nur Angaben, die zur Bearbeitung der jeweiligen Anfrage erforderlich sind. Für eine allgemeine Kontaktaufnahme genügen häufig Name, ein Rückkanal und eine Nachricht; zusätzliche Pflichtfelder benötigen einen nachvollziehbaren Zweck.

Muss jede Kontaktseite seit 2025 das BFSG erfüllen?

Nein. Das BFSG gilt für bestimmte Produkte und Dienstleistungen, darunter erfasste Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher. Prüfen Sie Angebot, Zielgruppe und mögliche Ausnahmen im Einzelfall fachkundig.

Wie groß sollten Buttons und andere Klickziele sein?

WCAG 2.2 nennt für Erfolgskriterium 2.5.8 grundsätzlich mindestens 24 × 24 CSS-Pixel. Kleinere Ziele können unter den im Kriterium beschriebenen Ausnahmen zulässig sein, etwa bei ausreichendem Abstand.

Ist ein CAPTCHA für jedes Kontaktformular erforderlich?

Nein. Beginnen Sie häufig mit Honeypot, Zeitprüfung und serverseitigem Rate-Limiting. Bei höherem Spamaufkommen kann ein externer Dienst hinzukommen, sofern Barrierefreiheit, Datenschutz, Backend-Validierung und ein Fehler-Fallback berücksichtigt werden.

Welche Antwortzeit sollte auf der Kontaktseite stehen?

Nennen Sie nur einen Zeitraum, den Ihr Team im Normalbetrieb einhalten kann, beispielsweise „innerhalb von zwei Werktagen“. Messen Sie die tatsächliche Antwortzeit und passen Sie die Angabe an, statt eine unbelegte Sofortreaktion zu versprechen.

Wie lässt sich die Kontaktseite verbessern, wenn viele Nutzer abbrechen?

Analysieren Sie zuerst Fehlerquote, problematische Felder, mobile Darstellung und Ladefehler. Entfernen Sie nicht notwendige Pflichtangaben und testen Sie jeweils eine klar definierte Änderung, damit die Ursache messbar bleibt.

Benötigen Sie Unterstützung bei Konzeption, UX oder technischer Umsetzung, können Sie über Sortlist passende Webdesign-Experten für Ihre Kontaktseite finden.


Bei diesem Artikel handelt es sich um eine Gastbeitrag von Lukas Rudrof

Die Kontaktseite ist oft ein vernachlässigter Teil einer Website was zu verpassten Chancen und Konversionen führt. Mit diesen hilfreichen Tips erstellst du eine erfolgreiche Kontaktseite.

User suchen auf Kontaktseiten meistens zusätzliche Informationen über dich & dein Unternehmen, deinen Standort, oder sie sind einfach auf der Suche nach Möglichkeiten um mit dir in Kontakt zu treten. Wenn Besucher  deiner Website diese Informationen nicht finden können, verpasst du höchstwahrscheinlich eine Chance auf potentielle Kunden.

1. Machen Sie die Seite einfach zu finden

Einer der wichtigsten Aspekte einer Kontaktseite ist, dass sie einfach gefunden wird. Eine praktische Position für die Seite ist die obere rechte Ecke in der Navigation. Diese Platzierung hat sich einfach über die Jahre hinweg als Webdesign-Standard etabliert und hat den Vorteil, dass sie direkt sichtbar ist.

Sie können eine Menge Zeit sparen, wenn Sie eine professionelle Webdesign-Agentur beauftragen.

Quelle: slack.com

Es ist auch möglich, die Kontaktseite in einem Dropdown-Menü zu platzieren. Allerdings kann sie dort leichter übersehen werden. Ein weiterer guter Ort für die Kontaktinformationen ist in der Footernavigation. Wenn der Besucher durch scrollen am Ende deiner Seite ankommt, sieht er als letztes Element den Footer. Auf diese Weise erhöht sich die Chance, dass der User, egal wo er sich auf der Website befindet, bei Bedarf mit Ihnen in Kontakt treten kann.

2. Gestalten Sie die Kontaktseite so einfach wie möglich

Besucher einer Kontaktseite wollen eigentlich nur eine Sache – die beste Möglichkeit finden, um mit Ihnen in Kontakt zu treten. Gestalten Sie Ihre Kontaktseite also nicht zu kompliziert und überfrachten Sie sie nicht mit unnötigen Informationen. Vermeiden Sie auch, dass der User allzu viel scrollen muss, um die gewünschten Informationen zu erhalten. 

Quelle: apple.com

Falls Sie ein Kontaktformular verwenden, sollte dieses ebenfalls so einfach wie möglich gestaltet sein. Für Formulare ist meistens ein einspaltiges Layout am besten geeignet. Die Label der Kontaktfelder sollten klar benannt sein, sodass der Besucher in jedem Feld die richtigen Informationen eingibt. Bei längeren Formularen sollten die Eingabefelder für ein möglichst übersichtliches Design in logische Abschnitte unterteilt werden.

3. Wähle die beste Kontaktmöglichkeit

Überlegen Sie sich im Vorfeld, wie Ihre Websitebesucher am besten mit Ihnen in Kontakt treten können. Es macht keinen Sinn alle Kontaktmöglichkeiten von Telefon, über E-Mail bis zu den Social-Media-Plattformen aufzulisten, wenn Sie zum Beispiel nur auf E-Mails reagieren. 

beispiel kontaktseite mindgym
Quelle: themindgym.com

Wenn ein Besucher mit Ihnen Kontakt aufnehmen will, sollte dies der schnellste, direkteste und effizienteste Weg der Kommunikation sein. Das Design Ihrer Kontaktseite muss den Usern eine möglichst klare Handlungsanweisung geben, wie sie Sie am besten kontaktieren sollen. Je nach Dienstleistung und Zielgruppe könnten Sie folgende Kontaktmöglichkeiten anbieten:

Traditionelle Kontaktmöglichkeiten

Für Unternehmen wie eine Bäckerei oder Arztpraxis, die für einen Besuch vor Ort ausgelegt sind, sollte in jedem Fall eine physische Adresse bei den Kontaktinformationen hinterlegt sein. Um Besuchern die Navigation zu erleichtern, hilft es auch oft zusätzlich, eine Karte oder einen Link zu Google Maps hinzuzufügen. Mit einer Telefonnummer als Kontaktmöglichkeit können dich Kunden bequem per Anruf oder SMS erreichen.

Digitale Kontaktmöglichkeiten

Die meisten Webseiten nutzen ein Kontaktformular, um direkt bestimmte Angaben der Besucher abzurufen und die Anfrage an die richtige Kontaktperson weiterzuleiten. Durch einen reCAPTCHA- oder Spam-Filter können bereits lästige Spam-E-Mail rausgefiltert werden. 

Moderne oder größere Unternehmen verwenden gerne automatisierte Chatbots, um ihren Besuchern eine schnelle Möglichkeit zur Kontaktaufnahme zu ermöglichen. Die Chatbots können mit einem KI-Roboter oder einem realen Mitarbeiter verknüpft werden. Das macht gerade bei Unternehmen Sinn, bei denen Kundensupport eine große Rolle spielt.

Social-Media-Plattformen

Unternehmen setzen neben den üblichen Kontaktmöglichkeit auch auf Social-Media-Plattformen. Da viele User tagsüber eh schon viele Stunden auf Plattformen wie Instagram, Facebook, LinkedIn oder WhatsApp verbringen, ist es ein einfacher Weg der Kommunikation.

Kontaktmöglichkeiten im Überblick:

  • physische Adresse mit Karte oder Link zum Standort
  • E-Mail mit direkter Verlinkung
  • Kontaktformular 
  • Telefon & SMS
  • Chat mit Bot oder Supportmitarbeiter
  • Social-Media-Plattformen (Facebook, Instagram, LinkedIn, WhatsApp)

4. Verwenden Sie ein konsistentes Brand Design

Das Aussehen Ihrer Kontaktseite sollte natürlich konsistent zum Design Ihrer restlichen Webseite passen. Achten Sie darauf dieselben Schriftarten, Farben und visuellen Elemente zu verwenden, um ein einheitliches Markenbild zu erzeugen.

Quelle: ikea.com

Websitebesucher erkennen ein „schlechtes“ Design sehr schnell. Wenn Ihre Kontaktseite vollkommen anders wie das Design Ihrer restlichen Website aussieht, wirkt das nicht vertrauenswürdig und User schrecken womöglich davon zurück, mit Ihnen in Kontakt zu treten. Stellen Sie also sicher, dass Besucher auf deiner Kontaktseite das Gefühl bekommen am richtigen Ort zu sein.

5. Gestalten Sie die Kontaktseite einladend und persönlich  

Schränken Sie sich beim Design deiner Kontaktseite nicht ein. Durch den Einsatz von persönlichen Fotos, Illustrationen oder interaktiven Elementen wirkt Ihre Kontaktseite viel einladender und Sie können ihr so das gewisse Etwas verleihen. Durch eine freundliche Gestaltung der Kontaktseite fühlen sich Besucher eher ermutigt, mit dir Kontakt aufzunehmen. 

Quelle: vanmoof.com

Neben ansprechenden Bildern können Sie auch eine warme, offene Sprache verwenden, um Ihre Websitebesucher einzuladen, sich mit Anfragen bei Ihnen zu melden. Bei größeren Unternehmen hilft den Besuchern eine Unterteilung, sich bei der richtigen Kontaktperson oder Abteilung zu melden. 

Vermeiden Sie auch verkaufsorientierte Informationen oder nervige Pop-ups auf Ihrer Kontaktseite. Die Seite sollte so gestaltet sein, dass sich der Besucher nicht unter Druck gesetzt fühlt und die gewünschten Informationen schnell findet.

6. Achten Sie auf responsives und barrierefreies Design

Das Design Ihrer Kontaktseite sollte auf die unterschiedlichen Bedürfnisse von Besuchern eingehen, um allen den gleichen Zugang und die gleichen Möglichkeiten zu ermöglichen. Neben einer einheitlichen Gestaltung sollte Ihre Kontaktseite bzw. gesamte Website responsiv optimiert sein.

Das beste Kontaktformular bringt Ihnen nichts, wenn es auf einem Smartphone nicht richtig dargestellt wird oder verlinkte Buttons nicht funktionieren. Durch ein responsives Design stellen Sie sicher, dass Ihre Kontaktinformationen auf jedem Gerät (egal ob Desktop, Tablet oder Smartphone) richtig angezeigt werden und so für User gut bedienbar ist.

responsive kontaktseite dribble
Quelle: dribble.com

Achten Sie bei der Gestaltung der Kontaktfelder darauf, dass jedes Textelement durch genug Kontrast gut lesbar ist. So erhöhen Sie auch für farbenblinde Personen die Benutzerfreundlichkeit und sprechen eine breitere Zielgruppe an. Wenn Sie bei Ihren Formularfeldern spezifische Attribute vergeben, können auch Screenreader das Formular erfassen und Blinden die Zugänglichkeit ermöglichen. Es ist ebenso hilfreich, Ihre Besucher auf mögliche Fehler bei der Eingabe von Daten hinzuweisen, um ihnen bei der Korrektur zu helfen. 

7. Transparenz & Antwortzeiten

Durch die Kontaktaufnahme bei Formularen gibt der Websitebesucher oft sensible Daten wie Name, E-Mail-Adresse, Anschrift oder sogar Kreditkarteninformationen preis. Die User haben also das Recht zu erfahren, wo und wie ihre Nutzerdaten gespeichert werden. 

Daher sollte es immer das Ziel sein auch nur die Informationen zu sammeln, die tatsächlich benötigt werden. In den meisten Fällen reicht ein Name und eine E-Mail-Adresse. Verknüpfen Sie also immer dort, wo Sie Daten sammeln, auch Ihre Datenschutzerklärung. Eine klare Zusicherung die Informationen nicht an Dritte weiterzuverkaufen, erhöht das Vertrauensverhältnis.

kontaktformular freepik
Quelle: freepik.com

Transparent zu sein heißt auch, dass User nach Abschicken eines Formulars eine Bestätigung erhalten. Ebenso können Sie Ihre Reaktionszeit kommunizieren. So können sich die Besucher darauf einstellen, wann sie mit einer Antwort von Ihnen rechnen können. 

Fazit

Kontaktseiten gehören zu den meisterbesuchten Seiten einer Website. Kontaktseiten bieten Usern die Möglichkeit, mit Ihnen, Ihrem Produkt oder Ihrem Unternehmen direkt in Kontakt zu treten. Stellen Sie also sicher, dass Ihre Websitebesucher die wichtigsten Informationen schnell auf einen Blick finden. Hoffentlich helfen Ihnen diese 7 Tipps dabei, eine bessere Verbindung zu Ihren Besuchern aufzubauen und in Kontakt zu bleiben.

Zuletzt aktualisiert:
War dieser Artikel hilfreich?
4.3 (47 Bewertungen)

Bewerten Sie diesen Artikel:

Nicolas Finet

Über den Autor

Nicolas Finet

Mitgründer & CEO von Sortlist. Unternehmer mit Leidenschaft für B2B-Marketing und dafür, Unternehmen bei ihrem Wachstum zu begleiten. Seit 2014 bringt er Unternehmen in ganz Europa mit den besten Marketingagenturen zusammen. Experte für digitale Strategie, Geschäftsentwicklung und die Skalierung von B2B-Marktplätzen. Regelmäßiger Speaker zu Growth Marketing und Unternehmertum.

Weitere Artikel