Webformular-Design: 15 Beispiele Für Die Korrekte Umsetzung

Website-Formulare sind ein wesentlicher Bestandteil jeder Website, Landingpage oder E-Commerce-Plattform. Unabhängig davon, ob das Ziel des Formulars darin besteht, den Website-Betreiber zu kontaktieren, einen Fragebogen auszufüllen, sich in ein Konto einzuloggen, einen Artikel zu erwerben, ein neues Konto zu erstellen, eine Reservierung vorzunehmen oder sich für eine kostenlose Testphase anzumelden – jedes kleinste Detail des Designs und Layouts des Webformulars ist von entscheidender Bedeutung.

Möglicherweise haben Sie sich in der Vergangenheit diese Fragen gestellt: Welches Design-Layout wird für mein Formular am besten funktionieren? Was wird die Benutzer am meisten ansprechen? Wie kann ich meine Design-Motive und meine Markenidentität implementieren? Sollte ich das Formular in einem Website-Popup platzieren, oder würde ein Fußzeilen-Formular besser funktionieren?

Angesichts der langen Liste von Website-Formulartypen und deren Anwendungsfällen kann es, gelinde gesagt, einschüchternd sein, zu identifizieren, was bei Ihrem Formular-Design zu berücksichtigen ist. Seien Sie versichert, dass die Erstellung eines leistungsstarken Website-Formulars bald zu einer stressfreien, herausfordernden, aber dennoch lohnenden Web-Kreationserfahrung wird.

Um unsere Webdesign-Strategie und Workflows zu stärken, haben wir eine Liste von 15 Beispielen zusammengestellt, die Ihnen zeigen werden, woraus die besten Formulare bestehen.

Inhaltsverzeichnis

15 Unvergessliche Beispiele für Formular-Design

Wir begeben uns auf eine vollgepackte Reise durch Website-Formulare aller Formen, Farben, Layouts und Größen. Lassen Sie sich von dieser Liste von 15 Website-Formularen beeindrucken, deren Design und Struktur Ihre Web-Erstellungsfähigkeiten revolutionieren werden.

Kontaktformulare

Wenn Sie entschlossen sind, jeden Benutzer dazu zu bringen, auf ‚Absenden‘ zu klicken, bevor er Ihre Website verlässt, kann Ihr Kontaktformular entscheidend für dieses Ziel sein. Grundlegende Entscheidungen wie ob und wann Animationen oder Fortschrittsanzeigen hinzugefügt werden sollen, wie groß oder fett Ihre Überschriften sein sollten, wie breit Ihre Formularfelder sein sollten – all diese Faktoren tragen zur Abschlussrate jedes Formulars bei und beeinflussen die Benutzererfahrung Ihrer Website.

#1 Brandingo

Brandingo ist eine armenische Designagentur und -schule, die wir im Januar 2021 für unsere Top 10 Elementor-Websites des Monats ausgewählt haben. Die Brandingo-Website wurde entwickelt, um ‚das Talent und Wissen der Agentur in den Bereichen Design, Illustration, UI/UX und Branding potenziellen Kunden und Studenten zu präsentieren.‘

Was uns an der Website von Brandingo stets aufgefallen ist, ist die Verwendung zahlreicher Bewegungs- und interaktiver Effekte, die wie angegossen zusammenpassen. Sie haben offensichtlich die Kunst gemeistert, ein Gleichgewicht zwischen ansprechenden interaktiven Funktionen zu finden, die für das menschliche Auge nicht zu überwältigend sind.

Unsere bevorzugten Aspekte:

Die vielfältige Verwendung von Lottie-Animationen, die beim Scrollen der Seite erscheinen.
Der Textpfad, der am Ende um den kreisförmigen Hintergrund des Formulars herumläuft.

#2 Der Space Cube

Der Space Cube ist ein Produkt zur Organisation des Arbeitsplatzes, entwickelt von Carol Havener aus Sydney, Australien. Das Produkt, sowohl für Eigenheimbesitzer als auch für Büros konzipiert, adressiert die Herausforderung der Organisation begrenzter Räume (wie beispielsweise eines Büroschreibtisches, eines Arbeitszimmers, eines Familienwohnzimmers etc.).

Carol erstellte ihre Produkt-Website mit Elementor und nutzte den WooCommerce-Builder, um ihren E-Commerce-Bedürfnissen gerecht zu werden. Angesichts der breiten Zielgruppe verwendet die Website des Produkts ein Schwarz-Weiß-Farbschema auf kluge Weise. Die Motive entsprechen dem modernen, schlanken und minimalistischen Designkonzept des Produkts, und die Kontaktseite samt Formular erreicht dasselbe Ziel.

