14 – Grundlagen HTML & CSS: Erstellung eines einfachen Kontaktformulars

Unsere erste eigene Internetseite ist nun so gut wie fertig. Was noch fehlt ist ein Kontaktformular. In dieser Video-Lektion erstellen wir ein einfaches Formular. Nach dem Absenden des Formulars erhalten sowohl der Absender, als auch der Empfänger eine Email. Der Absender erhält in der Regel eine Bestätigungs-Email; der Empfänger eine Email mit allen Angaben des Formulars. Natürlich können Sie auch dem Absender alle gemachten Informationen in Kopie per Email zukommen lassen.

Neben dem versenden einer Bestätigungs-Email sollte dem Absender auch eine Bestätigung des erfolgreichen Versendens der Online-Anfrage am Bildschirm angezeigt werden. Der Grund dafür ist, dass der Versandt einer Email (auch der Bestätigungsemail) zeitlich verzögert erfolgen kann. D.h. nach dem absenden einer Anfrage, können durchaus fünf Minuten oder mehr vergehen, bis die Email endlich im Postfach eingeht. Die technischen Hintergründe dazu will ich an dieser Stelle nicht weiter erörtern. Wichtig ist nur, dass Ihnen diese Problematik bewusst ist.

Im Sinn der Nutzerfreundlichkeit / Usablity von Internetseiten ist es in jedem Fall wünschenswert, dem Benutzer einer Internetseite eindeutiges Feedback zu geben, ob etwas funktioniert hat und wenn nicht, was die Gründe dafür gewesen sind und wie dies behoben werden kann.

Die Nutzung von Kontaktformularen gegenüber einfachen Email-Adressen hat folgende Vorteile:

  • Auch Nutzer ohne eine eigene Email-Adresse können ein Formular ausfüllen und Ihnen somit eine Email zukommen lassen (sofern „Email“ kein Pflichtfeld ist)
  • Sie können Pflichtfelder vorgeben, also Angaben abfragen, die Sie in jedem Fall zur Bearbeitung und Beantwortung einer Anfrage benötigen. Bei einer einfachen Email sind Sie darauf angewiesen, dass der Absender von sich aus alle notwendigen Daten mitteilt.

In diesem Zusammenhang zeige ich Ihnen typische HTML-Formular-Felder. Dazu zählen unter anderen:

  • Input-Feld vom Typ „radio“
  • Input-Feld vom Typ „text“
  • Input-Feld vom Typ „submit“
  • Input-Feld vom Typ „reset“
  • HTML-TAG „Textarea“ für Nachrichteninhalte