8 schöne Kontaktformular-Beispiele + wie Sie sie zu Ihrer Website hinzufügen

Fünf Tipps für Ihr Kontaktformular-Design

Bevor wir zu den echten Kontaktformular-Beispielen kommen, lassen Sie uns einen kurzen Umweg machen und darüber sprechen, was ein großartiges Kontaktformular ausmacht. Dieser Umweg wird die Bühne bereiten, während wir im nächsten Abschnitt erörtern, was jedes Kontaktformular-Beispiel gut macht.

Sie haben höchstwahrscheinlich ein Kontaktformular, weil Sie möchten, dass die Leute es ausfüllen. Wie können Sie also mehr Leute dazu bringen, es zu nutzen? Hier sind einige Best Practices…

1. Kommunizieren Sie klar, wofür Ihr Formular gedacht ist

Wenn Sie ein vielbeschäftigtes Unternehmen oder eine geschäftige Website haben, haben Sie möglicherweise mehrere Kontaktformulare für verschiedene Zwecke. Dies kann zum Beispiel sein:

• Formular für Verkaufsanfragen

• Kundensupport-Formular

• Online-Bestellformular

• Rückruf-Anfrageformular

• Usw.

Es gibt zwei grundlegende Ansätze, um dies zu handhaben, und Sie werden beide in den folgenden Beispielen für das Kontaktformular aus dem wirklichen Leben sehen:

1. Separate Formulare. Erstellen Sie separate Formulare für jeden Anwendungsfall und fügen Sie Text hinzu, der genau verdeutlicht, was jedes Formular tut.

2. Ein Dropdown-Feld. Fügen Sie oben in Ihrem Formular ein Dropdown-Feld hinzu, das die verschiedenen Anwendungsfälle auflistet und Ihr Kontaktformular automatisch an die richtige Stelle leitet.

Verwenden Sie in jedem Fall Ihre Formularbeschriftungen und den umgebenden Text, um Ihren Besuchern den Zweck jedes Kontaktformulars absolut klar zu machen.

2. Begrenzen Sie die Formularlänge für mehr Conversions (aber vergessen Sie nicht die Qualität)

Unter sonst gleichen Bedingungen scheinen die Daten darauf hinzudeuten, dass längere Kontaktformulare weniger Einreichungen bedeuten.

HubSpot hat beispielsweise über 40.000 Landingpages analysiert und einen klaren Zusammenhang zwischen Conversion-Raten und der Anzahl der Formularfelder festgestellt.

Die Spitzenumwandlungsrate liegt bei etwa drei Feldern. Die Conversion-Rate sinkt stetig bis zu acht Formularfeldern, bevor sie sich abflacht:

Quelle

Anekdotenhafter Weise testete Marketo drei Formen mit ähnlichen Ergebnissen wie HubSpot:

• 5 Felder — 13,4 % Conversion-Rate

• 7 Felder — 12,0% Conversion-Rate

• 9 Felder — 10,0 % Conversion-Rate

Natürlich ist es möglicherweise nicht Ihr eigentliches Ziel, einfach mehr Kontaktformulare zu senden. Daher ist es nicht ganz so einfach, die Anzahl der Felder in Ihren Formularen auf das Nötigste zu reduzieren.

Während Sie beispielsweise durch die Reduzierung von Feldern mehr Einreichungen erhalten, sind diese Einreichungen möglicherweise nicht so hochwertig, da die Eintrittsbarriere so niedrig ist.

Insgesamt ist es eine gute Faustregel, alle unnötigen Felder zu eliminieren, aber nicht Felder, die wichtige Informationen sammeln, nur um Ihr Formular zu kürzen, insbesondere wenn diese Informationen dazu dienen, Ihre Leads zu qualifizieren.

3. Verwenden Sie intelligente Mikroskopie, um Felder zu erklären

Wenn Ihr Kontaktformular mehr als nur die Standardfelder „Name, E-Mail, Nachricht“ enthält, laufen Sie Gefahr, Besucher zu verwirren.

