Formulare

Formulare und Umfragen: Moderne Lösungen

7. November 2006
von

In der Ära des Web 2.0 wird dem Umgang mit Seitenbesuchern Priorität eingeräumt. Wer im Mitmach-Web aktiv werden soll, wird durch attraktive Schaltflächen, auffallende Werbung und die Kraft des kreativen Denkens zu Formularen geführt – der erste Kontakt mit dem potenziellen Kunden geschieht dabei über Anmeldeformulare oder Fragebögen. Doch damit ein Gast zum Stammbesucher mutiert, muss das Formular ansprechend gestaltet sein. Die neue Designkultur bietet zahlreiche standardkonforme Lösungen an. Hier also moderne Techniken zur Realisierung von Formularen und Umfragen im Überblick:

Formulare gestalten

Prettier Accessible Forms
Screenshot

The Form Assembly – Form Layouts
Screenshot

CSS Styling of forms, Stu Nicholls
Screenshot

Semantic Horizontal Forms
Screenshot

Trimming form fields
Screenshot

Badboy Niceforms
Screenshot

Functional Pretty Forms
Screenshot

CSS-Only, Table-less Forms
Screenshot

Zugängliche Formulare

Subtraction: Free Form for All – Standardkonforme Online-Formulare
Screenshot

Accessible CSS Forms
Screenshot

Form Layout Templates
Screenshot

Style Web Forms Using CSS
Screenshot

XHTML Standard Forms
Screenshot

Techniken und zusätzliche Funktionalität

Form Help without Popups
Screenshot

Fun with forms – customized input elements
Screenshot

Styling Form Fields
Screenshot

AutoSuggest – An autocomplete text field with Ajax
Screenshot

Really easy field validation with Prototype
Screenshot

Scrollable Checklists
Screenshot

Formulare und Umfragen online erstellen

Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Screenshot
Screenshot

Wufoo – Build HTML Forms, Online Surveys and Invitations
Screenshot

Screenshot

JotForm – a web based WYSIWYG form builder
Screenshot

Accessify Form Builder
Accessify

FormLogix – Create web forms for free

Formlogix

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.

