15 Beispiele für richtiges Webformular-Design

Wir haben diese Liste mit 15 Beispielen für Webformulare zusammengestellt, die Webgestaltung vom Feinsten zeigen. Diese inspirierenden Kunstwerke werden deine Kreativität anregen, benutzerfreundliche Funktionen und bewährte Verfahren auf jedes Website-Formular anzuwenden.

Website-Formulare sind ein wesentlicher Bestandteil jeder Website, Landing Page oder jedes E-Commerce-Shops. Ganz gleich, ob der Zweck des Formulars darin besteht, den Website-Besitzer zu kontaktieren, einen Fragebogen auszufüllen, sich bei einem Konto anzumelden, einen Artikel zu kaufen, sich für ein neues Konto anzumelden, eine Reservierung zu buchen oder sich für eine kostenlose Testversion anzumelden – jedes kleinste Detail des Designs und Layouts des Webformulars ist entscheidend. 


Vielleicht hast du dir in der Vergangenheit schon einmal diese Fragen gestellt: Welches Design-Layout ist für mein Formular am besten geeignet? Was wird die Nutzer am meisten ansprechen? Wie kann ich meine Designmotive und meine Markenidentität umsetzen? Sollte ich das Formular in einem Website-Popup platzieren oder wäre ein Formular in der Fußzeile besser geeignet? 


Bei der langen Liste der Website-Formulartypen und ihrer Anwendungsfälle kann es gelinde gesagt einschüchternd sein, herauszufinden, was bei der Gestaltung eines Formulars zu beachten ist. Sei versichert, dass die Erstellung eines leistungsstarken Website-Formulars bald eine stressfreie, herausfordernde und dennoch lohnende Erfahrung bei der Webgestaltung sein wird.


Um unsere Webdesign-Strategie und -Workflows zu unterstützen, haben wir eine Liste mit 15 Beispielen zusammengestellt, die dir zeigen, woraus die besten Formulare gemacht sind.

15 Unvergessliche Beispiele für Web-Formular-Design

Wir begeben uns jetzt auf eine Reise durch Website-Formulare in allen Formen, Farben, Layouts und Größen. Bereit dich darauf vor, von dieser Liste mit 15 Website-Formularen überrascht zu werden, deren Design und Struktur deine Fähigkeiten zur Webgestaltung revolutionieren werden.

Kontaktformulare

Wenn du unbedingt willst, dass jeder Benutzer auf „Absenden“ klickt, bevor er deine Website verlässt, kann dein Kontaktformular dieses Ziel erreichen oder auch nicht. Grundlegende Entscheidungen, wie z. B. ob und wann Animationen oder Fortschrittsanzeigen hinzugefügt werden sollen, wie groß oder fett die Überschriften sein sollen, wie breit die Formularfelder sein sollen – all diese Faktoren tragen zur Ausfüllrate eines jeden Formulars bei und wirken sich auf die Benutzerfreundlichkeit deiner Website aus.

#1 Brandingo

Brandingo ist eine armenische Design-Agentur und -Schule, die wir im Januar 2021 für unser Top 10 Elementor-Sites des Monats-Showcase ausgewählt haben. Die Brandingo-Website wurde erstellt, um „das Talent und das Wissen der Agentur in den Bereichen Design, Illustration, UI/UX und Branding für potenzielle Kunden und Studenten zu präsentieren.“

Was uns an der Website von Brandingo schon immer aufgefallen ist, ist der Einsatz von so vielen Bewegungs- und interaktiven Effekten, die alle wie ein Handschuh zusammenpassen. Sie beherrschen eindeutig die Kunst, ein Gleichgewicht zwischen ansprechenden interaktiven Funktionen zu finden, die für das menschliche Auge nicht zu viel sind.

Unsere Lieblingsdinge:

  • Die vielen Lottie-Animationen, die beim Scrollen auf der Seite erscheinen.
  • Der Textpfad, der um den kreisförmigen Hintergrund des Formulars kreist, sobald man das Ende erreicht hat.

#2 The Space Cube

Der Space Cube ist ein Schreibtisch-Organisationsprodukt, das von Carol Havener aus Sydney, Australien, entwickelt wurde. Das Produkt wurde für Hausbesitzer*innen und Büros entwickelt und befasst sich mit dem Problem der Organisation von begrenzten Räumen (z. B. einem Büroschreibtisch, einem Arbeitszimmer, einem Wohnzimmer der Familie usw.)

