Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Video-Tutorial: Bestehendes Kontaktformular mit HTML5 aufpeppen

Langsam werde ich mit der Screencasting-Software etwas warm und das Aufnehmen von Video-Tutorials bereit mir echt Vergnügen. Deshalb habe ich mich heute wieder einem spannenden Thema angenommen, und zwar den HTML5 Formularen.

Vor einigen Wochen hatte ich bereits einen komplexen Artikel dazu geschrieben: HTML5 Formulare – neue Input-Types, Attribute und mehr. Für das heutige Video wollte ich die Sache etwas praktischer angehen und habe mir einen Baustein geschnappt, der auf fast keiner Webseite fehlt; das Kontaktformular.

Aus Alt mach Neu – vollkommen abwärtskompatibel

Eine schöne Sache an HTML5 Formularen ist das Prinzip der Graceful Degradation. Dieses ermöglicht uns Webentwicklern bereits heute, ein breites Spektrum der uns zur Verfügung stehenden neuen Attribute oder Input-Types ohne schlechtes Gewissen einzusetzen. Verwendet man zum Beispiel das Email-Eingabefeld, so wird es in alten Internet-Explorer-Krücken einfach als normales Textfeld ausgegeben. Moderne Browser hingegen verstehen das Attribut richtig und erwarten die Eingabe einer Emailadresse.

Einen Zustand, den wir uns auch für bestehende Formulare zu Nutzen machen können. Innerhalb weniger Minuten ist ein altes Kontaktformular in ein modernes HTML5-Formular verwandelt. Der Nutzer alter Browser wird davon nichts mehr; es entstehen weder Fehler noch Mehrwert für ihn. Alle anderen profitieren hingegen von einem großen Plus an Benutzerfreundlichkeit. Und das beste: Wir Webentwickler sparen uns eine Menge Zeit!

Aber nun zum Video:

Wir immer empfehle ich euch natürlich direkt die 1080p-Variante im Fullscreen zu betrachten.

Der Quellcode

Altes Kontaktformular ohne HTML5-Elemente.

Neues Kontaktformular mit HTML5-Elementen.

Dieser Artikel wurde am 25.01.2012 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Hallo Tobias, wieder ein tolles Video Tutorial. Du greifst hier immer wieder Themen zu modernen Webtechniken auf. Gefällt mir sehr.

    Ich schätze es wird noch ein bisschen dauern bis sich die neuen HTML5 Möglichkeiten in den Kontaktformularen durchsetzen. Dies trotz der beschriebenen „Abwärtskompatibilität“. Es ist auf jeden Fall ein spannender Blick in die Zukunft.

  2. Hallo Stefan,
    das mit dem Namen nehme ich Dir jetzt aber Übel! *Spaß* ;-)

    Bis die neuen Techniken auch beim letzten „Webentwickler“ angekommen sind, wird noch einige Zeit ins Land streichen, da gebe ich Dir vollkommen Recht.

    Allerdings ist dies wirklich überhaupt kein Grund, heute schon auf die neuen Techniken (sofern sie so schön abwärtskompatibel sind wie hier) zu setzen!

    Gruß, Tobias, ähhh, Torben ;-)

  3. Echt gutes Tutorial!
    Ich bin ziemlicher Anfänger in Sachen Programmierung und habe jetzt ein bestehendes Kontaktformular, das mit altem html geschrieben wurde und einer PHP-Seite verknüpft war, nach html5 umgeschrieben.
    Wie funktioniert das jetzt, wenn Jemand auf meiner Website dieses Formular ausfüllt und abschickt, dass es auf meiner E-mailadresse ankommt? Vorher ging das ja mit dem PHP, und jetzt?? Es scheint, als fehlt jetzt die Verknüpfung dazu…
    Hoffentlich kannst du mir da helfen, ich brauch so bald wie möglich Hilfe.

    Danke!! und Liebe Grüße

  4. wieder ein schönes, kleines, anregendes tutorial :-)
    Viellecht könnte man für das telefonfeld auch input type=“number“ verwenden…

  5. Ich nutze auf meiner Website Fast Secure Contact Form. Wäre natürlich cool wenn man das durch einen reinen HTML 5 Code ersetzen könnte, aber ich glaube soweit bin ich noch nicht. Muss ich mich mal mit auseinandersetzen.

  6. Hallo Torben.

    Vielen Dank für das interessante Video. Hat mich einiges weitergebracht.

    Gibt es denn eine Möglichkeit das ausgefüllte Formular an unterschiedliche Emailadressen ( Empfänger ) zu schicken ? Also z.B. wenn das Formular von einem Deutschen ausgefüllt wird, soll es an deutscher@info.de geschickt werden und wenn ein Franzose das ausfüllt an franzose@info.de.

    Eventuell kann man das über die Abfrage des Browsers realisieren. Alternativ ein Eingabefeld, in dem der Besucher sein Land eingibt ? Hast Du ne Idee für ?

    Danke Dir.

    Gruß Nino

  7. Hi Nino,

    generell hat das Abenden der Email ja nichts mit dem Client (=HTML), sondern vielmehr mit dem Server (z.B. =PHP) zu tun.

    Auf Serverebene hast Du zum einen die Möglichkeit, eine Geo-IP-Abfrage zu machen um dadurch zu ermitteln, aus welchem Land der Besucher kommt. Dies ist aber nicht 100% verlässlich.

    Auf der anderen Seite spricht auch nicht gegen die Implementierung eines Auswahlfeldes in der Formular.

    Viele Grüße,
    Torben

  8. Hallo Torben.

    Vielen Dank für die schnelle Antwort. Ich denke die Sache mit dem Auswahlfeld klingt am besten. Jetzt muß ich nur nochmal googlen wie das genau geht – bin ziemlich neu auf dem Gebiet :-)

    Mach weiter so !

    Gruß,
    Nino

  9. Danke für die ausführliche Beschreibung für die Gestaltung einer Kontaktseite unter HTML 5. Frage: woher holt die Seite meine E-Mail Adresse als Empfänger der Nachrichten?
    Liebe Grüße
    Herbert

Schreibe einen Kommentar zu Stefan Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.