Kontaktseite: 5 inspirierende Beispiele für die eigene Website

Barrierefreie Website gestalten
Alex Haase
Alex Haase

Aktualisiert:

Veröffentlicht:

Sie erfüllt einen simplen Zweck, muss deshalb aber noch lange nicht langweilig sein: die Kontaktseite einer Website. Falls Sie bisher nur mit einfachen Kontaktformularen gearbeitet haben und dringend nach Inspirationen oder Tipps suchen, wird Ihnen dieser Artikel weiterhelfen.

Frau erstellt Kontaktseite für Website am Laptop

Wir liefern einige generelle Informationen, Ratschläge und Ideen, mit denen Sie Ihre Kontaktseite auf der eigenen Website kundenfreundlich gestalten und optimieren können.

E-Book-Download: Mit einer optimierten Website zu mehr Traffic und Leads

5 gelungene Kontaktseiten als Inspirationen für die eigene

Die folgenden fünf Beispiele zeigen Ihnen, dass eine Kontaktseite mehr als nur ein schlichter Adressblock und ein Standardformular sein kann.

Yummygum

Die Digitalagentur aus Amsterdam setzt auf eine schlichte, farblich dezente Internetpräsenz. Umso auffälliger und individueller erscheint wiederum die Kontaktseite: Neben der Anschrift und E-Mail-Adresse des Unternehmens mit entsprechendem Maps-Hintergrund sowie diversen Social-Media-Verknüpfungen wird den Usern und Userinnen ein inhaltlich sehr sympathisches Kontaktformular geboten.

Darin wählen Sie zunächst den Grund Ihrer Kontaktaufnahme aus („Let’s talk about“), etwa eine Projektanfrage („your great project“) oder andere, neutralere Anliegen („meeting for a coffee“, „birds and bees“). Erst danach öffnet sich das gewohnte Formular, indem Sie Ihre persönlichen Daten und Nachrichten eintippen können.

Was uns besonders inspiriert hat: Bei einer Projektanfrage lassen sich der Zeitrahmen, der Projekttyp und zum Beispiel auch das verfügbare Budget angeben. So haben Sie als Unternehmen bereits alle wichtigen Eckdaten parat und können gezieltere Antworten auf die Anfrage liefern.

Kontaktseite Beispiel Yummygum

Quelle: Screenshot Yummygum

Atlassian

Für ein international tätiges Unternehmen wie Atlassian wäre ein einfaches Kontaktformular nicht zielführend. Aus diesem Grund nutzt der Anbieter eine Kontaktseite, die wiederum verschiedene Unterseiten je nach Abteilung und Anliegen zur Verfügung stellt.

Ob technische Fragen, generelle Fragen oder Produktinformationswünsche – für jeden Zweck gibt es ein eigenes Formular, das die Anfragen an die entsprechende Stelle weiterleitet. Diese Vorsortierung mag vielleicht nicht immer einwandfrei funktionieren, beschleunigt den Frage-Antwort-Prozess aber erheblich.

Außerdem zeigt Atlassian sämtliche Kontaktadressen seiner Büros sortiert nach Kontinent an – mit Verlinkung des konkreten Standorts auf Google Maps.

Kontaktseite Beispiel Atlassian

Quelle: Screenshot Atlassian

Redbull

Die Getränkemarke verzichtet gänzlich auf konventionelle Designs und Formulare. Stattdessen ist die Kontaktseite als Chat-Fenster aufgebaut, in dem die User und Userinnen mit einem KI-Chatbot kommunizieren können.

Sie können ihre Fragen komplett frei formulieren, denn der Bot erkennt entsprechende Stichwörter und gestaltet so das weiterführende Gespräch. Eine solche Kontaktseite ist vor allem für größere Unternehmen und Konzerne interessant, die sehr viele Anfragen erhalten und den Support auf diese Art automatisieren möchten.

Kontaktseite Beispiel Redbull

Quelle: Screenshot RedBull

MeUndies

MeUndies verkauft nachhaltige Textilien und hat seinen Sitz in den USA. So bunt und sympathisch, wie das Unternehmen sich repräsentiert, ist auch seine Kontaktseite. Neben einem allgemeinen FAQ-Suchfeld bietet es den Usern und Userinnen verschiedene Kategorien zur Auswahl an, um die Fragen zu spezifizieren, und darüber hinaus verschiedene Formen der Kontaktaufnahme (Live Chat, Social Media, Mail oder Textnachricht).

Praktischerweise werden für jedes Medium durchschnittliche Antwortzeiten angegeben, damit man in dringenden Fällen zum richtigen Mittel der Wahl greift.

Kontaktseite Beispiel MeUndies

Quelle: Screenshot MeUndies

Beakable

Von Beakable haben Sie vermutlich noch nicht gehört, aber das ist an dieser Stelle auch gar nicht wichtig. Es handelt sich dabei um das Portfolio des Programmierers Iain Hamilton, und zugegeben ist das Design der Seite eine angenehme Abwechslung zu allen üblichen Websites. Wenn Sie eine wirklich ausgefallene Kontaktseite sehen möchten, dann werden Sie hier fündig.

Auf dem Briefumschlag können Sie Ihre Daten (Name und Mail) hinterlassen und für Ihre Nachricht klicken Sie einfach auf den Briefzettel. Abgesendet wird der Brief, wenn Sie den bunten Button darunter drücken.

Natürlich sind solche Kontaktseiten sehr speziell, aber seien wir ehrlich: Bei einem so witzigen Design wünscht man sich fast schon, dass man einen Kontaktgrund hätte. Und genau das macht eine gute Kontaktseite aus.