Carol hat ihre Produktwebsite mit Elementor erstellt und den WooCommerce-Builder für ihre E-Commerce-Website verwendet. In Anbetracht der breiten Zielgruppe ist die Produktwebsite in den Farben Weiß und Schwarz gehalten. Die Motive tragen dem modernen, schlanken und minimalistischen Design des Produkts Rechnung, und die Kontaktseite und ihr Formular erreichen das gleiche Ziel. 

Unsere Lieblingsdinge:

  • Die elegante Schriftkombination kombiniert kalligrafischen, handschriftlichen Stil mit der serifenlosen Schriftart „Bodoni“. 
  • Das raffinierte Hintergrundbild, das sich hinter dem soliden, quadratischen weißen Hintergrund des Formulars befindet. Dies erweckt den Anwendungsfall des Produkts wirklich zum Leben und erinnert Benutzer *innen auf subtile Weise daran, wie schön es ist, an einem Schreibtisch zu sitzen, der sauber und nicht überladen ist und Ruhe ausstrahlt.

 

#3 Metropolis Moving

Metropolis Moving ist ein New Yorker Umzugsunternehmen mit Sitz in Brooklyn, NY. Das Farbschema und das Design der Website verwenden Farben, die an New York City erinnern, wie z. B. gelbes Taxi, marineblau und grau, um die Essenz des maßgeschneiderten Service 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üllen kann, um ein Preisangebot zu erhalten. 


Unsere Lieblingsdinge:

  • Die auf der Karte eingezeichneten Routen- und Standortpunkte fangen die unvorhersehbare Erfahrung (den Weg) zwischen einem Umzug von einer Adresse zur anderen ein.
  • Die Formularfelder sind nach den Faustregeln für Webformulare gestaltet:

    • Minimale Anzahl von Formularfeldern
    • Linksbündige Formularfelder und Platzhaler
    • Einspaltiges Layout
    • Deutlich herausgearbeitete Schrittanzeige

Fragebogen-Formulare

Wenn du deinem Publikum Fragen zu seinen Interessen, Vorlieben, Zielen usw. stellst, ist das ein guter Weg, um einen Dialog herzustellen. Aber wie kannst du deine Fragen am besten präsentieren?
Solltest du eine informelle Atmosphäre schaffen? Welches Format ist für dein Publikum am besten geeignet? All diese Überlegungen sind gleichermaßen wichtig, doch die Möglichkeiten, wie man sie angehen kann, sind unglaublich vielfältig.

#4 Spotify Pets

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

Unsere Lieblingsdinge: 

  • Die anpassbare Dragbar-Animation, mit der der Nutzer die Eigenschaften seines Haustiers beschreiben kann, ist eine ansprechende Eingabemethode, die auch das Tippen überflüssig macht.
  • Die Fortschrittsanzeige fügt sich in den fröhlichen, illustrierten Hintergrund ein.
  • Das Fragebogenformular mit mehreren Bildschirmen hat eine Frage pro Bildschirm, wobei jeder Bildschirm sehr mobilfreundlich ist.

#5 RedBull

Red Bull ist ein international erhältliches Energiegetränk, dessen Slogan lautet „Red Bull verleiht dir Flügel“. Auf der Produktseite der Website von Red Bull wird der Besucher in ein interaktives Quiz über Nachhaltigkeit und Umweltsicherheit – zwei der wichtigsten Werte der Marke – eingebunden, das die Geschichte der Marke erzählt.

Unsere Lieblingsdinge:

  • Der Countdown-Timer für jede Frage erzeugt Spannung und Dringlichkeit, die Frage zu beantworten.
  • Die großen Auswahlbuttons machen die Antwortmöglichkeiten super zugänglich und leicht anzuklicken.
  • Das animierte Hintergrundvideo des Homepage-Quiz.

Anmeldeformulare

Anmeldeformulare sind eine unglaublich wichtige Komponente in der Schnittstelle deines Produkts oder deiner Dienstleistung. Die Benutzer*innen werden dieses Formular wahrscheinlich immer wieder sehen, und Vertrautheit und Einfachheit sind der Schlüssel. Dein Formular sollte einladend, intuitiv und geradlinig sein – und den Benutzer dennoch so sehr wie möglich begeistern. Oft sind es die kleinsten Details und Illustrationen, die viel bewirken können.

#6 gidimo

