HTML-Tabellen testen

Schritt 3: Den Cursor in das erste Feld setzen

Zum Abschluss der Formulargestaltung noch ein kleines i-Tüpfelchen: Mit einem einzeiligen JavaScript vereinfachen Sie die Benutzung des Formulars für Ihre Besucher, indem Sie den Cursor beim Laden der Seite gleich ins erste Formularfeld setzen. Ergänzen Sie den <body>-Tag auf kontakt.html wie folgt:

Und hier die Erklärung:

onload sagt dem Browser, dass er die folgende Anweisung beim Laden der Webseite ausführen soll.
Die Anweisung document.kontaktformular.absender.focus(); heißt im Klartext:
Suche auf der angezeigten Webseite (document) ein Element mit dem Namen kontaktformular.
In diesem Element gibt es ein Feld mit dem Namen absender.
Setze den Cursor in dieses Feld und lass ihn blinken (focus).

Falls JavaScript im Browser ausgestellt sein sollte, passiert einfach gar nichts.

Schritt 4: Das Reiseziel für das Formular festlegen

Ein Klick auf die Schaltfläche Abschicken sendet die Formulardaten zur Verarbeitung an ein Programm auf einem Webservercomputer.

Falls Sie auf Ihrem Webspace keinen Zugriff auf ein solches Programm haben, bietet der Formular-Chef von nettz.de eine einfache und sichere Alternative. Ohne Registrierung und ohne Verpflichtungen: formular-chef.de.

Ergänzen Sie den Anfangstag <form> wie folgt (der Tag kann in einer Zeile stehen):

<form id="kontaktformular" name="kontaktformular" 
 action="http://www.formular-chef.de/fc.cgi" 
 method="post" enctype="multipart/form-data">

Das Attribut action gibt das Reiseziel der Formulardaten an, also das Programm, das die Formulardaten verarbeitet. Hier tragen Sie die komplette URL zum Formular-Chef ein.

Beim Formular-Chef müssen Sie außerdem method="post" angeben. Dieses Attribut stellt unter anderem sicher, dass die Formulardaten unsichtbar verschickt werden.

Optional ist das Attribut enctype="multipart/form-data", das dafür sorgt, dass auch unbegrenzt große Daten und Dateien übertragen werden können.

Seriosität des Formular-Chef

nettz.de betreibt den Formular-Chef seit August 1999. In dieser Zeit hat es keine rechtlichen oder sonstigen Probleme gegeben. nettz.de verbürgt sich außerdem dafür, dass keinerlei Adressen oder Daten gesammelt oder protokolliert werden.

Schritt 5: Dem Formular-Chef die E-Mail-Adresse mitteilen

Fast fertig. Sie müssen dem Formular-Chef nur noch Ihre E-Mail-Adresse mitteilen, damit er Ihnen die Daten per Email zuschicken kann. Ergänzen Sie dazu im Quelltext von kontakt.html die fett gedruckte Zeile und ersetzen Sie dabei bitte das Wort IHRE_EMAIL durch Ihre E-Mail-Adresse:

<form id="kontaktformular" name="kontaktformular" 
 action="http://www.formular-chef.de/fc.cgi"
 method="post" enctype="multipart/form-data">
<input type="hidden" name="empfaenger" value="IHRE_EMAIL" /> 
<div>
   <label for="absender">Ihre E-Mail-Adresse:</label>
   <input type="text" id="absender" name="absender" />
</div>

Der HTML-Befehl erzeugt ein nicht sichtbares (hidden) Formularfeld mit dem Namen empfaenger. Der Formular-Chef erwartet die benötigte E-Mail-Adresse in einem Formularfeld mit genau diesem Namen.

So schützen Sie sich gegen Spam

Damit die im Quelltext notierten E-Mail-Adressen nicht für Spam-Zwecke missbraucht werden können, bietet der Formular-Chef eine einfache Verschleierung. Ersetzen Sie dazu einfach das "@"-Zeichen durch die Zeichenfolge "X§X" - so können Spamroboter und Suchmaschinen Ihre Mail-Adresse nicht so leicht erkennen. Statt

schreiben Sie

Trotzdem sollten Sie für ein im Web veröffentlichtes Kontaktformular eine gesonderte E-Mail-Adresse nutzen, denn die Spamprogramme werden beim automatisierten Einsammeln der Adressen auch immer pfiffiger.

Schritt 6: Testen des fertigen Formulars

Sie können das Formular direkt von Ihrer Festplatte im Browser aufrufen und testen, sofern Sie eine Verbindung zum Internet haben:

Rufen Sie die Kontaktseite im Browser auf.
Füllen Sie das Formular aus.
Klicken Sie auf Abschicken.

Der Formular-Chef schickt die Formulardaten an die angegebene E-Mail-Adresse und der Besucher erhält im Browser eine Antwortseite:

Die Antwortseite des Formular-Chef

Auf der Antwortseite blendet nettz.de in der kostenlosen Version des Formular-Chef ein Werbebanner ein. Eine werbefreie Nutzung gibt es für Peanuts.

Dieser Artikel basiert auf Little Boxes 1, Kap. 8.

Weitere CSS-Tipps von Peter Müller finden Sie auf unserer Seite CSS-Praxis.

HTML-Formulare gestalten per CSS