Unsere bevorzugten Aspekte:

Die elegante Schriftpaarung kombiniert Kalligraphie und einen handschriftlichen Stil mit der serifenlosen Schriftart ‚Bodoni‘.

Das raffinierte Hintergrundbild, das hinter dem soliden, quadratischen weißen Hintergrund des Formulars platziert ist. Dies bringt den Anwendungsfall des Produkts wirklich zum Leben und erinnert den Benutzer subtil daran, wie angenehm es sich anfühlt, an einem sauberen, aufgeräumten Schreibtisch zu sitzen, der Ruhe ausstrahlt.

#3 Metropolis Moving

Metropolis Moving ist ein Umzugsunternehmen mit Sitz in Brooklyn, New York City. Ihr Website-Farbschema und -Design verwenden NYC-typische Farben wie Taxigelb, Marineblau und Grau, um die Essenz ihres maßgeschneiderten Services für Umzüge innerhalb des geschäftigen ‚Big Apple‘ zu visualisieren. Das Kontaktformular der Website ist ein kurzes mehrstufiges Formular, das der potenzielle Kunde ausfüllt, um ein Preisangebot zu erhalten.

Unsere bevorzugten Aspekte:

Die markierte Kartenroute und die Standortpunkte erfassen die unvorhersehbare Erfahrung (Strecke) des Umzugs von einer Adresse zur anderen.

Die Formularfelder sind nach allen Regeln der Kunst des Webformular-Designs gestaltet:

- Minimale Anzahl von Formularfeldern
- Linksbündige Formularfelder und Platzhalter
- Einspaltiges Layout
- Klar strukturierter Schrittindikator

Fragebögen

Ihr Publikum nach ihren Interessen, Präferenzen, Zielen etc. zu befragen, ist eine gute Möglichkeit, einen Dialog zu etablieren. Doch welche sind die besten Methoden, um Ihre Fragen zu präsentieren? Sollten Sie eine informelle Atmosphäre schaffen? Welches Format wird für Ihr Publikum am besten funktionieren? All diese Überlegungen sind von gleicher Bedeutung, doch die Optionen zur Bewältigung jeder einzelnen sind äußerst vielfältig.

#4 Spotify Pets

Spotify Pets ist eine Playlist-Funktion innerhalb des digitalen Musik-, Podcast- und Videodienstes Spotify. Diese einzigartig skurrile Ergänzung zu Spotify nutzt den Algorithmus der Plattform, um Playlists für das Haustier und den Besitzer zu erstellen – basierend auf den Hörgewohnheiten des Nutzers und den Eigenschaften des Haustiers.

Unsere bevorzugten Aspekte:

Die einstellbare Schieberegler-Animation, die der Benutzer anpasst, um die Eigenschaften seines Haustiers zu beschreiben – eine ansprechende Eingabemethode, die zudem die Tippaktivität eliminiert.
Der Fortschrittsindikator fügt sich nahtlos in den fröhlichen, illustrierten Hintergrund ein.
Der mehrseitige Fragebogen hat eine Frage pro Bildschirm, wobei jede äußerst mobilfreundlich ist.

#5 RedBull

Red Bull ist ein international erhältlicher Energydrink, dessen Slogan ‚Red Bull verleiht Flügel‘ lautet. Auf ihrer Website-Produktseite bindet Red Bull den Besucher in Brand Storytelling ein, mit einem interaktiven Quiz über Nachhaltigkeit und Umweltsicherheit – zwei der zentralen Werte der Marke.

Unsere bevorzugten Aspekte:

Der Countdown-Timer für jede Frage erzeugt Spannung und Dringlichkeit zur Beantwortung.
Die großen Auswahlschaltflächen machen die Antwortmöglichkeiten sehr zugänglich und einfach zu klicken.
Das animierte Hintergrundvideo des Homepage-Quiz.

Login-Formulare

Anmeldeformulare stellen eine äußerst bedeutsame Komponente in der Benutzeroberfläche Ihres Produktes oder Dienstes dar. Benutzer werden dieses Formular mit hoher Wahrscheinlichkeit wiederholt sehen, weshalb Vertrautheit und Einfachheit von entscheidender Bedeutung sind. Ihr Formular sollte einladend, intuitiv und unkompliziert sein – und dennoch den Benutzer bestmöglich begeistern. Oftmals können selbst die kleinsten Details und Illustrationen einen erheblichen Unterschied bewirken.

#6 gidimo

