1. Startseite
2. Design
3. Formular

Vergleich Formular erstellen: Was ist ein Online-Formular?

Foto: VisualGeneration / depositphotos Vereinfacht dargestellt, versendet ein Web- oder Online-Formular Daten an einen Webserver. Dieser verarbeitet sie, leitet sie per E-Mail weiter oder speichert die Eingaben in einer Datenbank. Die Daten gibt der Nutzer über verschiedenartig ausgestaltete Eingabemasken auf einer Webseite ein.

Kontaktbereiche sind ein typischer Anwendungsbereich, genutzt werden Formulare darüber hinaus auch an vielen anderen Stellen: Unter anderem Suchmaschinen, Webmail-Programme, Online-Shops oder Webseiten mit Registrierungs- und Login-Möglichkeit bedienen sich ihrer. Wenn Sie also überlegen, ob Sie für Ihr Webprojekt ein Formular brauchen, denken Sie dabei nicht nur an die Kontakt-Seite: Vielleicht möchten Sie den Bewerbungsprozess Ihres Unternehmens vereinfachen oder den Besuchern Ihrer Webseite eine personalisierte Vorauswahl Ihrer Angebote ermöglichen.

Formular programmieren: Wie das Formular technisch entsteht

Sie können „Baukästen“ oder andere Online-Dienste nutzen, die mal kostenlos und mal gegen eine geringe Gebühr zu haben sind, um Ihr Formular zu erstellen - oder es professionell und auf Ihre Bedürfnisse zugeschnitten programmieren (lassen). Letzteres empfiehlt sich immer bei Projekten, bei denen es auf Sicherheit, Stabilität und vollständige Kontrolle über die gespeicherten Daten ankommt. Für die Entwicklung und Programmierung können unterschiedliche Techniken zum Einsatz kommen.

HTML ist der Grundstock des Webformulars, damit werden seine Elemente definiert und die Benutzerschnittstelle eingerichtet, in der ein Anwender später seine Daten eingeben kann. Dazu wird ein Server benötigt, auf dem diese Daten verarbeitet werden können. Verschiedene so genannte serverseitige Programmiersprachen kommen dabei zum Einsatz wie Perl, Python oder Ruby; bei den meisten Webanwendungen wird heutzutage jedoch auf PHP oder Java gesetzt. Beide gelten als bewährte, schnelle und zuverlässige Programmiersprachen, die prädestiniert sind für den Einsatz bei Webprojekten.

Formular Design: Die Elemente von Formularen

Für die Formulargestaltung stehen eine Reihe von unterschiedlichen Eingabefeldern zur Verfügung, die je nach Art der gewünschten Aktion ausgewählt werden: Soll der Nutzer beispielsweise einen Text eingeben (wie seinen Namen oder eine Adresse), oder kann er aus verschiedenen Optionen etwas auswählen?

Die gebräuchlichsten Formularelemente sind:

• Texteingabefelder, ein- oder mehrzeilig
• Radiobuttons (eine Auswahl aus mehreren Möglichkeiten treffen)
• Checkbuttons (mehr als eine Auswahl aus verschiedenen Möglichkeiten treffen)
• Felder, die bestimmte, vordefinierte Eingaben verlangen (wie Passwort, Telefonnummer, Datum)
• Upload-Felder (zum Hochladen von Dateien)
• Dropdown-Listen (zur Auswahl einer oder mehrerer Möglichkeiten aus einer Liste)
• mit einer Funktion hinterlegte Buttons (beispielsweise zum Absenden des Formulars)

Welches dieser Elemente Sie benötigen, hängt also davon ab, welche Daten Sie von Ihren Nutzern erfassen möchten. Ganz einfache Kontaktformulare kommen mit einigen wenigen Texteingabefeldern aus, Online-Shops benötigen für den Bestellvorgang meist verschiedene Felder. Hier und bei anderen Anwendungen sind beliebig komplexe Kombinationen denkbar.