29 Kommentare zu „Formulare und Umfragen: Moderne Lösungen
  1. felyx am 7. November 2006 um 06:49

    Großartige Sammlung. Vielen Dank!

  2. [...] Dr. Web hat eine Sammlung zum Thema »Formulare und Umfragen: Moderne Lösungen« zusammengestellt und veröffentlicht. [...]

  3. Nils am 7. November 2006 um 09:12

    Beim häufigen Surfen schnappt man ja immer wieder Anleitungen für Formulare auf. Einige aus der Sammlung kannte ich somit schon – aber die Idee, ein Sammelsurium zu erstellen ist klasse.

  4. Sebastian am 7. November 2006 um 09:38

    Also wenn man nach den Bildern geht, ist das zweite flasch verlinkt. Das hier sieht genauso aus wie das Bild:Q

    http://www.skyrocket.be/lab/semantic_horizontal_form.html

  5. nico65 am 7. November 2006 um 09:49

    Mal wieder eine sehr schöne Zusammenstellung.

  6. lückenbeißer am 7. November 2006 um 10:20

    Ja, schöne Sachen – Danke für die Zusammenstellung. Aber es sind immer nur Ausschnitte! Macht mal eine ganze Seite davon; ein Formular mit 30+ Eingabefeldern wird nie gut aussehen, entweder ist es dröge oder überladen und unübersichtlich. Und ein Kunde, der 30+ Datenfelder auf (s)einer Seite will, der ist _leicht_ zu irritieren und erwartet dasselbe (meist noch Schlimmeres) von seinen Kunden. Ausser “Standardkonforme Online-Formulare” (Nummerierung wäre nett gewesen ;-) ist von den Designsen einem ‘seriösen’ Kunden schwerlich was zu verkaufen – meine Erfahrung.

  7. micha am 7. November 2006 um 10:55

    Tolle Sammlung. Alle Formulare sehen eigntlich recht ordentlich aus; doch das erste ist mE am ansprechendsten.

  8. [...] » Website besuchen… [...]

  9. Manfred am 7. November 2006 um 22:12

    Warum zum T…. legt Ihr Euere Links immer auf “_top” ?
    Mir ist ein neues Fenster lieber als ewig zurück zu klicken.

  10. Xel am 8. November 2006 um 08:35

    @Manfred:
    Das ist ganz einfach: Wer ein neues Fenster will, kann sich eins machen – wer keines will kann das aber auch. Ansonsten hat der User keine Wahl. Ich hasse Seiten, die mir ein neues Fenster aufzwingen.

    Back to Topic:
    die “Badboy Niceforms” haben ihren Namen “Badboy” wirklich verdient.

    So hüpsch sie sind, die Usability leidet bei Ihnen unnötigerweise sehr!
    Wieso kann ich den Radiobutton nicht auswählen? Weil ich auf den Text klicken muss – aber wen interessiert das schon? Wenns nicht geht, benutzt mans halt nicht.
    Wieso kann ich die Häckchen nicht setzen – das selbe Spiel!
    Wieso muss ich bei ner Auswahlbox plötzlich auf den Pfeil nach unten drücken, damit sie aufgeht? (Accessability – der Pfeil ist kleiner wie der Rest der Box!)
    Das einzige was auf Anhieb funktioniert sind die Texteingabefelder – das ist schade, denn das Design ist wirklich ansprechend.

  11. Formulare gestalten - unser blog am 8. November 2006 um 09:11

    [...] Dr. Web hat mal wieder eine tolle Sammlung an brauchbaren Dingen verfasst. Dieses Mal dreht sich alles um das Gestalten und Verbessern von Webformularen. [...]

  12. Pedrito am 8. November 2006 um 10:47

    Ich höre jetzt da einige über Kleinigkeiten motzen, dabei sind das nur Anregungen. Das Design müsst ihr natürlich selber noch anpassen, was kein Problem ist, wenn die CSS-Vorgaben da sind. Ebenso kann man auch den Eventhandler auf die Auswahlbox und die Options legen, was auch keine Schwierigkeit darstellen sollte und ich ebenfalls tun würde.

    mfg
    Peter

  13. aseDevBlog » Formulare im Web 2.0 am 8. November 2006 um 22:25

    [...] Bei Dr. Web (Link) wurde eine umfangreiche Sammlung mit gut gestalteten Formularen vorgestellt. Für eigene Projekte lassen sich daraus viele gute Ideen ableiten. Ebenso dabei sind Formulargeneratoren die es zulassen, für die eigene Homepage Formulare zu erstellen und diese dort einzubinden. Gut zu erkennen ist auch die neue (oder nicht mehr ganz so neue) Designsprache des Web 2.0. [...]

  14. Mein Name ist Hase am 10. November 2006 um 14:08

    also wegen einem gut gestalteten formular, werde ich kein stammbesucher einer seite.

  15. Sven am 13. November 2006 um 08:55

    http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

    Eine englische Version dieses Artikel.
    Bin bei digg drüber gestolpert.

  16. Basti am 17. November 2006 um 15:53

    Leute, ich bin echt begeistert von euch. Jedes mal wenn ich einen Eintrag in eurem Blog lese kriege ich geradezu ein Kribbeln in den Fingern, das mich zwingt Dreamweaver zu öffnen und sofort die Anregungen, die man hier kriegt umzusetzen.
    So eine coole Sammlung von aktuellen Webdesign-Neuerungen, denen man schon mal flüchtig begegnet ist (aber natürlich schon längst wieder vergessen hat wo) wie eure gibt es wirklich kein zweites Mal. *applaudier*

  17. [...] Dr. Web hat eine umfangreiche Sammlung von verschiedensten Formularlösungen vorgestellt: Formulare und Umfragen: Moderne Lösungen [...]

  18. [...] Dr.Web hat eine Übersicht erstellt, und auch Rand Fishkin von SEOMoz hat eine Untersuchung veröffentlicht. [...]

  19. [...] Das Dr. Web Weblog zeigt ebenfalls, dass es mehr als nur eine Lösung gibt Formularelemente – besonders unter Verwendung der spannenden Ajax-Techniken zu verwenden. Im Smashing Magazine gibt es das ganze noch einmal auf Englisch. [...]

  20. [...] Freundliche Forms und Umfragen. Trackback URL [...]

  21. c2uk am 1. Dezember 2006 um 19:46

    Es hat mich via stumble upon mal wieder hierher verschlagen. Die Liste ist nicht schlecht, aber was mich stört ist die Vielzahl die hier einfach nur so aufgelistet wird, eine kurze Beurteilung plus Stärken und Schwächen würde dem Artikel noch etwas Tiefe geben.

    @Sven
    Dr.Web und Smashing Magazine sind fast ein und das selbe, ich zitiere von dort:

    “Smashing Magazine is maintained by Sven Lennartz, the owner of the Dr. Web Magazine and Vitaly Friedman, the creator of The Web Developer’s Handbook.”

  22. [...] » Formulare und Umfragen: Moderne Lösungen – Dr. Web Weblog Posted in bookmarks | Trackback | del.icio.us [...]

  23. Footer Parade | Dr. Web Weblog am 9. Januar 2007 um 00:48

    [...] Jedes Designelement ist wichtig. Egal ob es sich um Formulare, Tabellen, Schriftarten, Überschriften, Navigationsmenüs oder Kommentare handelt: ein rundes Konzept eine sorgfältige Gestaltung und visuell ansprechende Form. [...]

  24. [...] ganz interessant, um sich Anregungen zu holen: Formulare und Umfragen: Moderne Lösungen | Dr. Web Weblog Mario __________________ Webstandards

  25. Ruben am 22. November 2008 um 18:57

    klasse Zusammenstellung! Hat mir sehr weiter geholfen!

  26. Auyana am 24. November 2008 um 12:16

    Geniale Übersicht! Danke!

  27. Stefan am 8. Oktober 2009 um 09:24

    Hallo Vitaly,

    bin gerade erst mit der Aufstellung in Kontakt gekommen. Sehr schön! Aber gibt es vielleicht ein “Update” nach heutigen Maßstäben?

    Liebe Grüße
    Stefan

  28. [...] Bei Dr. Web findet ihr z.B. moderne Lösungen für die Gestaltung von Formularen. http://www.drweb.de/magazin/formulare-und-umfragen-moderne-losungen/ [...]

  29. [...] zum Laufen zu bringen (oder gegen Spam abzusichern), ist das hier doch mal was Erfreuliches: Formulare und Umfragen: Moderne Lösungen lautet der Titel eines aktuellen Beitrags bei – Dr. [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!