gidimo ist ein nigerianisches EdTech-Unternehmen, dessen Online-Lernplattform Lernende aller Hintergründe und Lebensphasen bedient. Die Technologie der Plattform nutzt Gamifizierungstechniken und maßgeschneiderte Benutzererlebnisse, die ‚das Lernen von allem unterwegs unterhaltsam und einfach gestalten‘.

Die mit Elementor erstellte Website von gidimo (ein Gewinner unserer März 2021 Präsentation) verfügt über eine Anmeldeseite mit einem übersichtlichen Layout und einer Slider-Galerie neben dem Anmeldeformular. Dies verleiht der Seite eine zusätzliche Ebene der Interaktion und Attraktivität: Benutzer können sich durch wechselnde Illustrationen navigieren, die die positive Atmosphäre der Plattform verstärken.

Unsere Favoriten:

Die Hintergrundfarbe des Sliders wechselt zwischen Grün und Weiß, während der Benutzer navigiert.
Jede Zeile des Formulars hat die gleiche Breite, was ein einheitliches, organisiertes Layout ermöglicht, das Klarheit und Konsistenz fördert.

#7 Snappet

Snappet ist eine Online-Bildungsplattform für Tablet-Geräte, die von Mathematiklehrern genutzt wird, um individuelle Lernwege der Schüler zu personalisieren und gleichzeitig ihre Leistungen zu überwachen. Das Lerntool ist für Grundschüler konzipiert, was durch das freundliche, farbenfrohe Farbschema und die Vektorillustrationen der Website leicht zu erkennen ist.

Unsere Favoriten

Der illustrierte Anwendungsfall auf der Anmeldeseite für Schüler vermittelt eine emotionale Botschaft: Er erinnert die Schüler an das ermutigende (wenn auch virtuelle) High-Five und die positive Stimmung, die sie durch die Nutzung der Plattform erfahren werden.
Das Typografie-Schema mit einer einzigen Schriftart verwendet Variationen einer Schriftart (verschiedene Farben und Größen). Um Monotonie zu vermeiden, werden zwei verschiedene Farben und Größen verwendet, um die Informationshierarchie zwischen den Textelementen anzuzeigen.

Produktzielseiten-Formulare

Produktzielseiten sind von immenser Bedeutung für das Website-Formulardesign, da ein Großteil des Einkaufsverhaltens der Besucher direkt vom Design der Produktseite abhängt. Angesichts der Fülle an Informationen, die Verbraucher über jedes einzelne Produkt wissen möchten, muss die Entscheidung, was und wie auf jeder Produktseite dargestellt wird, mit größter Sorgfalt getroffen werden.

#8 Bram

Als Gewinner unserer WooCommerce-Websites-Präsentation ist Bram ein in Barcelona ansässiger Hersteller handgefertigter Ledergeldbörsen. Das Design-Layout der Produktseite (im Wesentlichen ein Bestellformular) war für uns besonders inspirierend.

Unsere Favoriten:

Die große Auswahl an Farboptionen wird in einer Zeile für eine simultane Ansicht dargestellt, ohne dass ein Dropdown-Menü geöffnet werden muss, um jede Farboption zu sehen.
Die ‚In den Warenkorb‘-Schaltfläche ist leicht zu finden und am oberen Rand des Inhalts platziert, anstatt das letzte Element auf der Seite (nach den Produktdetails und ausklappbaren Registerkarten) zu sein.
Der reichliche Weißraum auf der Seite macht die Produktdetails klar und lesbar, und die Lederdetails des Produkts sind leicht erkennbar.

#9 ABATTOIR VÉGÉTAL

ABATTOIR VÉGÉTAL ist ein veganes Bistro und Lebensmittelgeschäft in Paris, Frankreich. Die E-Commerce-Website (mit Elementor und WooCommerce erstellt und Gewinner der August 2020 Präsentation) präsentiert sowohl das Bistro-Takeaway als auch die Lebensmittelmenüs, bei denen der Benutzer Zutaten und Gerichte zur Online-Bestellung auswählen kann.

Unsere Favoriten:

Die Verwendung von WordPress-Benutzerdefinierten Feldern; Die Produktseite und ihr Bestellformular enthalten alle grundlegenden Informationen zur Mahlzeit in einem effizienten, ansprechenden Format.
Die ansprechenden Formate, die im WooCommerce-Warenkorb der Seite verwendet werden: sowohl die Artikelanzeige als auch die ‚In den Warenkorb‘-Schaltfläche haben eine leuchtende Hintergrundfarbe, die dem Checkout-Benutzerfluss und dem gesamten Online-Einkaufserlebnis Spaß und Stil verleihen.
Die leuchtenden Schriftfarben und detaillierten Fotografien kommunizieren die verbalen und visuellen Informationen klar – ein aufregender Beginn eines kulinarischen Einkaufserlebnisses.