gidimo ist ein nigerianisches EdTech-Unternehmen, dessen Online-Lernplattform sich an Lernende aller Schichten und Lebensabschnitte richtet. Die Technologie der Plattform nutzt Gamification-Techniken und maßgeschneiderte User Journeys, die es „unterhaltsam und einfach machen, alles unterwegs zu lernen“.

Die von Elementor erstellte Website von gidimo (Gewinner unseres Showcase im März 2021) zeichnet sich durch ein klares Layout mit einer Slider-Galerie neben dem Anmeldeformular aus. Dies verleiht der Seite eine zusätzliche Ebene des Engagements und der Attraktivität: Die Nutze*innen können sich durch wechselnde Illustrationen bewegen, die die positive Ausstrahlung der Plattform verstärken.

Unsere Lieblingsdinge: 

  • Die Hintergrundfarbe des Schiebereglers wechselt zwischen Grün und Weiß, wenn der Benutzer durch die Seite navigiert.
  • Jede Zeile des Formulars hat die gleiche Breite, wodurch ein einheitliches, organisiertes Layout entsteht, das für Klarheit und Konsistenz sorgt.

#7 Snappet

Snappet ist eine Online-Bildungsplattform für Tablet-Geräte, die von Mathematiklehrern genutzt wird, um die Lernwege einzelner Schüler*innen zu personalisieren und gleichzeitig ihre Leistungen zu überwachen. Das Lernwerkzeug ist für Schüler im Grundschulalter gedacht, was durch die freundliche, farbenfrohe Gestaltung der Website und die Vektorillustrationen leicht zu verstehen ist.

Unsere Lieblingsdinge:

  • Der illustrierte Anwendungsfall auf der Anmeldeseite für Schüler*innen vermittelt eine emotionale Botschaft: Er erinnert die Schüler*innen an das ermutigende (wenn auch virtuelle) High-Five und die positive Stimmung, die sie bei der Nutzung der Plattform empfinden werden.
  • Das Typografieschema mit nur einer Schriftart verwendet Variationen einer Schriftart (verschiedene Farben und Größen). Um Monotonie zu vermeiden, wird durch die Verwendung von zwei verschiedenen Farben und Größen die Informationshierarchie zwischen den Textelementen verdeutlicht.

Produkt Landing Page Formulare

Produkt-Landingpages sind von entscheidender Bedeutung für die Gestaltung von Websites, da ein Großteil des Kaufverhaltens eines Besuchers direkt auf die Gestaltung der Produktseite zurückzuführen ist. Angesichts all der Informationen, die Verbraucher über jedes einzelne Produkt wissen wollen, muss die Entscheidung, was und wie auf jeder Produktseite enthalten sein soll, mit Sorgfalt getroffen werden.

#8 Bram

Bram, ein Gewinner unseres WooCommerce-Sites-Showcase, ist ein in Barcelona ansässiger Hersteller von handgefertigten Ledergeldbörsen. Das Layout der Produktseite hat uns besonders inspiriert (im Wesentlichen ein Anmeldeformular).

Unsere Lieblingsdinge: 

  • Die große Auswahl an Farben wird in einer Zeile angezeigt, so dass man nicht erst auf ein Dropdown-Menü klicken muss, um die einzelnen Farboptionen zu sehen.
  • Die Schaltfläche „In den Warenkorb“ ist leicht zu finden, da sie am Anfang des Inhalts platziert ist und nicht die letzte Komponente auf der Seite ist (nach den Produktdetails und den ausklappbaren Registerkarten).
  • Der reichlich vorhandene Weißraum auf der Seite macht die Produktdetails klar und lesbar, und die Lederdetails des Produkts sind leicht zu erkennen.

#9 ABATTOIR VÉGÉTAL

ABATTOIR VÉGÉTAL ist ein veganes Bistro und Lebensmittelgeschäft in Paris, Frankreich. Die E-Commerce-Website (erstellt mit Elementor und WooCommerce und Gewinner des Showcase im August 2020) bietet sowohl die Speisekarte des Bistros zum Mitnehmen als auch die des Lebensmittelladens, wo der Nutzer Zutaten und Gerichte auswählen und online bestellen kann.

