Was ein Online-Formular ist, ist für die meisten wohl selbsterklärend. Ein Formular in allgemeiner Form, oder wie man es von früher und manchen verstaubten Amtsstuben noch kennt, fragt strukturiert Daten ab. In vorgefertigten Datenfelder, die oftmals auch durch die Länge begrenzt sind, können dann die Inhalte eingetragen werden. Somit soll das Formular die Abfrage von Informationen, deren Übermittlung und Weiterverarbeitung vereinfachen. Das was man vom Papierformular kennt, wurde auf die digitale Welt des Internets übertragen und das Online-Formular war geboren.
Vorteile Online-Formular gegenüber Papierformular
Aufgrund der vielen programmiertechnischen Lösungen bietet das Online-Formular natürlich immens viele Vorteile gegenüber dem Papierformular. Der Einsparung von Papier mag man ein wenig kritisch sehen, da dem gegenüber der CO2-Verbrauch für die Bereitstellung der Internet-Infrastruktur für das Online-Formular steht. Aber der große Vorteil ist, dass überhaupt kein Papier ausgetauscht werden muss, da das Online-Formular über das Internet ständig verfügbar ist. Die eingetragenen Daten lassen sich digital übermitteln und können somit direkt, zum Beispiel in Datenbanken oder bestimmte Algorithmen, weiterverarbeitet werden. Demgegenüber steht oftmals ein lästiges Abtippen aus dem Papierformular und Verwalten der Formulare in Ordnern, Archiven, Dokumentationsstellen. Ein Online-Formular kann man an mehrere Empfänger oder Bearbeiter gleichzeitigt verteilen. Das Papierformular muss dafür kopiert werden oder einen Lauftag einlegen.
Ein weiterer Vorteil ist, dass man die Dateneingabe kontrollieren kann. Man kann zum Beispiel Pflichtfelder festlegen, die zwingend ausgefüllt werden müssen. Oder man kann die Richtigkeit der Dateneingabe überprüfen, zum Beispiel, ob die eingegeben Daten im Feld E-Mail oder Telefonnummer auch wirklich die Form einer E-Mail oder Telefonnummer haben. Darüber hinaus sind Längenbeschränkungen eines Formularfeldes möglich, um die Anzahl der eingegebenen Zeichen zu begrenzen.
Synonyme Online Formular
Für das Online-Formular werden häufig auch die folgenden Begriffe verwendet. Alle diese Begriffe meinen eigentlich dasselbe.
- Webformular
- Internetformular
- HTML-Formular
- HTML5-Formular
Typen und Arten eines Online Formulars
Eine technische Kategorisierung von Online-Formularen gibt es nicht, da die meisten Formulare auf HTML beruhen. Die weitere Datenverarbeitung nach dem Absenden kann sich jedoch unterscheiden. So kann man die Daten einfach per E-Mail weiterleiten und versenden, man kann diese in eine Textdatei oder XML-Datei speichern oder in einer Datenbank speichern. Die Datenbankspeicherung ist natürlich immer zu empfehlen, wenn man alle Daten zentral benötigt, um diese später auswerten zu können, zum Beispiel für Statistiken.
Die verschiedenen Arten eines Online-Formulars lassen sich jedoch nach den jeweiligen Anwendungsfall unterscheiden.
Kontaktformular
Das wohl am häufigsten verwendete Formular im Internet ist das Kontaktformular. Hier hinterlässt man meistens nur einen Namen, Telefon oder E-Mail für die Kontaktaufnahme und eine kurz verfasste Nachricht zu seinem Anliegen. Das Kontaktformular ist eigentlich ein „must have“ für jede Webseite, da ein solches Online-Formular dem Webseitenbesucher, die Kontaktaufnahme sehr vereinfacht (Usability), ohne dass diese sein E-Mail-Programm öffnen muss oder sich in sein E-Mail-Konto extra einloggen muss.
Für den Webseitenbetreiber birgt das Kontaktformular auch einige Vorteile. Vermeidet er doch so einige Anrufe zu ggf. unpassender Zeit und kann sich mit der Beantwortung der Kontaktanfragen im Rahmen seines eigenen Zeitmanagements befassen.
Reservierungsformular
Das Reservierungsformular beinhaltet spezielle zugeschnittene Datenfelder, um eine Online-Reservierung durchzuführen. Somit dient es hauptsächlich Restaurants, Gaststätten und ähnliche Lokalitäten. So kann der Kunde unproblematisch eine Reservierungsanfrage stellen und kurzerhand eine Bestätigung erhalten. Auf Seiten des Restaurantbetreibers, kann man im Hintergrund so ein Reservierungssystem einsetzen, welches automatisch eine Tischzuweisung macht, automatisch die Bestätigung heraussendet und den Tisch für weitere Reservierungen blockiert. Wichtige Felder sind hier, neben den persönlichen Daten, natürlich die Anzahl der Personen, die Uhrzeit und ggf. der Anlass.
Terminanfrage-Formular
Ein Online-Formular für eine Terminvereinbarung hat sehr weitreichende Anwendungsfälle. Wo immer eine Dienstleistung angeboten wird und Kunden auf den Auftraggeber oder umgekehrt zugehen wollen, wird ein Gesprächstermin vereinbart. Das kann ein Zahnarzt- und Friseurtermin sein genauso wie der Termin beim Vereinsvorsitzendem oder Klassenlehrer des Juniors. Das Terminanfrage-Formular benötigt somit auch bestimmte Datenfelder, die sich auf den Termin beziehen. Das sind im Speziellen ein Datumsfeld und ein Uhrzeitfeld. Ggf. noch ein Auswahlfeld für den Wochentag, der vorzugsweise am besten passt. Persönliche Daten wie E-Mail oder Telefonnummer sind obligatorisch für Rückfragen und weitere Terminabstimmungen.
Buchungsformular
Das Buchungsformular dient der Buchungsanfrage. Solche Online-Formulare werden hauptsächlich von Betreibern einer Ferienwohnung, eines Hotels, eines Campingplatzes oder eines Vereinsraums eingesetzt. Es ist ähnlich einer Reservierung nur mit dem Unterschied, dass es sich in den meisten Fällen um Übernachtungen handelt, die über mehrere Tage andauern. Wichtige Datenfelder eines solchen Formulars sind neben den obligatorischen persönlichen Daten für Rückfragen, der An- und Abreistage sowie die Anzahl von Kindern und erwachsene Personen. Weitere Options- und Auswahlfelder können sich für besondere Wünsche oder Dienstleistungen ergeben, wie z.B.:
- Seeblick/Meerblick
- Nichtraucherzimmer
- Parkplatz
- Frühstück
Für weitere besondere Wünsche und Vereinbarungen sollte man auch immer ein Freittextfeld vorhalten.
Umfrageformular
Ebenfalls sehr häufig im Gebrauch ist das Umfrageformular. Das Umfrageformular dient dazu eine Umfrage oder eine Art Meinungsforschung zu betreiben. Man kann es ebenso verwenden, um zum Beispiel zwischen verschiedenen Personen oder Firmen eine Terminfindung á la Doodle zu organisieren. Eine Umfrage geht immer mit der Auswahl aus verschiedenen Optionen einher. Deswegen beinhaltet ein Online-Formular für eine Umfrage immer ein oder mehrere konkrete Fragestellungen sowie die zugehörigen Auswahlmöglichkeiten in Form von Optionsfeldern oder Auswahlfeldern.
- Welche dieser 5 Parteien würden Sie bei der nächsten Landtagswahl wählen?
- Welche dieser 3 Biermarken bevorzugen Sie?
Diese sind nur zwei beispielhafte Fragestellungen für eine Online-Umfrage.
Bewertungsformular
Das Bewertungsformular ist eine spezielle Form des Umfrageformulars. Mit dieser Art Online-Formular kann ein Kunde zum Beispiel eine Produktbewertung abgeben ggf. auch noch eine Rezension dazu verfassen. Auch am Abschluss eines Einkaufs- oder Buchungsprozess kann man eine Kundenbewertung abfragen, wie zum Beispiel:
- Wie hat Ihnen der heutige Einkauf gefallen?
- Wie zufrieden waren Sie mit Ihrem Aufenthalt?
- Ware Sie mit Ihrer heutigen Buchung zufrieden?
Da die meisten Menschen nicht viel lesen möchten, werden die Art der Bewertungen meisten visuell in Form von 1-5 Sternen abgegeben.
Anmeldeformular
Anmeldeformulare sind wieder sehr weit verbreitet unter den Online-Formularen, da es viele Dinge gibt für die man sich anmelden kann:
- Anmeldung bei einem Verein
- Anmeldung zur Teilnahme an einem Event
Die wohl bekannteste Form eines solchen Internetformulars ist die Newsletter-Anmeldung.
Grundaufbau eines Online-Formulars
Ein Onlineformular respektive Webformular beginnt und endet immer mit dem <form>-Tag. Das nachfolgende Code-Beispiel zeigt ein kleines Formular in welchem der Vorname und der Nachname eingegeben werden können. Die Eingabefelder sind vom Typ <input> und die Beschriftung des jeweiligen Feldes ist vom Typ <label>. Das Formular enthält zwei Buttons (<button>-Tags) mit welchen man die eingegebenen Daten zurücksetzen kann (Reset) oder senden kann (Submit). Bei Klick auf den Submit-Button, wird die Seite aufgerufen, die unter action definiert ist. Diese Seite übernimmt dann die Weiterverarbeitung der Daten. Dabei handelt es sich oftmals auch um PHP-Seiten.
<form action="send.html" id="contact">
<label class="h2" form="person">Name</label>
<label for="vorname">Vorname</label>
<input type="text" name="vorname" id="vorname">
<label for="surname">Nachname</label>
<input type="text" name="surname" id="surname">
<button type="reset">Zurücksetzen</button>
<button type="submit">Absenden</button>
</form>
Darüber hinaus gibt es viele weitere HTML-Tags und Attribute für spezielle Datenfelder eines Internetformulars, wie <textarea>, <select>, <option>, etc. Diese Datenfelder werden oft zusätzlich noch mit JavaScript kombiniert, wodurch browser-seitig, also bevor die Formulardaten abgesendet werden, verschieden Überprüfungen der eigegebenen Werte erfolgen.
Online – Formular erstellen
Das Grundgerüst zum Erstellen eines Online-Formulars ist oben gegeben. Mit ein wenig HTML-Erfahrungen kann man sich so ein eigenes Formular zusammenstellen. Jedoch gelangt man schnell an die Grenzen der Effektivität, wenn man auf diese Weise das gesamte Formular inkl. Design-Anpassungen, von Hand erstellen möchte. Das Online-Formular erstellt man sich am besten mit einem passenden Werkzeug, wie dem DA-FormMaker inkl. Formularvorlagen oder man holt sich vorgefertigte Formularvorlagen von Internetdiensten.
Tipps und Tricks rund um die Online-Formular-Erstellung
So verschieden, wie die Anwendungsfälle für Internetformulare sind, so unterschiedlich sind auch die Anforderungen an das Online-Formular. Ein paar Kniffe helfen dabei die gewünschten Funktionen in das Webformular einzubauen.
Dateitypen für Datei-Upload
Mit einem Online-Formular lassen sich auch Dateien hochladen. Jedoch möchte man meistens nicht alle Dateitypen zulassen, sondern nur bestimmte Dateien, wie Bild-Dateien, zulassen.
Unterschriftenfeld in Online-Formular.
Es gibt ebenfalls die Möglichkeit ein Unterschriftenfeld in ein HTML-Formular einzufügen. Damit kann man sich mehr oder weniger einen bestimmten Sachverhalt bestätigen lassen. Die Unterschrift wir am Desktop-PC per Mauszeiger vorgenommen. Bei Geräten mit Touch-Bedienung erfolgt die Unterschrift mittels einem passenden Stift oder per Finger.
Autovervollständigen der Ortangaben
Bei einem Webformular mit den Datenfeldern PLZ (Postleitzahl) und Ort kann man die Ortseingabe automatisch vervollständigen bei Eingabe der PLZ. Das erspart dem Benutzer Tipp-Arbeit und vermeidet darüber hinaus Falschschreibungen.
Randfarbe und Randstil eines Formularfeldes
Mittels CSS kann man die Randfarbe und den Randstill eines Formularfeldes den eigenen Gestaltungswünschen anpassen.
Werte an HTML-Formular übergeben
Dieser Artikel beschreibt, wie man Daten bzw. Wert beim Aufruf eines Webformulars übergeben kann, so dass zum Beispiel Formularfelder mit diesen Werten vorbelegt werden können.
Formularfeldrahmen mit runden Ecken
Schick und modern sehen Internetformulare aus, wenn der Rahmen der Formularfelder mit abgerundeten Ecken dargestellt wird. Dies sieht insbesondere auf mobilen Geräten gut aus. Aber man bedenke!: Design unterliegt einer Mode-Erscheinung; irgendwann könnten auch mal wieder recheckige Kanten modern sein.
Alle weiteren Kniffe für Online-Formular
- Zwei Formulare auf einer HTML-Seite
- Online-Formular in Magix Web Designer verwenden
- Formlardaten an Evernote senden
- DSGVO Abfrage in Online-Formular
- Kein Zoom des Webformulars
- Formularfeld mit aktuellem Datum und/oder Uhrzeit vorbelegen