Anmeldeformulare

Ein erfolgreicher Anmeldeprozess erfüllt die Wünsche jedes Webgestalters, der ein Website-Formular erstellt. Ist es tatsächlich möglich, diesen Traum in die Realität umzusetzen? Grundsätzlich ist alles möglich, jedoch können die Schritte, die Sie unternehmen, um Ihre Besucher zufriedenzustellen, äußerst weitreichende Konsequenzen haben. Jedes Detail, von der Sichtbarkeit der Schaltflächen bis zum Kontrast zwischen den Elementen, wird die Ergebnisse der Formularübermittlung signalisieren.

#10 Duolingo

Duolingo ist eine Sprachlern-Website und mobile Applikation. Als Marke verfolgt das Unternehmen die Mission, „Bildung kostenlos, unterhaltsam und für alle zugänglich zu machen“. Der oben gezeigte Bildschirm erscheint während des Onboarding-Prozesses der Plattform, bei dem der Benutzer sein Sprachlernziel festlegt und einen Lernpfad auswählt.

Unsere bevorzugten Aspekte:

Die Flat-Design-Avatare und Illustrationen, die auf der gesamten Website verwendet werden, fungieren als Bildvorschau-Schaltflächen innerhalb des Formulars.
Das ausgerichtete Rasterlayout harmonisiert die sieben Illustrationen – es verbindet ihre unterschiedlichen Größen, Farben und Formen.

#11 Stripe

Stripe ist eine Zahlungsabwicklungssoftware, die von E-Commerce-Websites und mobilen Anwendungen genutzt wird. Die Nutzung von Stripe ermöglicht es Unternehmen, Zahlungen zu akzeptieren, Auszahlungen zu senden und ihr Geschäft online zu verwalten. Die Kontoregistrierung ist unkompliziert und einfach, unterstützt durch ein simples, jedoch ansprechendes Anmeldeformular.

Unsere bevorzugten Aspekte:

Der Schattenwurf um den Hintergrund des Übermittlungsformulars grenzt das Anmeldeformular von den Aufzählungspunkten auf der linken Seite der Seite ab.
Die strukturierten, prägnanten Aufzählungspunkte, die drei wesentliche Vorteile des Produkts hervorheben und den Mehrwert der Erstellung eines Stripe-Kontos unterstreichen.

Buchungsformulare

Erfolgreiche Online-Buchungsformulare profitieren von einer positiven, ermutigenden Atmosphäre. Wenn Ihre Besucher an dem Punkt angelangt sind, sich über die Buchung Ihres Dienstes zu informieren, müssen Sie alles in Ihrer Macht Stehende tun, um ihre Aufmerksamkeit und ihr Interesse aufrechtzuerhalten sowie ihre Vorfreude auf das bevorstehende Erlebnis zu steigern.

#12 Be A Roshan

Be A Roshan ist ein Zentrum für Energietherapie und Meditation auf der Insel Mauritius. Die Elementor-Website von Be A Roshan bietet Online-Termin- und Veranstaltungsbuchungen für Kunden an. Die für die Website gewählten Designmotive (wie der sonnige Hintergrund der Startseite) spiegeln die Atmosphäre der beruhigenden Reiki- und Meditationserfahrungen wider.

Unsere bevorzugten Aspekte:

Die visuelle Kalenderoberfläche, die die verfügbaren Reiki-Behandlungen für den gesamten Monat anzeigt.
Die informativen Textelemente über dem Kalender klären den Benutzer über wichtige Details auf, die seine Entscheidung bei der Ausfüllung des Formulars beeinflussen werden.
Das Veranstaltungsanmeldeformular ist darauf ausgelegt, die Daten zügig zu erfassen und den Anmeldenden eine reibungslose Erfahrung zu bieten, ohne sie zu verwirren oder abzulenken.

#13 Presidio

Presidio Speech and Learning ist eine Kindertherapiepraxis in San Francisco, die sich auf Kinder spezialisiert hat, die support in den Bereichen Sprache, Lesen und Schreiben benötigen. Die mit Elementor erstellte Presidio-Website wurde in unserem November 2020 Showcase vorgestellt und für ihre pastellfarbenen Aquarell-Designmotive, die kindgerecht gestaltet sind, gelobt. Diese Details berücksichtigen die Zielgruppe des Zentrums: Eltern, die eine Beratung und aufmerksame, einfühlsame Einschätzung der individuellen Bedürfnisse ihres Kindes suchen.