Unsere Lieblingsdinge: 

  • Die Verwendung von benutzerdefinierten WordPress-Feldern; Die Produktseite und das Bestellformular enthalten alle grundlegenden Informationen zu den Gerichten in einem effizienten, ansprechenden Format.
  • Die ansprechenden Formate, die im WooCommerce-Warenkorb der Seite verwendet werden: Die Artikelanzeige sowie die Schaltfläche „In den Warenkorb“ sind mit einer hellen Hintergrundfarbe versehen, was dem Checkout-Benutzerfluss und dem gesamten Online-Einkaufserlebnis Spaß und Flair verleiht.
  • Die bunten Schriftarten und detaillierten Fotos vermitteln die verbalen und visuellen Informationen klar und deutlich – eine spannende Art, ein kulinarisches Einkaufserlebnis zu beginnen.

Anmeldeformulare

Ein erfolgreicher Anmeldeprozess erfüllt die Wünsche eines jeden Webentwicklers, der ein Website-Formular erstellt. Ist es also wirklich möglich, diesen Traum in die Tat umzusetzen? Alles ist möglich, aber die Schritte, die du unternimmst, um deine Besucher zufriedenzustellen, können große Auswirkungen haben. Jedes Detail, von der Sichtbarkeit der Schaltflächen bis hin zum Kontrast zwischen den Elementen, hat Einfluss auf die Ergebnisse der Formularübermittlung.

#10 Duolingo

Duolingo ist eine Website zum Sprachenlernen und eine mobile App. Als Marke hat sich das Unternehmen zum Ziel gesetzt, „Bildung kostenlos, unterhaltsam und für alle zugänglich zu machen“. Der oben gezeigte Bildschirm erscheint im Rahmen des Onboarding-Prozesses der Plattform, bei dem der Nutzer*innen sein Sprachlernziel festlegt und einen Lernpfad auswählt.

Unsere Lieblingsdinge: 

  • Die Avatare und Illustrationen im flachen Design, die auf der gesamten Website verwendet werden und als Schaltflächen für Miniaturansichten im Formular eingesetzt werden.
  • Das gerechtfertigte Rasterlayout strafft die sieben Illustrationen und verbindet ihre unterschiedlichen Größen, Farben und Formen miteinander.

#11 Stripe

Stripe ist eine Software zur Zahlungsabwicklung, die von E-Commerce-Websites und mobilen Anwendungen verwendet wird. Die Verwendung 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 und wird durch ein einfaches, aber ansprechendes Anmeldeformular erleichtert.

Unsere Lieblingsdinge: 

  • Der Schlagschatten um den Hintergrund des Anmeldeformulars unterscheidet zwischen dem Anmeldeformular und den Aufzählungspunkten auf der linken Seite der Seite.
  • Die übersichtlichen, prägnanten Aufzählungspunkte, die drei Hauptvorteile des Produkts nennen und den Mehrwert der Einrichtung eines Stripe-Kontos betonen.

Buchungsformulare

Erfolgreiche Online-Buchungsformulare gedeihen in einer positiven, ermutigenden Atmosphäre. Wenn deine Besucher*innen den Punkt erreichen, an dem sie sich über die Buchung deiner Dienstleistung informieren, musst du alles tun, um sie aufmerksam, interessiert und glücklich über das zu machen, was sie bald erleben werden.

#12 Be A Roshan

#12 Be A Roshan

Be A Roshan ist ein Energietherapie- und Meditationszentrum auf der Insel Mauritius. Die Elementor-Website von Be A Roshan bietet Kunden die Möglichkeit, online Termine und Veranstaltungen zu buchen. Die für die Website gewählten Designmotive (wie der Hintergrund der Homepage an einem sonnigen Tag) spiegeln die Atmosphäre der wohltuenden Reiki- und Meditationserfahrungen wider.

Unsere Lieblingsdinge:

  • Die visuelle Kalenderoberfläche, die die verfügbaren Reiki-Behandlungen für den gesamten Monat anzeigt.
  • Die informativen Textelemente oberhalb des Kalenders informieren den Benutzer über wichtige Details, die seine Entscheidung beeinflussen, wie er das Formular ausfüllen soll.
  • Das Formular für die Anmeldung zu einer Veranstaltung ist so gestaltet, dass die Daten schnell erfasst werden können und der Anmeldevorgang reibungslos verläuft, ohne den Benutzer zu verwirren oder abzulenken.

#13 Presidio

