Kontaktseite: 16 kreative Kontaktseiten-Beispiele
Kontaktseiten werden leider oft unterschätzt, wenn Designer:innen eine Website erstellen. Daher wird bedauerlicherweise auch oft dem Website-Design von Kontaktseiten weniger Aufmerksamkeit geschenkt.
Das muss aber nicht so sein, denn die Kontaktseite spielt eine wichtige Rolle bei der Leadgewinnung sowie für die Beziehung zwischen dir und deinen Kund:innen.
Damit du eine Kontaktseite erstellen kannst, die auch tatsächlich zur Kontaktaufnahme und Interaktion einlädt, haben wir dir in diesem Artikel 16 Kontaktseiten-Beispiele zusammengestellt, von denen du dich für deine Website inspirieren lassen kannst.
Entdecke unsere Schritt-für-Schritt-Anleitung für deine individuelle Website mit Wix.
Was ist eine Kontaktseite?
Die Kontaktseite ist eine der wichtigsten Unterseiten auf deiner Website, auf der deine Besucher:innen mit dir und deiner Firma in Kontakt treten können. Das macht sie zu einem besonders wichtigen Teil in deinem Website Layout.
Deine Kontaktseite ist auch der Ort, an dem du Informationen wie deine E-Mail-Adresse, Telefonnummer, Postanschrift, deinen Standort sowie gegebenenfalls die Ansprechpartner:innen angibst.
Idealerweise wirst du zusätzlich ein Kontaktformular erstellen und deinen Besucher:innen somit die Möglichkeit geben, dich direkt über deine Website zu kontaktieren, indem sie ihre Fragen und Kontaktdaten hinterlassen.
16 kreative Kontaktseiten für deine Inspiration
1. Studio Bloom
Die Kontaktseite vom Schmucklabel Studio Bloom wurde im perfekten Einklang mit dem gesamten Website-Design erstellt. Sowohl die hellen, sonnigen Farben als auch die minimalistische Gestaltung passen zur Gesamterscheinung der Website.
Ebenso minimalistische ist das Kontaktformular auf dem wir nur die wichtigsten Informationen wie Name, E-Mail, Thema und die Nachricht eingeben können. Der Call-to-Action-Button ist farblich hervorgehoben und zwinkert uns aus der unteren Ecke dezent zu.
Anders als auf den übrigen Seiten wird hier aber ein kleiner Freiraum zwischen der Kopfzeile und dem Formular geboten, der dem Formular Platz und den Besucher:innen Zeit zum Atmen gibt. Der geräumige Website Footer wurde dagegen in Gänze übernommen.
Besitzerin Luzi weiß auch, dass Social Media die beste Art ist, mit Kund:innen zu interagieren und hat ihren Instagram-Kanal somit direkt zu ihrer Kontaktseite eingefügt sowie das Online-Formular zu ihrem Newsletter.
2. Million Frames
Die Kontaktseite von Million Frames ist über einen separaten Kontakt-Button („Talk to me”) in der Kopfzeile der Website erreichbar. In seiner Funktion und dem Erscheinungsbild ähnelt er einem Call-to-Action-Button. Dadurch wird die Kontaktseite stark hervorgehoben, was die Wahrscheinlichkeit erhöhen kann, dass der Button geklickt und die Kontaktseite besucht wird.
Die Kontaktseite selbst ist sehr einladend in einem poppigen Design gestaltet. Zudem wirken die Emojis und CTAs motivierend und machen uns direkt Lust in Kontakt zu treten. Außer der Bereitstellung einer E-Mail-Adresse nutzt die Website ein minimalistisches Formular, das es den Kund:innen ermöglicht, direkt von der Website aus Kontakt aufzunehmen. Besonders charmant finden wir die Animationen im Senden-Button.
3. Kontaktseite: Vorlage von WIX
Wenn du eine Website mit Wix erstellen willst, stehen dir eine Vielzahl von kostenlosen Website-Templates zur Verfügung. Diese Templates beinhalten bereits alle Elemente, die du zum Erstellen einer Website brauchst, unter anderem natürlich eine Kontaktseite.
Dieses Template für einen Shop für Accessoires eignet sich natürlich nicht nur, wenn du einen Online-Shop erstellen willst, sondern kann für alle Website-Arten verwendet werden.
Die Kontaktseite beinhaltet neben der Adresse, der Telefonnummer und der Email-Adresse deines Unternehmens auch eine interaktive Karte. So kannst du deinen Standort direkt einblenden, damit deine Kund:innen besser visualisieren können, wo sie dich finden können.
4. Juliana Laface
Das Website Layout sowie das gesamte Design ihrer Website und Kontaktseite lässt keinen Zweifel daran, dass Juliana Laface ein absolute Design-Expertin ist. Die Kontaktseite beginnt mit einem schönen Bild im Bereich Above-the-Fold (über der Falz), das sich per Scrolling-Effekt hinter das Formular schiebt.
Beim Scrollen nach unten wird den Besucher:innen ein einzigartiges Formular präsentiert, das genau nach der richtigen Menge an Angaben fragt. Mit der Bitte um Informationen, wie z. B. Budget und Fälligkeitsdatum des Projektes, ist klar, dass Juliana beabsichtigt, sich sofort an die Arbeit zu machen.
Für Leute, die nicht bereit sind, alle Felder auszufüllen, bietet sie eine Alternative – ein kostenloses 15-minütiges Beratungsgespräch am Telefon, um Projekte zu besprechen. Auf diese Weise kann sie potenzielle Kund:innen anlocken und persönlich von sich überzeugen.
5. Charles Shirts
Das Kontaktseite-Beispiel von Charles Shirts ist ebenso minimalistisch wie ihre schönen und schlichten T-Shirts. Die Kontaktseite besteht aus einem schlichten weißen Hintergrund, von dem sich dünne Linien abheben. Das Formular selbst wurde nicht von dem schlichten, weißen Hintergrund abgehoben. Lediglich die einzelnen Felder des Formulars sind durch dünne, schwarze Linien zu erkennen.
Das Formular selbst fragt nur nach den wichtigsten Informationen, was die Bereitschaft eine Nachricht zu hinterlassen erhöht. Das knapp gehaltene Formular passt in seiner Kürze auch sehr gut zu dem auch ansonsten sehr minimalistischen Design dieser Website.
6. Rachel Lev
Die Kontaktseite der Künstlerin Rachel Lev enthält mehrere wichtige Elemente. Zunächst gibt es ein Foto von Rachel selbst, was die Kommunikation sofort ein bisschen persönlicher macht.
Neben den Feldern E-Mail, Name, Betreff und Nachricht hat sie auch Google Maps in ihre Website integriert. Auf diese Weise kann sie den Standort ihres Studios hervorheben und Besucher:innen dazu einladen, direkt vorbeizuschauen.
Insgesamt ist die Kontaktseite einfach und auf den Punkt gebracht, mit allen wichtigen Informationen im Bereich Above-the-Fold. Die Kopfzeile der Website zeigt das Logo und eine ihrer Illustrationen und verleiht ihrer Kontaktseite die fröhliche Note, die sowohl auf ihrer gesamten Website als auch auf den anderen Seiten der Website zu finden ist.
7. Madeleine’s Icecream
Auf der Kontaktseite von Madeleine’s Icecream wird schnell klar, dass dieses Unternehmen, vornehmlich auf den Besuch der physischen Standorte ausgerichtet ist. Die Eisdiele hat zwar auch einen eigenen Online-Shop, stellt jedoch die Standorte in Bielefeld in den Fokus.
Dementsprechend gehört zu den ersten Elementen, die auf diesem Kontaktseiten-Beispiel zu sehen sind, nicht etwa das Kontaktformular, sondern die Adressen beider Standorte und ein Foto einer der Eisdielen.
Der einladende Schriftzug „Wir sind für euch da“, der die Besucher:innen der Website oben auf der Seite begrüßt, kann sich also sowohl auf die Standorte beziehen, als auch auf das weiter unten anzutreffende Kontaktformular.
Im Formular selbst wird nach dem Namen und der E-Mail-Adresse, sowie nach der Nachricht der Kontaktsuchenden gefragt. Außerdem werden auf der Seite zwei E-Mail-Adressen des Unternehmens angegeben.
Das Eis ist übrigens auch sehr lecker, also folge ruhig dem klaren CTA und „Kommt doch einfach mal vorbei!“
8. Kontaktseite Beispiel: Wix Vorlage
Wenn du einen Onepager erstellen willst, hast du dir vielleicht schon die Frage gestellt: Wohin mit der Kontaktseite? Onepager sind einseitige Websites ohne Unterseiten wie zum Beispiel dieses Beispiel einer Yoga-Studio-Homepage.
Um dennoch einen Kontaktbereich zu haben, empfehlen wir dir, ein kurzes und minimalistisches Formular, dass du ohne viel Platz und Aufwand direkt integrieren kannst.
Auch hier kannst du die Adresse deines Geschäfts auf einer interaktiven Karte anzeigen lassen, wir empfehlen dir aber wirklich nur die wichtigsten Daten anzugeben und zu erfragen.
9. Transplant Interface
Transplant Interface verwenden ihre Markenfarben durchgängig auf ihrer Website, von einem mintgrünen und violetten Logo bis zur dazu passenden Navigationsleiste.
Ihre Kontaktseite ist keine Ausnahme – sie wurde mit einem grünen und violetten Farbverlauf versehen, um sicherzustellen, dass jeder Teil ihrer Website ganz auf der Linie der Marke bleibt.
Dieses Kontaktseiten-Beispiel enthält alles Wesentliche: ein Kontaktformular, das Besucher:innen dazu auffordert, eine Nachricht zu senden und ihre Daten zu hinterlassen, ihre E-Mail-Adresse und ihre Postanschrift.
Am unteren Rand der Seite befindet sich eine gut sichtbare, informationsreiche Fußzeile, die es Besucher:innen leicht macht, auf der Website zu navigieren und andere Seiten zu erkunden.
Entdecke diese 10 Tipps für gute Website-Navigation.
10. Evolve Clothing Gallery
Die Kontaktseite von Evolve Clothing Gallery ist nicht nur praktisch, sondern auch sehr visuell. Im Vordergrund ist ein ansprechendes Bild ihres Ladens zu sehen, das definitiv Interesse und Begeisterung für ihre Produkte weckt.
Da Evolve Clothing sowohl ein Ladengeschäft als auch einen Online-Shop hat, achten sie darauf, dass sie die Öffnungszeiten und eine Karte ihres Standortes sowie eine E-Mail-Adresse und Telefonnummer angeben.
Zusätzlich zur Kontaktseite gibt es auch einen Website-Chat als alternatives Tool zur direkten Kommunikation, das besonders bei dringenden Fragen gern verwendet wird.
11. Hoff Glas
Die Kontaktseite von Hoff Glas ist klar strukturiert und übersichtlich. Die kursiven Titel der einzelnen Felder wirken einladend und beruhigend. Das Formular fragt nach dem Namen, der E-Mail-Adresse, der Telefonnummer und nach der Nachricht der Besucher:innen.
Allerdings wird hier auch die Telefonnummer und die E-Mail-Adresse der Betreiberin des Unternehmens angegeben, mit der Aufforderung, bei Fragen oder Wünschen anzurufen. Das schafft Vertrauen und ermutigt auch zögerliche Besucher:innen, ihre Daten preiszugeben oder eben über die zusätzlichen Kommunikationswege den Kontakt zu suchen.
Es gibt sogar noch eine dritte Möglichkeit in Kontakt zu treten, und zwar über den Button „KANN ICH HELFEN?“, der auch auf allen anderen Seiten der Website in der unteren, rechten Ecke zu finden ist. Dort öffnet sich bei Klick für die Besucher:innen ein Chat-Fenster. Kontaktfreudiger geht es doch nicht, oder?
12. Kontaktseite im Wix Website-Template
Auch unser Template für einen Shop für Sportbekleidung bietet eine schöne Kontaktseite, die sich hervorragend für Ladengeschäfte eignet, denn es stellt die Felder für deine Adresse in den Vordergrund, während das Formular selbst sich nur dezent bemerkbar macht.
Selbstverständlich kannst du die Kontaktseite jeder Vorlage vollständig anpassen und für deine Firma individualisieren.
13. Mane Ethical Hairdressing
Die Website von Mane Ethical Hairdressing bietet eine benutzerfreundliche, leicht zu navigierende Kontaktseite mit einem schönen Layout.
Das wichtigste Element für ein Dienstleistungsunternehmen wurde oben auf der Seite platziert: die Schaltfläche „Online-Termin vereinbaren“, über die Kund:innen direkt eine online Terminbuchung tätigen können.
Unter der Schaltfläche sind die Telefonnummer, E-Mail-Adresse, Standortadresse sowie die Öffnungszeiten des Unternehmens und ein Feld, über das Leute eine Nachricht senden können. Rechts von diesen Informationen befindet sich ein großes Foto, auf dem eine Tasse Kaffee mit einem Keks wartet und Kund:innen zu einem Heißgetränk am Nachmittag einlädt.
14. Wonderbar Soap
Wonderbar Soap hat sich im Gegensatz zu vielen anderen unserer Beispiele dazu entschieden, das Formular direkt auf der Homepage zu integrieren. So können die Besucher:innen auch zufällig beim Scrollen auf das Formular stoßen.
Wenn sie aber direkt den Kontakt suchen, können sie sich auch über die entsprechende Schaltfläche in der Kopfzeile zu der entsprechenden Stelle auf der Homepage führen lassen.
Entdecke diese Design-Tipp für deinen Website Header.
Dabei ist das Formular der einzige Teil der Website, der beweglich über einem Hintergrund schwebt. Dadurch hebt es sich von den anderen Inhalten ab, wobei der Hintergrund das Naturmotiv anderer Elemente auf der Homepage übernimmt. Das Formular fragt nach Name, E-Mail-Adresse und Telefonnummer der Besucher:innen sowie nach der Nachricht, die sie hinterlassen möchten.
15. Makeoverguy
Die Makeoverguy Appearance Studios geben ihrer Kontaktseite und dem Rest ihrer Vintage-Website ein Gefühl von Retro-Glamour. Oben auf der Seite befindet sich ein Bild eines altmodischen Telefons, während die Fußzeile Reihen von Sitzplätzen in einem Theater zeigt. Das ist ein Look, der Selbstvertrauen und Klasse ausstrahlt und Begeisterung für die Marke weckt.
Da es sich um ein Dienstleistungsunternehmen handelt, das persönlich mit einzelnen Kund:innen zusammenarbeitet, bietet die Kontaktseite eine Wegbeschreibung für die Anfahrt zum Salon.
Sie lassen ihren Standort mit einer interaktiven Integration Google Maps anzeigen. Darunter gibt Makeoverguy potenziellen Kund:innen die Möglichkeit, ihre Daten zu hinterlassen und sich zu registrieren – um sie frühzeitig zu binden, wenn sie vielleicht jetzt noch kein Makeover brauchen, aber sich in der Zukunft dafür interessieren könnten.
16. Website-Vorlage von Wix mit einer schönen Kontaktseite
Wenn es ein bisschen dynamischer sein darf, empfehlen wir unsere Vorlage für diese Restaurant-Homepage, bei der das transparente Formular über einem eleganten Hintergrund schweben kann.
Auch bei dieser Kontaktseite kannst du deine Adresse auf einer interaktiven Karte einblenden. Darunter ist noch Platz für deine Anschrift, deine Öffnungszeiten und deine E-Mail-Adresse.
Kontaktseite erstellen: 5 Tipps für deine Website
Einer der Schlüssel zum Erfolg einer guten Website ist guter Service und der beginnt auf der Kontaktseite deiner Website. Hier sind ein paar Tipps, die du bei der Gestaltung deiner Kontaktseite beachten kannst.
Benutzerfreundlich
Versetze dich in deine Besucher:innen und gestalte deine Kontaktseite so nutzerfreundlich wie möglich. Vermeide zu viele Eingabefelder, unnötige Kontaktinformationen und veraltetes Design. Auch wenn du es gut meinst, wirken all diese Dinge abschreckend und können zum vorzeitigen Abbrechen der Aktion führen.
Wer nach deiner Kontaktseite sucht, sollte sie auch schnell finden können. Platziere sie gut sichtbar und über einen Button erreichbar in die Kopfzeile deiner Website, oder verlinke sie im Footer. Bei einem Onepager werden Besucher:innen die Kontaktinformationen wahrscheinlich weiter unten, oder ebenfalls in der Fußzeile erwarten.
Informativ
Zu wenige Informationen auf deiner Kontaktseite sind ebenso schlecht, wie zu viele. Überlege dir, was deine Besucher:innen über dein Unternehmen an dieser Stelle erfahren müssen.
Für deinen Online-Shop brauchst du keine Öffnungszeiten, für dein Ladengeschäft allerdings schon. Deine Anschrift kann hingegen in beiden Fällen interessant sein, um deine Kund:innen wissen zu lassen, wo den Firmensitz ist.
Unter Umständen macht es auch Sinn, zu erwähnen, wie lang es dauert, bis Kund:innen mit einer Antwort auf ihre Kontaktanfrage rechnen können.
Persönlich
Oft ist die Hemmschwelle groß, persönliche Daten im Internet anzugeben. Indem du deinem Unternehmen ein Gesicht verleihst und Besucher:innen persönlich ansprichst, verringerst du diese Hemmschwelle. Du kannst ihnen auch anbieten, einen Rückruf zu vereinbaren. Du kannst auch eine Über-uns-Seite erstellen, um das zu erreichen.
Optisch ansprechend
Die Optik deiner Kontaktseite ist ebenso wichtig wie die inhaltliche Gestaltung. Passe das Design an den Rest deines Internetauftritts an, um ein einheitliches Surf-Erlebnis zu bieten und den Wiedererkennungswert deiner Marke zu steigern.
Vergiss nicht, dein Logo zu integrieren und Call to Actions hinzuzufügen, die sich farblich vom Rest der Seite abheben.
Rechtssicher
Im Zuge der Datenschutzgrundverordnung (DSGVO) gelten Richtlinien für den Umgang mit personenbezogenen Daten, die du beim Erstellen einer Kontaktseite beachten musst.
Die Kontaktnachrichten müssen verschlüsselt übertragen werden und mit einem SSL-Zertifikat geschützt sein. Das kannst du überprüfen, indem deine URL mit https:// und nicht http:// beginnt.
Du solltest außerdem nur notwendige Daten erheben, also solche Daten, die für die Kontaktaufnahme notwendig sind. Zudem müssen Besucher:innen dieser Datenerfassung ausdrücklich zustimmen, zum Beispiel durch ein Opt-In-Kästchen und indem du Double-Opt-In für dein Formular aktivierst.
In deiner Datenschutzerklärung solltest du zudem über die Dauer der Datenspeicherung, den Zweck der Erhebung und die Rechte deiner Nutzer:innen aufklären.
Indem du deinen Kund:innen eine Kopie ihrer Kontaktanfrage zusendest, können sie ihre Angaben jederzeit abrufen.
Fazit: Erstelle eine individuelle Kontaktseite
Du solltest niemals die Wirkung unterschätzen, die eine gut gestaltete Kontaktseite auf deine Besucher:innen hat. Oft ist sie das Tüpfelchen auf dem i wenn es darum geht, potenzielle Kund:innen von dir, deiner Website und deinem Angebot zu überzeugen und dazu zu bewegen, mit die in Kontakt zu treten.
Damit dir das gelingt, empfehlen wir dir, auf generische Texte und langweiliges Design zu verzichten und statdessen eine kreative und persöliche Kontaktseite zu erstellen. Achte dabei besonders darauf, dass deine Kontakseite benutzerfreundlich und informativ ist. Denn nur, wenn Nutzer:innen finden wonach sie suchen, werden sie auf den Senden-Button klicken.
Du möchtest sofort anfangen und eine starke Kontaktseite designen? Erstelle deine eigene Website und leg los.
Häufig gestellte Fragen zur Kontaktseite
Was muss alles auf die Kontaktseite?
Eine gute Kontaktseite beinhaltet neben der Adresse, der Telefonnummer und der Email-Adresse deines Unternehmens auch ein Kontaktformular und eine interaktive Karte. So kannst du deinen Standort direkt einblenden, damit deine Kund:innen direkt sehen, wo sich dein Unternehmen befindet.
Wie sieht eine Kontaktseite aus?
Die Kontaktseite ist eine Unterseite auf deiner Website. Hier können Besucher:innen mit dir und deinem Unternehmen in Kontakt treten, um Fragen zu stellen und Nachrichten zu hinterlassen. Meist geschieht dies durch ein eingebautes Kontaktformular. Außerdem solltest du hier deine E-Mail-Adresse, Telefonnummer und deinen Unternehmensstandort hinterlegt.
Was schreibt man in ein Kontaktformular?
Wenn du deine Website mit einem Homepage-Baukasten wie Wix erstellst, stehen dir viele schöne Kontaktformulare zur Verfügung, die du mit nur wenigen Klicks in deine Website einbinden kannst. Je nach Art des Formulars beinhalten sie Felder, auf denen Kund:innen unterschiedliche Informationen hinterlassen können. Standatzmäßig sind das mindestens Name, E-Mail-Adresse und eine Nachricht. Es gibt jedoch auch Kontaktformulare, auf denen die Telefonnummer und Adressen sowie Antworten zu Feedbackfragen hinterlassen werden können.
Alexandra Eger
Content-Managerin
Comentarios