HTML Formular: Ein Kontaktformular in HTML erstellen

Marco Kratzenberg

Auch die einfachste Seite benötigt oft ein HTML-Formular. Damit kann der Besucher dann Daten eingeben und abschicken. Wir erklären euch, wie ihr in HTML ein Kontaktformular anlegt und in die Webseite einbindet.

HTML Formular: Ein Kontaktformular in HTML erstellen

In diesem kleinen HTML-Kurs möchten wir euch erläutern, wie ihr ein HTML-Formular selbst erstellen und erweitern könnt. Wichtig dabei ist auch, auf welche verschiedenen Arten so ein Formular verschickt werden kann. Denn das bestimmt u.a. den Aufbau eines Kontaktformulars in HTML (und vielleicht auch etwas PHP).

HTML-Formulare selber machen

Formulare haben in HTML einige besondere Elemente. Es gibt Textfelder und Buttons, Checkboxen und Pulldown-Auswahlmenüs. Die Grundlagen dazu solltet ihr beispielsweise im SelfHTML-Handbuch nachlesen. Wir müssen voraussetzen, dass ihr bereits grundlegende Regeln der HTML-Programmierung beherrscht. HTML-Formulare werden, wie viele HTML-Elemente, eingeleitet und beendet. Ihr startet ein solcher Formular mit <form … und beendet es mit </form>.

Die einfachsten HTML-Kontaktformulare bestehen aus einer Startzeile, die das Formular über das E-Mail-Konto des Besuchers abschickt, einigen Textfeldern, einem Absendebutton und dem abschließenden Tag. Zum Beispiel so:

<form action="mailto:empfaenger@ mailadresse.de"
method="post">
Ihr Vorname und Name?<br>
<input type="text" name="NameVorname" value=""
size="30" maxlength="50">
<input type="Submit" name="" value="Absenden">
</form>

html-formular-eingabe-ausgabe
Und so sieht das Ganze dann aus. Links seht ihr das Formular und rechts die E-Mail, die das Formular dann über das Mailprogramm absenden will. Das ist natürlich ein bisschen wenig für ein Formular. Das Absenden über das Mailkonto ist auch primitiv und beim Besucher eher unerwünscht.

Bilderstrecke starten
12 Bilder
Google Tricks: Neue Funktionen, Easter Eggs und Hilfen für die Suchmaschine.

HTML-Formular: Grundregeln

Hier ein paar Grundlegende Regeln für ein HTML-Formular. Diese müsst ihr beachten, damit das Formular überhaupt funktioniert.

  1. Ein HTML-Formular startet mit dem HTML-Tag <form – gefolgt von einigen Anweisungen.
  2. Die wichtigste Anweisung in einem HTML-Formular lautet action. Dem Befehl action folgt ein Gleichheitszeichen und dann Anführungsstriche, zwischen denen der eigentliche Befehl steht. Wie etwa oben zu sehen, kann eine der Aktionen der Tag mailto und eine E-Mail-Adresse sein. action=“mailto:empfaenger@ mailadresse.de“.
  3. Der einleitende form-Tag benötigt noch die Übergabe einer Arbeitsmethode. Für method gibt es die Attribute post und get. get hängt die Formulardaten an die aufgerufene URL und dient zur weiteren Verarbeitung. post hingegen sendet die Daten an den Server, wo sie über spezielle Programme versendet werden können. Auf solche Formularskripte gehe ich weiter unten ein.
  4. Zum Absenden benötigt das Formular einen Sendebutton. input type=“Submit“ legt fest, dass ein Button erzeugt wird. Der Name ist in diesem Fall meist unwichtig. Und zwischen den Anführungszeichen von Value=““ steht das, was auf dem Button zu lesen ist. Also z.B. Absenden.
  5. Damit überhaupt etwas passiert, benötigt ihr noch mindestens ein Formularfeld. Also beispielsweise ein input type=“text“, mit dem ein Textfeld erzeugt wird.
  6. Solche Felder brauchen alle Namen und sie müssen eindeutig und unterschiedlich sein. Dann steht in der Nachricht die ihr erhaltet jeweils der Feldname und dahinter der Wert, den der Absender dort eingetragen hat.
  7. Abgeschlossen wird ein Formular durch </form>

