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
The Form Assembly – Form Layouts
CSS Styling of forms, Stu Nicholls
Badboy Niceforms
Zugängliche Formulare
Subtraction: Free Form for All – Standardkonforme Online-Formulare
XHTML Standard Forms
Techniken und zusätzliche Funktionalität
Fun with forms – customized input elements
Styling Form Fields
AutoSuggest – An autocomplete text field with Ajax
Really easy field validation with Prototype
Formulare und Umfragen online erstellen
Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Wufoo – Build HTML Forms, Online Surveys and Invitations
JotForm – a web based WYSIWYG form builder
FormLogix – Create web forms for free
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Großartige Sammlung. Vielen Dank!
Mal wieder eine sehr schöne Zusammenstellung.
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.
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
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.
Tolle Sammlung. Alle Formulare sehen eigntlich recht ordentlich aus; doch das erste ist mE am ansprechendsten.
Warum zum T…. legt Ihr Euere Links immer auf “_top” ?
Mir ist ein neues Fenster lieber als ewig zurück zu klicken.
@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.
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
also wegen einem gut gestalteten formular, werde ich kein stammbesucher einer seite.
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Eine englische Version dieses Artikel.
Bin bei digg drüber gestolpert.
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*
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.”
klasse Zusammenstellung! Hat mir sehr weiter geholfen!
Geniale Übersicht! Danke!
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