Wenn Sie beispielsweise ein Feld "Budget" haben, ist möglicherweise unklar, wofür dieses Budget verwendet wird. Gilt das für das gesamte Projekt? Ist es nur für ein bestimmtes Teil?

Um solche Verwirrung zu vermeiden, können Sie Ihrem Kontaktformular „Mikrokopie“ hinzufügen.

Mikroskopie ist im Grunde ein kleiner Erklärtext, der Formularfeldern beigefügt ist, um sie klarer zu machen. Sehen Sie sich zum Beispiel das Feld Zahlungsvolumen unten an (dieses Beispiel wird Ihnen später auch angezeigt):

4. Experimentieren Sie mit verschiedenen Formaten

Wenn die meisten Leute an ein Kontaktformular denken, stellen sie sich das gleiche grundlegende eingebettete Formular vor, das Sie auf den meisten Websites sehen. Wenn Sie es jedoch leicht machen möchten, mit Ihnen in Kontakt zu treten, lohnt es sich manchmal, mit verschiedenen Anzeigemethoden wie einem Popup oder einer Benachrichtigungsleiste zu experimentieren.

Zum Beispiel kann eine schwebende Kontaktschaltfläche an der Seite Ihrer Website für ein Support-Kontaktformular großartig sein. Es macht es für Benutzer sehr einfach, Sie direkt zu kontaktieren, sobald sie auf ein Problem stoßen, ohne dass sie nach Ihrer Kontaktseite suchen müssen:

5. Sagen Sie den Leuten die nächsten Schritte und setzen Sie Erwartungen

Ihr Kontaktformular-Design ist noch nicht fertig, wenn die Leute auf Senden klicken!

Um eine bessere Benutzererfahrung zu bieten, möchten Sie den Leuten genau sagen, was als nächstes passieren wird und wie lange es dauern wird. Zum Beispiel…

• Beantworten Sie alle Anfragen oder nur einige?

• Wie lange werden Sie brauchen, um zu antworten?

• Werden Sie per E-Mail oder auf andere Weise antworten?

Wenn Sie klare Erwartungen setzen, werden sich Ihre Besucher nicht fragen, was los ist und ob Ihr Formular überhaupt funktioniert.

Acht tolle Kontaktformular-Beispiele von echten Websites

Nachdem Sie nun die Best Practices kennen, sehen wir uns einige reale Kontaktformular-Designs an, um Ihre eigenen zu inspirieren und Ihnen diese Best Practices in Aktion zu zeigen.

1. Streifen

Das Verkaufskontaktformular von Stripe ist ein großartiges Beispiel dafür, wie manchmal das Sammeln von ein paar zusätzlichen Informationen dazu führen kann, dass Ihre Kontaktformulare mehr qualifizierte Leads generieren (auch wenn dies die Baseline-Conversion-Rate ein wenig senken könnte).

Zusätzlich zu den Standard-Informationsfeldern fügt Stripe ein Feld für das Zahlungsvolumen hinzu, damit das Unternehmen die potenzielle Qualität jedes Leads besser einschätzen kann.

Darüber hinaus gibt es einige andere schöne Designoptionen, darunter:

• Sozialer Beweis – Diese Logos an der Seite bieten einen sozialen Beweis, indem sie alle erfolgreichen Unternehmen anzeigen, die Stripe verwenden.

• Mikroskopie – Der Begriff „Zahlungsvolumen“ mag etwas verwirrend sein, daher fügt Stripe einige hilfreiche Mikroskopie hinzu, die erklärt, wie das Feld ausgefüllt wird.

• Zweck — Stripe macht deutlich, dass dieses Formular nur für Verkaufsanfragen gedacht ist. Dadurch wird sichergestellt, dass keine Leute versuchen, es für Support- oder andere Nicht-Verkaufszwecke zu verwenden.

2. Getsitecontrol

Hier bei Getsitecontrol handhaben wir unser Kontaktformular-Design etwas anders.