Mithilfe von Attributen bekommen die Elemente eine eindeutige Bezeichnung oder zusätzliche Angaben zur besseren Kennzeichnung und Unterscheidung. Damit lassen sich beispielsweise auch Zeichenlängen festlegen, um Eingabefelder zu begrenzen, oder Elemente als unbedingt auszufüllen kennzeichnen.

Layout Online-Formular: Usability beachten

Allzu umfangreich sollte das Web-Formular aber besser nicht werden. Denn wer bei der Gestaltung und Programmierung nicht auf Usability-Kriterien – also Regeln zur Benutzungsfreundlichkeit – achtet, bekommt langfristig Probleme: Gerade bei Online-Shops sind die Abbruchquoten bei der Nutzung von Formularen sehr hoch. Aber auch bei anderen Webseiten kann dies passieren. Häufig liegt es daran, dass das Formular

• unübersichtlich ist,
• unverständliche oder komplizierte Texte und Formulierungen enthält,
• keine Benutzerführung anbietet (zum Beispiel eindeutig beschriftete Elemente mit Erklärungen für den Nutzer),
• viel zu viele Daten abfragt (und zu viele davon als Pflichtangaben),
• insgesamt zu umfangreich ist und gescrollt werden muss,
• unverständliche Fehlermeldungen ausgibt,
• nicht ansprechend gestaltet ist.

Anders ausgedrückt: Wenn der Web-Besucher den Eindruck gewinnt, dass das Ausfüllen des Formulars einen größeren Aufwand bedeutet als den Nutzen, der ihm daraus entstehen könnte, lässt er es lieber bleiben.

Online-Formular: Mit CSS gestalten gestalten

Auch wenn das Formular in erster Linie eine Programmieraufgabe ist, sollte der Gestaltung ausreichend Aufmerksamkeit gewidmet werden. Denn das Design unterstützt den Nutzer dabei, Informationen schnell zu finden, das Formular richtig auszufüllen und diese Aufgabe schnell, einfach und ohne Fehler abzuschließen.

Hierfür kommt CSS zum Einsatz. Das ist eine Formatierungssprache, mit deren Hilfe das Design von Webseiten und allen ihren Elementen entsteht. Auch ein Online-Formular lässt sich damit ansprechend und nutzerfreundlich gestalten. Ideal ist es, wenn das Formular das Corporate Design Ihres Unternehmens beachtet. Denn wenn Sie als Kunde eine Firma betreten, in der ein wesentlicher Teil komplett anders aussieht als der Rest, wirkt das ziemlich befremdlich. Das Gleiche gilt für den Internetauftritt – überall sollte Konsistenz im Design herrschen, auch bei Web-Formularen. Zumindest sollten diese in einem vergleichbaren Stil gehalten sein. Ein Luxus-Shop mit einem Standardformular vom Billig-Anbieter, der auch noch nervige Werbung einblendet – das passt einfach nicht.

Mit CSS können sämtliche gestalterischen Details des Formulars angepasst werden: Farben, Schriften und Schriftgrößen, Hintergründe, aber auch die Gruppierung von zusammengehörenden Elementen, Abstände, Fehlermeldungen, Orientierungshilfen und Hervorhebungen.

Jetzt geht die Post ab: Der Formular-Versand

Bevor das Formular endgültig abgeschickt werden kann, sollte eine Prüfung der eingegebenen Daten erfolgen. Diese so genannte Validierung hilft, fehlerhafte Angaben gar nicht erst an den Server zu schicken. Bei einigen Formularelementen kann diese Prüfung auch bereits während der Eingabe erfolgen, zum Beispiel wenn ein Feld Ziffern verlangt, der Nutzer aber Buchstaben eingeben möchte. Andere Felder werden wiederum erst nach dem Abschicken des Formulars geprüft und geben dann bei Bedarf eine Fehlermeldung aus.