Kontaktseite Beispiel Beakable

Quelle: Screenshot Beakable

Welche Funktion erfüllt die Kontaktseite einer Website?

Die Kontaktseite einer Website ist die (Unter-)Seite, auf der die Besucher und Besucherinnen mit Ihnen in Kontakt treten können und bestenfalls weitere Informationen zu Ansprechpartnern oder Kontaktadressen erhalten. Damit kommt der Kontaktseite die mitunter wichtigste Aufgabe einer ganzen Website zu.

Leider werden oft wenig Mühe und Zeit in die Gestaltung einer guten Kontaktseite gesteckt, weil man davon ausgeht, dass sie einen rein zweckmäßigen Charakter besitzt. Dem ist aber ganz und gar nicht so. Standardfloskeln wirken nicht besonders kundennah und schlechte Kontaktseiten können sogar abschrecken. Wie lässt sich also eine überdurchschnittlich gute Kontaktseite erstellen und gestalten?

Kontaktseite erstellen: Tipps zum Inhalt

Elementar für jede Kontaktseite ist die Angabe einer Post- bzw. Kontaktadresse zum Unternehmen und häufig ein eingebundenes Formular, um die Nachricht direkt von der Seite aus zu versenden. Weitere Elemente können sein:

  • ein Link zu Google Maps für den Unternehmensstandort oder eine eingebettete Karte
  • eine kurze Vorstellung der eigenen Person oder des Supports
  • Social Media oder Messenger Verknüpfungen
  • Live-Chats oder KI-gesteuerte Chats
  • Angabe weiterer Kontaktmedien
  • Verknüpfung bzw. Hinweis zu bestehenden FAQs

Hierbei gibt es rein inhaltlich einige Dinge zu beachten. So sollten Sie bei Kontaktformularen immer eine Checkbox mit einem Verweis auf den Datenschutz beifügen, da solche Formulare grundsätzlich DSGVO-problematisch sind. Pflichtfelder bei Formularen sind wichtig, aber übertreiben Sie damit nicht. Meistens werden ein Name, eine E-Mail-Adresse und die entsprechende Nachricht gefordert. Alles andere wie Telefonnummer oder gar eine postalische Adresse sollte aber optional gehandhabt werden. Für die Erstellung solcher Formulare eignet sich ein Formular-Designer wie der von HubSpot optimal. Damit können Sie DSGVO-konforme Formulare schnell selbst erstellen.

Schaffen Sie Vertrauen, indem Sie beispielsweise Live-Chats mit (erreichbaren) Gesprächspartnern und -partnerinnen anbieten oder das Supportteam mit Fotos und Namen vorstellen. Auch eine persönliche Kontaktadresse wie tina@mybusiness.de weckt mehr Vertrauen als eine allgemeine Adresse wie info@mybusiness.de oder kontakt@mybusiness.de.

Runden Sie Ihren Gesamteindruck mit individuellen Texten ab und nicht mit dem üblichen Template-Spruch „Wir freuen uns auf Ihre Nachricht“. Trauen Sie sich aufzufallen, solange es sympathisch und nicht aufgesetzt wirkt. Schließlich wollen Sie sich mit Ihrem Internetauftritt von der Masse abheben – warum also bei der Kontaktseite damit aufhören?

Kontaktseite gestalten: Tipps zum Aufbau und Design

Das Formular steht, Google Maps funktioniert und die Buttons für Twitter und Facebook führen auf die richtigen Seiten. Doch was muss beim Design beachtet werden, damit eine Kontaktseite den nötigen Call-to-Action vermittelt?

Ganz einfach: Gestalten Sie die Seite so einfach, praktisch und übersichtlich wie möglich. Achten Sie auf mobilfreundliche Auflösungen, nutzen Sie lesbare Farben, die mit dem Rest Ihrer Website in Einklang stehen, und ordnen Sie die verschiedenen Elemente sinnvoll an (zum Beispiel den Verweis auf etwaige FAQs vor dem Kontaktformular).

Probieren Sie A/B-Tests aus, was die Form, Position oder Farbe des Formular-Buttons betrifft, denn selbst hier kann das Design darüber entscheiden, ob sich jemand für eine Anfrage entscheidet oder nicht. Google Maps Karten können nützlich sein, wirken aber oft hässlich im Gesamtbild, weshalb ein Link unter Umständen besser sein kann.

Außerdem sollten Sie daran denken, dass Mailto-Links, wie sie manchmal statt eines Formulars eingesetzt werden, mehr Aufwand für die interessierte Person darstellen und die Hürde einer Kontaktaufnahme dadurch steigt.

Fazit: Unterschätzen Sie niemals die Wirkung einer guten Kontaktseite

Die Kontaktseite ist der letzte und entscheidende Schritt, um Besucher und Besucherinnen Ihrer Website davon zu überzeugen, mit Ihnen Kontakt aufzunehmen. Standard-Designs und langweilige Sprüche helfen hierbei wenig, um eine Anfrage zu unterstützen.

Sorgen Sie deshalb für Abwechslung, entweder auf inhaltlicher Ebene und/oder mit einem kreativen Design, das geradezu danach verlangt, auf den Senden-Button zu drücken. Zeigen Sie sich nahbar und gestalten Sie Ihre Kontaktseite so kundenfreundlich wie möglich, um Vertrauen zu schaffen.

website optimierung

Titelbild: pcess609 / iStock / Getty Images Plus

Themen: Webdesign

Verwandte Artikel

Mit diesem E-Book können Sie herausfinden, ob Ihre Website inklusiv und barrierefrei ist.

KOSTENLOS HERUNTERLADEN