Anstatt eine spezielle „Kontakt“-Seite zu erstellen, zu der Besucher navigieren müssen, fügen wir einfach einen Kontakt- Link hinzu, der direkt an Ort und Stelle ein Popup öffnet – kein Neuladen der Seite erforderlich.

Das ist wirklich praktisch für die Leute, weil sie…

• Greifen Sie von jeder Seite der Website aus auf unser Kontaktformular zu,

• eine Nachricht senden, ohne zu unterbrechen, was sie sonst tun (wie diesen Blogbeitrag zu lesen!).

  

Das Kontaktformular von Getsitecontrol ist einfach und leicht auszufüllen. Außerdem werden die nächsten Schritte nach dem Absenden des Formulars klar kommuniziert, zusammen mit einem CTA, um den Getsitecontrol-Blog zu besuchen.

3. Kinsta

Kinsta hat eine einzige „Kontakt“-Seite, die Benutzer automatisch zum richtigen Kontaktformular führt, ohne dass sie die Seite neu laden müssen.

Kinsta listet die fünf beliebtesten Kontaktanfragen auf:

1. Preise oder Pläne

2. Funktionen oder technische Informationen

3. Beantragen Sie eine Migration oder eine ähnliche Frage

4. Gastbeitrag, gesponserter Beitrag oder Backlink-Anfrage

5. Noch etwas

Wenn Benutzer ihr Ziel auswählen, zeigt Kinsta entweder ein personalisiertes Kontaktformular oder eine Nachricht an.

Auf diese Weise kann Kinsta genau die Informationen sammeln, die sie benötigen, ohne die Besucher mit Fremdfeldern zu belasten.

Im Kontaktformular für Preise oder Pläne fügt Kinsta beispielsweise zusätzliche Felder hinzu, um zu verstehen, wie viele Websites und Besucher die Person hosten möchte, aber diese Felder erscheinen nicht im Formular „Alles andere“.

Auch Kinsta setzt klare Erwartungen an die Spitze – „Wir werden uns innerhalb eines Werktages bei Ihnen melden“.

4. Auswahlscreening

Choice Screening hat ein langes Kontaktformular. Auf den ersten Blick könnte man meinen, dass dadurch die Conversion-Raten des Formulars zerstört werden. Und das ist irgendwie wahr – Choice Screening wird zweifellos weniger Formulareinsendungen erhalten als bei einem kürzeren Formular.

Aber lassen Sie uns darüber sprechen, warum das manchmal in Ordnung ist und warum dies ein großartiges Beispiel für ein Kontaktformular ist.

Choice Screening ist in einem sehr spezialisierten Business-to-Business-Bereich tätig. Sie versuchen, qualifizierte Leads zu gewinnen, die zu langjährigen Kunden werden, und nicht nur Kontaktformulare.

Mit seiner detaillierten Leistungsliste und vielen Checkboxen wird das Formular Personen aussortieren, die sich noch nicht sicher sind, was sie wollen, und nur qualifizierte Leads durchlassen, die eine große Chance haben, zu Kunden zu werden.

Man könnte sagen , dass Wahl Screening ihre potentiellen Kunden mit diesem Kontaktformular ist das Screening!

5. Joel Klettke / Business Casual Copywriting

Joel ist ein professioneller Texter, Sie können also darauf wetten, dass sein Kontaktformular-Design und sein Text auf den Punkt gebracht werden.

Joels Formular selbst ist einfach, mit den Standardfeldern plus einigen zusätzlichen qualifizierenden Feldern für das Budget einer Person. Es ist jedoch alles, was neben dem Formular passiert, was dies zu einem so guten Beispiel für ein Kontaktformular macht.

In diesem Text leistet Joel hervorragende Arbeit, um Erwartungen zu setzen und seine Leads zu qualifizieren. Auch Low-Budget-Kunden vertreibt er gezielt, indem er seine Mindestsätze bespricht. Während Joel diese Erwähnungen entfernen könnte, um eine höhere Konversionsrate zu erzielen, würde dies tatsächlich zu einem geringeren Prozentsatz an qualifizierten Leads führen und am Ende nur Joels Zeit verschwenden.

