HTML Formular: Ein Kontaktformular in HTML erstellen

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.

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>

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.

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:

Hat dir der Beitrag gefallen? Folge uns auf WhatsApp und Google News und verpasse keine Neuigkeit rund um Technik, Games und Entertainment.