Presidio Speech and Learning ist eine Praxis für Kindertherapie in San Francisco, die sich an Kinder richtet, die Unterstützung in den Bereichen Sprechen, Sprache, Lesen und Schreiben benötigen. Die mit Elementor erstellte Presidio-Website wurde in unserem November-2020-Showcase vorgestellt und für ihre pastellfarbenen Aquarellmotive und ihr kinderfreundliches Design gelobt. Diese Details kommen der Zielgruppe des Zentrums entgegen: Eltern, die sich beraten lassen und aufmerksamen, einfühlsamen Input zu den individuellen Bedürfnissen ihres Kindes erhalten möchten.

Unsere Lieblingsdinge: 

  • Die blaue und grüne Farbpalette, die im Buchungsformular verwendet wird, trägt die positive Stimmung der Website in den gesamten Ablauf der Terminbuchung.
  • Die Hintergrundfarbe der Formularfelder ermöglicht ein attraktives, einladendes Layout für einen angenehmen Anmeldeprozess.

Kostenlose Testformulare 

Kostenlose Testversionen werden von potenziellen Kund*innen und Auftraggebern immer geschätzt. Vor allem die Betonung der Vorteile und des Mehrwerts, den das Ausprobieren deiner Dienstleistung oder deines Produkts mit sich bringt, hilft den Besuchern, ihre endgültige Entscheidung zu treffen. Je mehr Anreize du ihnen gibst, desto wahrscheinlicher ist es, dass sie sich für dich entscheiden.

#14 Hone

Hone, ein weiterer Gewinner des November 2020 Showcase, ist eine Online-Lernplattform, die Live-Kurse zu Themen wie Teamführung, Management und zwischenmenschliche Kommunikation anbietet. Die Plattform ermöglicht einen ermutigenden, proaktiven Ansatz für Teamführung und interne Kommunikation. Diese Ideale werden durch das fröhliche, energiegeladene Farbschema der Website in Pink und Lila sowie durch die Sprache und den Ton des schriftlichen Inhalts der Website erfolgreich vermittelt.

Unsere Lieblingsdinge: 

  • Der pinkfarbene Unterstreichungseffekt ist ein visueller Hinweis, der die Power-Worte des Formulars hervorhebt und dem potenziellen Nutzer verdeutlicht, dass die 30-tägige Testphase von Hone völlig kostenlos ist.
  • Die Aufzählungspunkte neben dem Formular heben den Mehrwert und die wichtigsten Vorteile des Produkts hervor.
  • Die Symbole, die für jeden Aufzählungspunkt verwendet werden, ähneln der Benutzererfahrung und der Schnittstelle des Produkts.

Abonnement-Formulare 

Sobald du deinen Nutzer*innen davon überzeugt hast, dass deine Inhalte es wert sind, abonniert zu werden, verlässt er sich darauf, dass du Inhalte lieferst, die er weiter lesen möchte. Eine transparente Darstellung dessen, was du ihm zu schicken gedenkst, kann viel dazu beitragen, dass er weiß, was ihn erwartet 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 und ihren persönlichen Blog vorstellt. Amys Blogeinträge konzentrieren sich auf ihre „Lessons Learned“ aus verschiedenen Projekten und Kundenbeziehungen und dienen ihren Lesern als sympathische, informelle Quelle für Einblicke und Unterstützung.

Unsere Lieblingsdinge:

  • Inhalt und Sprache des Anmeldeformulars stimmen mit der Botschaft des Blogs überein: humorvolle Anekdoten, die mit wertvollen beruflichen Erkenntnissen verknüpft sind.
  • Die Überschrift des Formulars, „Willst du etwas Cooles?“, bringt es direkt auf den Punkt. Diese Frage umrahmt den Nutzen, den der Nutzer aus dem Abonnement des Newsletters zieht, in einem unterhaltsamen Ton und schafft eine Beziehung zum Besucher, die das Interesse an Amys Einblicken und vielfältigen Erfahrungen weckt.

Ein Meisterwerk formen 

Es besteht kein Zweifel: Nichts ist lohnender als ein Dashboard, das die Ergebnisse erfolgreicher Formularübermittlungen anzeigt. Jetzt, wo wir von den Besten gelernt haben, können wir mit Sicherheit sagen, dass das Beste noch vor uns liegt. Im Laufe deiner Karriere als Webentwickler*in wirst du bestimmt viele Website-Formulare erstellen, und jetzt, wo du 15 Kunstwerke von Website-Formularen gesehen hast, ist es an der Zeit, dir das Webformular deiner Träume auszudenken, zu entwerfen und zu erstellen.

Übersetzt von Lisa Kraus
von Website Freiburg

Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/website-form-design-examples/