6. Neil Patel

Neil Patel betreibt eine der beliebtesten Websites für digitales Marketing der Welt, sodass Sie ziemlich sicher sein können, dass er viele Kontaktformulare erhält.

Um diese Einsendungen an die richtige Stelle zu leiten, bietet Neil ein Dropdown-Menü „Ich möchte darüber chatten“ , in dem die Benutzer aus einer Reihe von voreingestellten Optionen auswählen können. Er verwendet auch eine Mikrokopie in der Platzhalterbox, um die Leute anzuflehen, ihre Nachrichten kurz und auf den Punkt zu halten.

Dieser ist einfach – aber manchmal ist einfach alles, was Sie für Ihr Kontaktformular-Design brauchen.

7. Fokuslabor

Ok, das macht Spaß, ist skurril und wird definitiv nicht für jedes Unternehmen funktionieren. Aber wenn Sie sich in einem kreativen Bereich befinden (der Focus Lab ist), kann die Erstellung eines skurrilen Kontaktformular-Designs wie dieses zeigen, dass Sie in der Lage sind, über den Tellerrand hinauszudenken.

Anstatt ein traditionelles Formular zu erstellen, verwendet Focus Lab eher einen Ansatz im Mad Libs-Stil, bei dem Besucher ihre Informationen in einen vorhandenen Absatz eingeben. Durch diesen Ansatz ist Focus Lab auch in der Lage, mehr Informationen (wie Ziele und Budget) zu sammeln, ohne das imposante Aussehen eines traditionelleren Kontaktformular-Designs zu haben.

8. CAMICB

CAMICB, kurz für Community Association Managers International Certification Board, bietet Zertifizierungen für Community Associations in den USA an.

Das Bemerkenswerte am CAMICB-Kontaktformular ist, dass es einen hybriden Popup- / „Kontakt“-Seitenansatz verwendet. Wenn Benutzer auf der Kontaktseite landen, öffnet die CAMICB-Website sofort ein einfaches Popup-Kontaktformular, in das Besucher ihre Nachrichten senden können.

Mit nur drei Feldern hält CAMICB seine Form kurz und prägnant. Dann erstellt der Popup-Ansatz eine schöne ablenkungsfreie Oberfläche, bei der der Fokus vollständig auf dem Formular liegt.

Dies macht das Einreichen einer Anfrage zu so reibungslos wie möglich.

Und um es noch einfacher zu machen, zeigt CAMICB auch ein Slide-Up-Kontaktformular an, auf das die Benutzer in der Fußzeile zugreifen können:

So erstellen Sie Ihr eigenes anpassbares Kontaktformular-Design

Nachdem Sie diese acht Kontaktformular-Beispiele durchgesehen haben, haben Sie wahrscheinlich eine Menge Ideen, wie Sie diese Prinzipien auf Ihre eigenen Kontaktformular-Designs anwenden können.

Wenn Sie loslegen möchten, können Sie mit [Getsitecontrol](/feedback-popup/ im Handumdrehen einsatzbereit sein.

Im Gegensatz zu den meisten Kontaktformularlösungen können Sie bei Getsitecontrol aus vier flexiblen Positionen und Dutzenden von Vorlagen für Ihr Formular wählen. Sie können ein traditionelles Popup erstellen, wie Sie es mit CAMICB und der Getsitecontrol-Website gesehen haben. Oder Sie können die Dinge mit Slide-Ins, Benachrichtigungsleisten, Schaltflächen und mehr aufrütteln.

Sie können so viele (oder so wenige) Felder hinzufügen, wie Sie benötigen, um qualifizierte Einreichungen zu erhalten, und Sie können auch eine Mikrokopie einfügen, um Besuchern beim Ausfüllen Ihres Formulars zu helfen.

Melden Sie sich noch heute bei Getsitecontrol an und Sie haben in wenigen Minuten ein funktionierendes Kontaktformular.