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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hamza ist ein Writer für das WPForms-Team, der sich auch auf Themen im Zusammenhang mit digitalem Marketing, Cybersicherheit, WordPress-Plugins und ERP-Systemen spezialisiert hat.Erfahren Sie mehr
Das beste WordPress Drag and Drop Form Builder Plugin
Einfach, schnell und sicher. Schließen Sie sich über 6 Millionen Website-Besitzer, die WPForms vertrauen.
Sie möchten Ihre Social-Media-Aktivitäten verbessern? Wenn Sie Ihre WordPress-Website mit Ihren Social-Media-Konten verbinden, können Sie Ihre Social-Media-Marketingaufgaben rationalisieren und eine besser integrierte Online-Marke schaffen. In diesem Artikel stellen wir Ihnen die besten Social-Media-Plugins für WordPress vor, mit denen Sie Ihre Website und die sozialen Netzwerke synchron halten können!
Erhalten Sie keine E-Mail-Benachrichtigungen von Ihren WordPress-Kontaktformularen? Leider ist das Problem, dass WordPress-Kontaktformulare keine E-Mails senden, sehr häufig.
Sie können dieses Problem jedoch schnell beheben und anfangen, diese E-Mails zu empfangen, indem Sie Simple Mail Transfer Protocol (SMTP) auf Ihrer Website einrichten. Dieses Tutorial zeigt Ihnen genau, wie Sie das Problem mit dem Senden von E-Mails über das WordPress-Kontaktformular beheben können.
Wir verwenden Cookies, um Ihre Erfahrung auf unserer Website zu verbessern. Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden.
Dient zum Speichern von benutzerdefinierten variablen Daten auf Besucherebene.
2 Jahre
__utmz
Speichert die Traffic-Quelle oder die Kampagne, die erklärt, wie der Nutzer auf Ihre Website gelangt ist.
6 Monate
_ga
Dient zur Unterscheidung von Benutzern.
2 Jahre
_gat
Dient der Drosselung der Anforderungsrate.
1 Minute
_gid
Dient zur Unterscheidung von Benutzern.
24 Stunden
__utma
Dient zur Unterscheidung von Benutzern.
Persistent
__utmb
Dient zur Ermittlung neuer Sitzungen/Besuche.
30 Minuten
__utmc
Wird verwendet, um festzustellen, ob sich der Benutzer in einer neuen Sitzung/einem neuen Besuch befindet.
Sitzung
__utmt
Dient der Drosselung der Anforderungsrate.
10 Minuten
Marketing-Cookies werden verwendet, um Besucher auf Websites zu verfolgen. Ziel ist es, Werbung zu zeigen, die für den einzelnen Nutzer relevant und ansprechend ist.
OptinMonster ist ein leistungsstarkes Tool zur Lead-Generierung, das Unternehmen dabei hilft, Besucher in Abonnenten und Kunden umzuwandeln.
wird verwendet, um festzustellen, ob ein Besucher mit einer Kampagnen-ID von {id} auf Ihrer Website interagiert hat.
30 Tage
om-interaction-cookie / omGlobalInteractionCookie
Wird verwendet, um festzustellen, ob ein Besucher mit einer Kampagne auf Ihrer Website interagiert hat.
Sitzung
om-global-cookie / omGlobalSuccessCookie
Wird verwendet, um zu verhindern, dass zukünftige OptinMonster-Kampagnen auf Ihrer Website angezeigt werden.
Sitzung
_omappvs
Cookie wird verwendet, um wiederkehrende Besucher zu identifizieren
1 Tag
_omappvp
Cookie wird verwendet, um wiederkehrende Besucher zu identifizieren
1 Tag
_omra
Dient zur Speicherung von Interaktions- und Konversionsdaten für Kampagnen in Verbindung mit Revenue Attribution
1 Jahr
omCountdown-{id}-{elementId}
Wird für Countdown-Elemente {elementId} in Kampagnen {id} verwendet, um zu bestimmen, wann der Countdown abgeschlossen sein soll
Sitzung
om-{id}-geschlossen / omSlideClosed-{id}
Wird speziell bei Slide-in-Kampagnen {id} verwendet, um festzustellen, ob sie von einem Besucher geschlossen wurde oder nicht.
30 Tage
om-Erfolgs-Cookie / omSuccessCookie
wird verwendet, um festzustellen, ob sich ein Besucher erfolgreich für eine Kampagne auf Ihrer Website angemeldet hat, um Inhalte freizuschalten, wenn er die Funktion "Content Locking" verwendet.
365 Tage
om-Erfolg-{id} / omSuccess-{id}
Wird verwendet, um festzustellen, ob sich ein Besucher erfolgreich für eine Kampagne mit der ID {id} auf Ihrer Website angemeldet hat
365 Tage
omSeen-{id}
Wird verwendet, um festzustellen, ob einem Besucher eine Kampagne mit dem Slug angezeigt wurde. Kein Verfallsdatum
30 Tage
X Pixel ermöglicht es Unternehmen, Benutzerinteraktionen zu verfolgen und die Anzeigenleistung auf der X-Plattform effektiv zu optimieren.
Dieses Cookie wird von X gesetzt, um den Besucher der Website zu identifizieren und zu verfolgen. Es registriert, ob ein Benutzer bei der X-Plattform angemeldet ist, und sammelt Informationen über Anzeigenpräferenzen.
2 Jahre
personalisierung_id
Einzigartiger Wert, mit dem Benutzer von X identifiziert werden können. Die gesammelten Informationen werden verwendet, um X-Dienste zu personalisieren, einschließlich X-Trends, Geschichten, Anzeigen und Vorschläge.
2 Jahre
externer_Referent
Unsere Website verwendet X-Schaltflächen, um unseren Besuchern die Möglichkeit zu geben, unseren X-Werbe-Feeds zu folgen und manchmal Feeds in unsere Website einzubetten.