Die Validierung ist optional, liegt aber in Ihrem eigenen Interesse: Sie wollen beispielsweise Bestellungen nicht an Fantasieadressen schicken. Die Sicherheit spielt an dieser Stelle eine wichtige Rolle: Eine endgültige Prüfung aller Eingaben auf dem Server kann die Gefahr von Manipulationen und Angriffen verringern. Die Prüfung hilft aber auch den Nutzern, denn jeder kann sich einmal vertippen und zum Beispiel bei einer E-Mail-Adresse das @-Zeichen vergessen. Stimmen alle Eingaben, erfolgt die endgültige Datenübertragung.

FAQ: Fragen und Antworten zur Erstellung von Online-Formularen

In unseren FAQ beantworten wir die häufigsten Fragen und Antworten zu Formularen und geben Tipps um Formulare zu erstellen und rofesionell zu gestalten.

Wer braucht Online-Formulare?

Jeder, der seinen Kunden auf der eigenen Webseite eine Dialogmöglichkeit eröffnen und dafür bestimmte Daten abfragen möchte oder muss. Die Spanne reicht von einfachen Kontaktformularen über Upload-Möglichkeiten für Online-Bewerbungen bis hin zu komplexen Bestellformularen.

Was benötige ich für ein HTML-Formular?

Ein Grundgerüst aus HTML-Code, in dem sich je nach gewünschtem Ergebnis unterschiedliche Formularelemente wie Eingabefelder oder Radiobuttons befinden. Das Ganze sollte mittels CSS so gestaltet werden, dass es dem Corporate Design des Unternehmens entspricht und den Nutzer optimal durch das Formular führt. Und zum Schluss noch eine serverseitige Programmiersprache wie PHP oder Java, mit der die Daten des Formulars auf dem Webserver verarbeitet werden.

Was muss man bei einem Online-Formular noch beachten?

Vor allem Usability-Kriterien, die Sicherheit durch eine Prüfung der eingegebenen Daten – und die elementaren Gestaltgesetze. Das heißt, das Formular sollte verständlich und nutzerfreundlich sein und dabei gleichzeitig in einem modernen, dem Unternehmen angepassten Design, das dem Anwender die Dateneingabe so leicht wie möglich macht.

Was bringt mir ein Online-Formular?

Die Frage ist eher, was bringt ein in technischer und gestalterischer Hinsicht professionelles Formular. Denn nur wenn die Kunden das Formular verstehen und damit zurechtkommen, brechen sie seine Nutzung nicht ab – und das ist gut für die Conversion Rate. Die ist eine wichtige Kontrollzahl, um herauszufinden, ob Webseiten-Besucher auch zu Kunden werden.

Ratgeber: Die besten Tools für Online-Formulare im Vergleich

Web-Formulare bieten für Unternehmen und ihre Kunden viele Vorteile: Sie vereinfachen Prozesse und Arbeitsabläufe, können unabhängig von Öffnungszeiten genutzt werden und eröffnen eine Kontakt- und Dialogmöglichkeit. Werden sie professionell programmiert und mit einem ansprechenden Design ausgestattet, das den Webseiten-Besucher unterstützt, macht das nicht nur einen guten Eindruck und trägt zum positiven Image bei. Es sorgt vielleicht auch dafür, dass der Nutzer zum Kunden wird.

	Professionelle Gestaltung durch Grafikagentur	ab € 490,-	Zum Anbieter
	fiverr: Grafikdesign Freelancer finden	ab € 5,-	Zum Anbieter
	Envato Elements	ab € 15,-	Zum Anbieter
	DesignCrowd: Design-Wettbewerb ausschreiben	ab € 49,-	Zum Anbieter
	Easyprint: Online gestalten & drucken	ab € 49,-	Zum Anbieter
	Vistaprint: Online gestalten und drucken	ab € 15,-	Zum Anbieter
	shutterstock: Lizenzfreie Bilder kaufen	kostenlos	Zum Anbieter