Ein HTML-Formular absenden - Möglichkeiten

Wie oben bereits erwähnt, wird die einfachste Variante eines HTML-Formulars mit dem mailto-Befehl über das Mailprogramm des Besuchers abgesendet. Das ist natürlich eine sehr primitive Möglichkeit.

Wesentlich effektiver sind fertig vorbereitete Skripte, die in CGI oder PHP programmiert wurden und auf dem Server abgelegt werden. Das setzt allerdings voraus, dass euer Webspace das auch unterstützt! Fragt im Zweifelsfall den Provider. In manchen Fällen stellen größere Provider auch fertige Formularlösungen zur Verfügung, die ihr frei konfigurieren und in Eure Seite einbinden könnt.

Solche fertigen Skripte könnt ihr z.B. hier downloaden. Da ist auch ein vorbereitetes Kontaktformular dabei. In der Regel müsst ihr nur noch ein paar Parameter anpassen, wie eure E-Mail-Adresse und die URL der Kontaktseite. Danach übernehmen die PHP-Funktionen des Servers den Mailversand und schicken euch die Ergebnisse sauber formatiert zu.

Häufige Fehler in HTML-Kontaktformularen

Oben haben wir ja bereits einige Grundregeln für HTML-Formulare genannt. Es gibt ein paar Anfängerfehler, die dafür sorgen, dass die HTML-Kontaktformulare gar nicht erst abgesendet werden. Oder die ankommenden Ergebnisse sind unvollständig.

Hier eine Liste der häufigsten Formularfehler und ihre Gründe:

Problem

Fehler

Nur ein Teil der abgefragten Daten kommt an. Das passiert häufig, wenn man ein Formularfeld kopiert und wieder einfügt. Vergisst man hier, dem zweiten Feld einen eigenen, einzigartigen Namen zu geben, so gibt es zwei Felder mit identischen Namen und im besten Fall wird nur eines versendet.
Das Formular sendet nicht. Entweder ist der action-Befehl fehlerhaft, oder es wurde die falsche method gewählt. Überprüft beides!Und wenn das nichts bringt, kontrolliert die Parameter im FormMail-Skript.Weitere Möglichkeit:

Euer Server unterstützt keinen Mailversand via PHP - Nachfragen!

GIGA-Smartphone-Awards 2018: Stimmt ab und wählt das beste Handy des Jahres (Abgelaufen)

Endlich ist es soweit: Bei den GIGA-Smartphone-Awards 2018 könnt ihr eure Stimme abgeben und das beste Handy des Jahres wählen. Die Nominierten sind allesamt exzellent, die Hersteller haben sich nichts geschenkt – wählt also weise! 

Zu den Kommentaren

Kommentare zu diesem Artikel

Neue Artikel von GIGA SOFTWARE

  • Adobe Flash Player

    Adobe Flash Player

    Hier zum Download bekommt ihr den Adobe Flash Player als Plugin für die Browser Firefox, Chrome, Opera und Safari, das diese in die Lage versetzt, auf Webseiten verwendete Flash-Inhalte wiederzugeben.
    Marvin Basse 14
  • FreeFileSync

    FreeFileSync

    Der FreeFileSync Download ist ein einfach zu bedienendes Tool zur Synchronisierung von Dateien und Ordnern zwischen verschiedenen Laufwerken und Rechnern.
    Marvin Basse
  • 8GadgetPack

    8GadgetPack

    Mit dem 8GadgetPack Download könnt ihr euch die von Windows Vista und 7 bekannten Widgets auf den Desktop von Windows 8 oder Windows 10 holen. Zusätzlich installiert das Programm eine Sidebar zur Verwaltung der Minianwendungen. 
    Marvin Basse
* Werbung