Unsere bevorzugten Aspekte:

Die blaue und grüne Farbpalette, die im Buchungsformular verwendet wird, erweitert die aufmunternde Atmosphäre der Website auf den gesamten Ablauf der Terminbuchung.
Die Hintergrundfarbe der Formularfelder ermöglicht ein attraktives, einladendes Layout für einen angenehmen Übermittlungsprozess.

Formulare für kostenlose Testversionen

Kostenlose Testversionen werden von potenziellen Kunden und Klienten stets geschätzt. Vor allem die Hervorhebung der Vorteile und des Mehrwerts beim Ausprobieren Ihres Dienstes oder Produkts unterstützt Besucher bei ihrer endgültigen Entscheidungsfindung. Je mehr Anreize Sie ihnen bieten, fortzufahren, desto wahrscheinlicher ist es, dass sie dies auch tun werden.

#14 Hone

Ein weiterer Gewinner des November 2020 Showcases, Hone, ist eine Online-Lernplattform, die Live-Kurse zu Themen wie Teamführung, Management und zwischenmenschliche Kommunikationsfähigkeiten anbietet. Die Plattform fördert einen ermächtigenden, proaktiven Ansatz in Bezug auf Teamführung und interne Kommunikation. Diese Ideale werden erfolgreich durch das aufmunternde, energiegeladene rosa-lila Farbschema der Website und durch den Ton und die Stimme des geschriebenen Inhalts vermittelt.

Unsere bevorzugten Aspekte:

Der rosa Unterstreichungseffekt erzeugt einen visuellen Hinweis, um die Schlüsselwörter des Formulars hervorzuheben — dabei wird dem potenziellen Nutzer verdeutlicht, dass Hones 30-tägige Testphase vollkommen kostenfrei ist.
Die neben dem Formular platzierten Aufzählungspunkte identifizieren den Mehrwert und die zentralen Vorteile des Produkts.
Die für jeden Aufzählungspunkt verwendeten Symbole spiegeln die Benutzererfahrung und Benutzeroberfläche des Produkts wider.

Abonnement-Formulare

Sobald Sie Ihren Nutzer davon überzeugt haben, dass Ihr Inhalt das Abonnieren wert ist, verlässt er sich darauf, dass Sie Inhalte liefern, die er weiterhin lesen möchte. Transparenz bezüglich dessen, was Sie ihm zu senden beabsichtigen, kann stets von großem Nutzen sein, damit er weiß, was zu erwarten ist, und sich darauf freut.

#15 Codepuffin

Codepuffin ist die Geschäfts- und Portfolio-Website von Amy Nortje, einer in Neuseeland ansässigen Webentwicklerin. Amy hat ihre Website mit Elementor erstellt, wo sie ihre Dienstleistungen auflistet und ihr Portfolio sowie ihren persönlichen Blog präsentiert. Amys Blog-Einträge konzentrieren sich auf ihre „gelernten Lektionen“ aus verschiedenen Projekten und Kundenbeziehungen und dienen als persönliche, informelle Quelle von Erkenntnissen und support für ihre Leser.

Unsere Lieblingsaspekte:

Der Inhalt und die Sprache des Anmeldeformulars stimmen mit der Botschaft des Blogs selbst überein: humorvolle Anekdoten, die mit wertvollen professionellen Einsichten verwoben sind.
Die Überschrift des Formulars, „Möchten Sie etwas Cooles?“ kommt direkt auf den Punkt. Diese Frage formuliert den Nutzen für den Benutzer, sich für den Newsletter anzumelden, in einem konversationellen Ton und schafft so eine Verbindung zum Besucher, die Interesse an Amys Einsichten und vielfältigen Erfahrungen weckt.

Ein Meisterwerk gestalten

Es besteht kein Zweifel daran: Nichts ist befriedigender als ein Dashboard, das erfolgreiche Formularübermittlungen anzeigt. Nachdem wir von den Besten gelernt haben, kann man mit Sicherheit sagen, dass das Beste noch bevorsteht. Sie sind dazu bestimmt, im Laufe Ihrer Webentwicklungskarriere zahlreiche Website-Formulare zu erstellen, und nachdem Sie nun 15 Kunstwerke der Website-Formulargestaltung gesehen haben, ist es an der Zeit, das Webformular Ihrer Träume zu konzipieren, zu gestalten und zu entwickeln.

Originally posted 2021-05-03 04:00:00.

Webformular-Design: 15 Beispiele für die korrekte Umsetzung

Inhaltsverzeichnis