öffentlich
Redaktion Druckversion

HTML-Formulare gestalten per CSS

Wie Sie per CSS ein einfaches Kontaktformular für Ihre Website gestalten

4.11111
(9)
Beitrag bewerten
Stand: 12. November 2008

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:

<body id="kontaktseite" onload="document.kontaktformular.absender.focus();">

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

<input type="hidden" name="empfaenger" value="beispiel@test.de"/>

schreiben Sie

<input type="hidden" name="empfaenger" value="beispielX§Xtest.de"/>

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:

Bild vergrößernDie 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.

Beitrag bewerten

Ihre Wertung:

 

Sehr gute Anleitung.

Eine Frage hätte ich noch: Ist es möglich, dass das Bestätigungsfeld des Formular-Chefs, dass nach dem Klick auf Absenden kommt, in einem neuen Fenster aufgeht?

Gruß
David

Hallo Anonym,

im Beitrag wird durchaus auf das Risiko hingewiesen. Vermutlich haben Sie den Kasten am Ende von Schritt 5 übersehen "Achtung: So schützen Sie sich gegen Spam".

Besten Gruß,
Peter Müller

Da frag ich mich immer wieder was das soll!

Damit kann ich das Formular als Spam-Schleuder benutzen.. ein solch "erfahrener" Autor sollte auf dieses Risiko hinweisen

Downloads zu diesem Beitrag

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren