Suchen Sie nach Inspirationen für die Gestaltung von Kontaktformularen für Ihre Website? Mit ein paar einfachen Anpassungen können Sie Online-Formulare nach Ihren Wünschen gestalten.
In diesem Artikel zeige ich Ihnen einige tolle Beispiele für die Gestaltung von Kontaktformularen und gebe Ihnen nützliche Tipps für die Erstellung eines solchen Formulars auf Ihrer Website.
Gestalten Sie jetzt Ihr Kontaktformular 🙂
Außerdem zeige ich Ihnen eine wirklich praktische Methode, mit der Sie das Layout Ihrer Formulare ohne Code ändern können. Sind Sie bereit? Dann nichts wie los!
In diesem Artikel
7 Kontakt-Formular-Designs, die Sie klauen können
Lassen Sie uns nun einige coole Beispiele und die wichtigsten Taktiken untersuchen, die sie verwenden, um sie zu inspirieren und auf Ihrer Website nachzubilden.
1. WPForms
Ich wollte mit der WPForms-Kontaktseite beginnen, da sie meiner Meinung nach ein hervorragendes Beispiel für SaaS-Produkte, Plugin-Websites und andere kleine Unternehmen ist.
Der obere Teil dieser Seite ist in zwei Bereiche unterteilt: einen für bestehende Kunden mit technischen Fragen und einen für Anfragen vor dem Verkauf.
Lesen Sie auch: Wie man Besuchern das Duplizieren von Formularfeldern erlaubt
Warum ich denke, dass dieses Kontaktformular sich von anderen abhebt
Das Kontaktformular ist nicht sofort sichtbar, sondern wird erst angezeigt, wenn jemand auf die Schaltfläche "Formular ausfüllen" unter dem Abschnitt "Ich habe eine grundlegende Frage" klickt.
Durch diese Designwahl wird die Seitengröße minimiert und sichergestellt, dass neue Interessenten das Formular in erster Linie nutzen, da es nur über den Vorverkaufsbereich zugänglich ist.
Diese Strategie trägt dazu bei, die Nutzer schnell zum richtigen Bereich zu leiten und den Prozess sowohl für das Unternehmen als auch für die Personen, die Kontakt aufnehmen, zu optimieren.
Zusätzlich, am unteren Rand der Seite, gibt es einen Call-to-Action (CTA) Link lädt die Besucher auf die WPForms VIP Circle beizutreten.
Wie man eine Kontaktseite wie diese erstellt
- Pop-up-Kontaktformular: Entwerfen Sie eine Kontaktseite, auf der das Formular nur erscheint, wenn eine bestimmte Schaltfläche angeklickt wird. So bleibt die Seite übersichtlich und hebt andere Elemente hervor, bis eine Interaktion erforderlich ist.
- Wissensdatenbank für den Kundensupport: Implementieren Sie ein Wiki oder eine Wissensdatenbank auf Ihrer WordPress-Website. Diese dient als Selbsthilfebereich für bestehende Kunden, in dem allgemeine Fragen und Probleme behandelt werden.
- Verwendung von Templates: Wählen Sie aus über 2.000 WordPress-Formularvorlagen für verschiedene Zwecke wie Feedback, Marketing und Geschäftsabläufe. Mit diesen Vorlagen lassen sich schnell professionell aussehende und funktionale Formulare einrichten. (Probieren Sie auch diese versteckten WPForms-Vorlagen für besondere Situationen aus).
- Formular-Übersetzung: Für Websites, die nicht Englisch sprechen oder ein mehrsprachiges Publikum bedienen, ermöglicht WPForms eine einfache Übersetzung der Kontaktformulare, um verschiedenen sprachlichen Anforderungen gerecht zu werden.
Erstellen Sie jetzt Ihr WordPress-Formular
2. Streifen
Ich habe beschlossen, mich auf die Stripe-Kontaktseite zu konzentrieren, weil sie ein Paradebeispiel für eine spezialisierte Kontaktseite ist, die Geschäftsanfragen effizient bearbeitet.
Um das Kontaktformular kurz aussehen zu lassen, verwendet Stripes ein mehrstufiges Formular auf seiner Kontaktseite, was sicherlich dazu beiträgt, die Abbruchrate zu senken.
Warum ich denke, dass diese Kontaktseite hervorsticht
Das Besondere an diesem Kontaktformular ist, dass es sich auf die Erfassung von Informationen konzentriert, die für das Vertriebsteam von Stripe relevant sind.
Es verwendet einen mehrstufigen Formularansatz, der zunächst nach Ihrer Arbeits-E-Mail und Ihrem Land/Ihrer Region fragt, um Ihre Informationen zu erfassen.
Sobald Sie auf die Schaltfläche "Weiter" klicken, zielt das Kontaktformular von Stripe darauf ab, ein gutes Verständnis für Ihr Unternehmen zu bekommen und wie Stripe Ihnen helfen kann.
Indem sie nach der Größe Ihres Unternehmens, Ihrem Umsatz und Ihren Integrationsanforderungen fragen, können sie Ihre Anfrage an die am besten geeignete Person weiterleiten.
Wie man eine Kontaktseite wie diese erstellt
- WPForms Lead Forms Addon: Verwenden Sie das Feld Seitenumbruch oder das Lead Forms Addon, um Ihr Formular in einzelne Abschnitte zu unterteilen.
- Konzentrieren Sie sich auf relevante Informationen: Überlegen Sie, welche Informationen über potenzielle Kunden für Ihr Vertriebsteam am hilfreichsten wären.
- Halten Sie es einfach: Überfordern Sie die Nutzer nicht mit zu vielen Formularfeldern. Fragen Sie nur nach den wichtigsten Informationen, die Sie zur Qualifizierung von Leads benötigen.
- Klare Beschriftungen und Anweisungen: Verwenden Sie klare und prägnante Beschriftungen für jedes Feld und geben Sie alle notwendigen Anweisungen, um Verwechslungen zu vermeiden.
Erstellen Sie jetzt Ihr mehrstufiges Formular
3. Legalia
Das Kontaktformular auf der Seite "Contact Us" von Legalia Corp ist eine gut durchdachte Schnittstelle, die eine nahtlose Kommunikation zwischen der Kanzlei und ihren Kunden ermöglicht.
Das Besondere an dieser Seite ist das mehrspaltige Layout mit einer Karte auf der linken Seite, die den Standort verdeutlicht, und einem strukturierten Kontaktformular auf der rechten Seite.
Warum ich denke, dass dieses Kontaktformular sich von anderen abhebt
Die Verwendung eines mehrspaltigen Layouts ist besonders effektiv, da es das Formular übersichtlich in zwei verschiedene Abschnitte unterteilt.
Dies ermöglicht es den Nutzern, die geografischen Informationen visuell von den Kontaktfeldern zu trennen, was ein interessanter Ansatz ist.
Außerdem bin ich der Meinung, dass eine Karte nicht nur das Auffinden des Unternehmens erleichtert, sondern auch die Legitimität und Erreichbarkeit des Unternehmens erhöht.
Das Formular selbst ist ebenfalls recht einfach gehalten und fragt die wichtigsten Informationen ab, ohne den Benutzer zu überfordern.
Wie man eine Kontaktseite wie diese erstellt
- Planen Sie Ihr Layout: Entscheiden Sie sich zunächst für ein Layout, das ein Gleichgewicht zwischen Benutzeroberfläche und Designästhetik herstellt. Ein geteiltes Layout kann sehr effektiv sein, um verschiedene Informationstypen visuell zu trennen und sie gleichzeitig auf derselben Seite zu halten.
- Karten einbinden: Wenn Ihr Unternehmen über einen physischen Standort verfügt, kann die Einbindung einer Karte auf der Kontaktseite das Vertrauen der Nutzer erheblich stärken und den Prozess der Standortfindung vereinfachen. Verwenden Sie Tools wie Google Maps für eine einfache Integration.
- Vereinfachen Sie das Formular: Beschränken Sie Ihre Formularfelder auf ein Minimum, um potenzielle Kontakte nicht abzuschrecken. Fordern Sie nur die wichtigsten Informationen an, z. B. Name, E-Mail und ein kurzes Nachrichtenfeld, was meiner Meinung nach völlig ausreichend ist.
Fügen Sie eine Karte zu Ihrem Kontaktformular hinzu
4. Suchmaschine Journal
Das Kontaktformular auf der "Contact Us"-Seite von Search Engine Journal zeichnet sich durch seine umfassenden Funktionen aus, die auf eine Vielzahl von Nutzerbedürfnissen zugeschnitten sind.
Dieses Formular enthält fortschrittliche Funktionen wie Captcha für die Sicherheit, eine Option zum Hochladen von Dateien und die Kategorisierung von Abfragen.
Lesen Sie auch: Abstand zwischen den Feldern erzwingen.
Warum ich denke, dass dieses Kontaktformular sich von anderen abhebt
Ich finde es wirklich toll, wie das Search Engine Journal verschiedene Kategorisierungsoptionen basierend auf der Art der Benutzeranfrage eingeführt hat.
Ob es sich um Werbung, die Meldung eines technischen Problems oder andere Anliegen handelt, es gibt für jeden Bedarf eine Option.
Ein CAPTCHA hilft auch dabei, Spam zu verhindern und sicherzustellen, dass nur echte Anfragen das SEJ-Team erreichen.
Schließlich können die Nutzer auch Dateien an ihre Anfragen anhängen, was vor allem dann von Vorteil ist, wenn sie Dokumente zur Untermauerung ihrer Nachrichten oder Anfragen einreichen möchten.
Wie man eine Kontaktseite wie diese erstellt
- Implementieren Sie Sicherheitsfunktionen: Fügen Sie Sicherheitsmaßnahmen wie ein CAPTCHA mit Hilfe von WPForms, um Ihre Website vor Spam und Missbrauch zu schützen, die dazu beitragen, die Integrität Ihrer Kommunikation.
- Fokus auf Benutzerfreundlichkeit: Entwerfen Sie Ihr Formular mit Blick auf den Benutzer. Stellen Sie sicher, dass die Navigation einfach ist, die Felder klar beschriftet sind und die Anweisungen einfach sind, um Verwirrung zu vermeiden. Verwenden Sie ein Dropdown-Feld zur Kategorisierung für Benutzerabfragen.
- Fügen Sie ein Datei-Upload-Feld hinzu: Wenn Sie den Personen, die Sie kontaktieren, die Möglichkeit geben wollen, Felder an ihre Anfragen anzuhängen, können Sie WPForms verwenden , um ein Datei-Upload-Feld zu Ihrem Formular hinzuzufügen, das recht einfach zu verwenden ist.
CAPTCHA für Ihr WordPress-Formular einrichten
5. Marvel
Marvel ist ein Software-Design-Unternehmen, das ein mehrspaltiges Layout für sein Kontaktformular mit einem Bild auf der rechten Seite verwendet.
Das Design ist klar und modern, so dass die Nutzer die gewünschten Informationen problemlos finden können.
Warum ich denke, dass dieses Kontaktformular sich von anderen abhebt
Das mehrspaltige Design ist das, was dieses Kontaktformular wirklich auszeichnet und ihm das Gefühl von Übersichtlichkeit und Luftigkeit verleiht.
So können die Nutzer die Seite schnell überfliegen und genau das finden, was sie brauchen, ohne sich durch eine Menge Text wühlen zu müssen.
Das Bild auf der rechten Seite des Formulars ist nicht nur visuell ansprechend, sondern auch relevant für das Geschäft von Marvel und zeigt das Engagement des Unternehmens für Design.
Wie man eine Kontaktseite wie diese erstellt
- Mehrspaltiges Layout: Entscheiden Sie sich zunächst für ein Layout, das ein Gleichgewicht zwischen Benutzeroberfläche und Designästhetik herstellt. Ein mehrspaltiges Layout kann sehr effektiv sein, um verschiedene Informationstypen visuell zu trennen und sie gleichzeitig auf derselben Seite zu halten.
- Strategischer Einsatz von Bildmaterial: Wählen Sie Bilder, die Ihre Marke widerspiegeln und sich auf den Zweck der Seite beziehen. Das Hinzufügen eines Bildes zu Ihrem Kontaktformular kann es insgesamt ansprechender und interaktiver machen.
Bilder zu Ihrem Kontaktformular hinzufügen
6. Mittel
Die Kontaktseite in einem Help Center wie dem von Medium ist entscheidend für die direkte Unterstützung und Anleitung der Nutzer.
Sie enthält direkte Links zu beliebten Hilfethemen und Antworten. Benutzer können ganz einfach eine Anfrage stellen, wenn sie keine Antworten auf ihre Fragen finden können.
Warum ich denke, dass diese Kontaktseite hervorsticht
Die mittlere Kontaktseite enthält in der Regel Dropdown-Menüs oder Kontrollkästchen, mit denen die Benutzer ihre Anfragen kategorisieren können.
Viele Hilfezentren bieten Links zu häufig gestellten Fragen oder verwandten Artikeln an, bevor sie die Übermittlung des Formulars zulassen.
Der größte Nachteil ihrer Seite ist jedoch, dass Medium kein Kontaktformular verwendet. Das kann für Nutzer, die sich dringend mit dem Support-Team in Verbindung setzen müssen, frustrierend sein.
Wie man eine Kontaktseite wie diese erstellt
- Integrieren Sie Selbsthilfeoptionen: Integrieren Sie Ihre Kontaktseite mit Ihrer Wissensdatenbank. Bieten Sie Artikel oder Links zu häufig gestellten Fragen (FAQs) an, die sich auf die Auswahl oder Eingabe des Nutzers beziehen und möglicherweise die Frage lösen.
7. Weiße Grenze
Möchten Sie ein Formular über einem Hintergrundbild platzieren? Suchen Sie nach einem Kontaktformular, das CSS verwendet? Ich habe das Richtige für Sie!
White Frontier verwendet auf seiner Kontaktseite ein transparentes Formular, so dass sich das Kontaktformular perfekt in das Hintergrunddesign einfügt.
Wenn Sie dieses Design auf Ihrer Website testen, achten Sie darauf, ein Bild auf den Hintergrund zu legen. Andernfalls können Sie das Formular nicht sehen.
Wie man eine Kontaktseite wie diese erstellt
Für dieses Beispiel können Sie einfach das CSS-Design des Kontaktformulars von unten kopieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zur Gestaltung von Formularen mit CSS.
Kontakt Formular Design CSS
/* Fields */ div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea { background-color: transparent; /* Remove background fill */ text-transform: uppercase; /* Make text all uppercase */ border-radius: 0; /* Remove corner curve */ border: 2px solid #fff; /* 2px white border */ color: #fff; /* White text */ height: 45px; /* Increase input height */ } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } /* Button */ div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button { text-transform: uppercase; padding: 10px 60px; color: white; background: #444; font-weight: normal; }Sitewide-Anpassung vornehmen
Wenn Sie die CSS-Schnipsel, die Sie verwenden möchten, haben, ist die Anpassung Ihrer Formulare an den gesamten Standort ziemlich einfach.
Sie müssen lediglich die gewünschten CSS-Schnipsel kopieren und über den WordPress-Theme-Customizer oder den Theme-Editor in Ihre Website einfügen.
Eine noch einfachere Methode ist die Verwendung eines Plugins wie WPCode, mit dem Sie verschiedene Arten von Codefragmenten in Ihre Website einfügen können.
Möglicherweise haben Sie auch mehrere Formulare auf Ihrer Website und möchten die Gestaltung nur für eines davon ändern. Wir zeigen Ihnen als Nächstes, wie Sie das tun können.
Wie Sie Ihr Kontaktformular-Design anpassen können
Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben.
Erstellen Sie dann ein neues Formular und fügen Sie das Formular zu einer Seite oder einem Beitrag hinzu. Klicken Sie im Block-Editor auf das Formular, um zusätzliche Styling-Optionen für den WPForms-Block zu öffnen.
Sie können das Farbthema, die Formularfelder, die Beschriftungen, die Schaltflächen sowie die Container- und Hintergrundstile ändern, ohne CSS in den WPForms-Blockeinstellungen zu schreiben.
- Sie können ein vordefiniertes Farbschema in der Einstellung Themen auswählen, um den Stil der Felder, Beschriftungen, Schaltflächen, Container und Hintergründe Ihres Formulars zu ändern.
- Im Abschnitt Feldstile finden Sie die Optionen zum Anpassen von Größe, Rahmen, Rahmengröße, Rahmenradius und Farben für Ihre Formularfelder.
- Die Größe und Farbe Ihrer Formularbeschriftungen können Sie im Abschnitt Beschriftungsstile ändern. Die verfügbaren Größenoptionen sind Klein, Mittel und Groß.
- Unter Schaltflächenstile können Sie Größe, Farbe, Rahmen, Rahmengröße, Rahmenradius und Rahmenstil Ihrer Schaltflächen ändern.
- Mit den Einstellungen für die Container-Stile können Sie die Farbe, den Schatten, die Auffüllung, den Stil, die Größe und den Radius des Rahmens um den Container Ihres Formulars ändern.
- Die Einstellungen für die Hintergrundstile geben Ihnen die Kontrolle über das Hintergrundbild und die Farbe Ihres Formulars, um Ihrem Formular einen eigenen Charakter zu verleihen.
Sobald Sie Ihr Kontaktformular gestaltet haben, klicken Sie auf die Registerkarte Erweitert. Hier können Sie den CSS-Code kopieren, der alle von Ihnen hinzugefügten Stile enthält.
Wenn Sie ein neues Formular erstellen, fügen Sie einfach das Codeschnipsel ein, und das Formulardesign wird die Stile des vorherigen Formulars verwenden.
Ebenso können Sie Ihre E-Mail-Benachrichtigungen mit vorgefertigten Vorlagen gestalten, was eine gute Möglichkeit ist, Ihr Branding über alle Kommunikationskanäle hinweg zu verbessern.
Achten Sie nur darauf, dass Sie Ihrer E-Mail (und Ihrer Website) ein gut proportioniertes Logo hinzufügen, um perfekte Klarheit und Reaktionsfähigkeit auf allen Geräten zu gewährleisten.
Gestalten Sie Ihr Kontakt-Formular jetzt
FAQs über Kontaktformulardesigns
Die Gestaltung von Kontaktformularen ist ein beliebtes Thema bei unseren Lesern. Hier finden Sie Antworten auf einige häufig gestellte Fragen dazu:
Können Sie WPForms anpassen?
Ja, Sie können WPForms umfangreich anpassen. Mit WPForms können Sie benutzerdefinierte Vorlagen erstellen und Stile direkt im WordPress-Block-Editor ändern.
Diese Flexibilität gewährleistet, dass Sie Ihre Formulare an das Design Ihrer Website anpassen und Ihre spezifischen Anforderungen erfüllen können. Weitere Informationen finden Sie in diesem Leitfaden.
Wie kann ich mein Kontaktformular anpassen?
Um Ihr Kontaktformular in WordPress mit WPForms anzupassen, wählen Sie zunächst eine Vorlage aus oder erstellen Sie ein Formular von Grund auf.
Sie können Felder nach Bedarf hinzufügen, entfernen und neu anordnen. Verwenden Sie den WPForms-Formular-Builder, um Einstellungen wie Beschriftungen, Platzhalter und Feldgrößen für weitere Anpassungen anzupassen.
Wie kann ich ein Kontaktformular in WordPress gestalten?
Um ein Kontaktformular in WordPress zu gestalten, verwenden Sie WPForms und den WordPress Block Editor. Mit WPForms können Sie aus vorgefertigten, anpassbaren Formularvorlagen wählen.
Im Block-Editor können Sie benutzerdefinierte CSS direkt zu Ihren Formularblöcken hinzufügen, um Schriftarten, Farben, Polsterungen und vieles mehr an den Stil Ihrer Website anzupassen.
Wie ändert man das Formulardesign in WordPress?
Ändern Sie das Design Ihres Formulars in WordPress mithilfe von WPForms. Wählen Sie das Formular aus, das Sie bearbeiten möchten, und passen Sie dann das Design innerhalb des Formularerstellers an.
Für eine detaillierte Gestaltung verwenden Sie den WordPress-Block-Editor, in dem Sie das Design Ihres Formulars, die Feldstile, die Beschriftungsstile, die Schaltflächenstile, die Hintergrundstile und vieles mehr ändern können.
Als Nächstes erfahren Sie, wie Sie eine Formularvorlage mit Markenzeichen erstellen
Gebrandete Formulare, die die Farben, das Logo und den Stil Ihrer Marke widerspiegeln, lassen Ihre Formulare persönlicher und professioneller wirken und fördern so das Engagement und Vertrauen der Nutzer. In diesem Leitfaden finden Sie eine Anleitung zum Erstellen einer Markenformularvorlage.
Erstellen Sie jetzt Ihr WordPress-Formular
Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.
Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.
