Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 10: Formulare

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Die Surferinnen und Surfer sollen mit den Website-Betreibenden möglichst einfach Kontakt aufnehmen können. Das geschieht am besten mit einem Formular - so brauchen die User nicht extra das Mailprogramm zu öffnen.

Wie ein Formular aussieht, wissen wir alle. Das klassische Kontaktformular gibts auch auf meiner Website. Der Inhalt des Formulars wird aber - nach dem Klick auf "Absenden" - leider nicht durch Zauberhand an den Webmaster weitergeleitet. Bedingung ist meistens eine sogenannte CGI-Funktion oder ein PHP-Script.

Im Rahmen dieses "Common Gateway Interface" wird der eingegebene Inhalt von einem Programm (meistens in der Sprache PERL geschrieben) verarbeitet und nach Wunsch des Programmierers formatiert - als E-Mail an eine fix definierte Adresse (oder mehrere) zum Beispiel.

Es ist aber auch einfach möglich, die Inhalte in eine Datenbank aufzunehmen oder in ein Logfile zu schreiben, falls mal ein Mail verloren gehen sollte (oder alles zusammen).

Am bequemsten ist natürlich die Datenbanklösung: Zumeist über ein Web-Interface kann man die Daten ordnen, bearbeiten, als Mailingliste ausgeben usw.

Oftmals sind solche Dienste auch mittels PHP programmiert - wir kommen in diesem Kurs noch dazu!

Am verbreitetsten ist aber das reine Verschicken als Mail via einen CGI-Dienst. Die meisten Provider bieten dazu vorgefertigte Programme, die man nicht weiter bearbeiten muss. Die nötigen Daten (Empfängeradresse, URL der Bestätigungsseite) werden direkt in den HTML-Code der Webpage geschrieben.

Merke: Formulardaten werden leider nicht einfach so übermittelt, es gibt da auch keine fixfertigen Vorlagen. Man muss also auf einen Dienst zurückgreifen, der auf dem Server abläuft. CGI ist die verbreitetste Variante, die man als Laie auch einigermassen einfach hinbringt. ASP- oder PHP-Formulare sind natürlich toll, aber das würde hier noch zu weit gehen. Schauen wir zuerst mal eine einfache Lösung an.

Wer keinen eigenen Server besitzt, wo z.B. Perl-Programme wie bnbform installiert sind, kann wie so oft auf Gratisprogramme zurückgreifen, die gute Seelen ins Netz gestellt haben. Wir werden hier mit dem "Formularchef" arbeiten.

Wichtig zu wissen im Voraus: Im HTML-Code geht ein Formular vom Tag <form> bis </form>.

Im FORM-Tag wird zudem immer angegeben, welche Aktion bei einem Klick auf "OK" oder "Absenden" ausgeführt wird. Meist sieht der Form-Tag also so aus:

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

Daraus schliessen wir folgendes:

• Das CGI-Programm, das ausgeführt wird, heisst "fc.cgi", es befindet sich auf dem Server www.formular-chef.de.
• method gibt die HTTP-Anfragemethode an, mehr dazu hier.
• enctype gibt das Datenformat an, hier "multipart/form-data"

Aber zuerst brauchen wir ein Formular auf einer Website! Formularfelder werden in Dreamweaver mittels "Einfügen / Formular / ... " eingefügt. Wenn Dreamweaver fragt, ob der FORM-Tag hinzugefügt werden soll, bitte JA antworten - so ersparen Sie sich die Sorge, den obligatorischen FORM-Tag später manuell einzufügen.

Eingefügt werden normalerweise:

Textfelder
Schaltflächen
Kontrollkästchen
Optionsschalter

Achtung: Wir arbeiten heute zunächst nur mit Textfeldern, da die Sache mit den Kästchen ein wenig komplexer ist. Dafür verweise ich auf diese Seite.

Ein kleines Formular soll also vorerst reichen: Zwei Textfelder sowie ein Absenden-Button. Auf den oft noch gesehenen Reset-Button sollten Sie verzichten - er ist überflüssig (zu schnell angeklickt und dann ist alles weg...).

Fügen Sie auf eine beliebige Seite mit Dreamweaver zwei Textfelder und eine Schaltfläche ein (mit "Einfügen / Formularobjekt / ...").

Oft hilft eine Tabelle oder ein spezielles CSS-Konstrukt zur besseren Anordnung. Wer das Ganze schnell haben will, kann hier auch den gesamten Code kopieren und im HTML-Bearbeitungs-Modus in die Seite einfügen (nicht vergessen - da wo's steht, die eigene Mailadresse eintragen).

Achtung: Sie müssen den gesamten Quellcode erstezen, also auch den <head>-Teil.

Wenn Sie die Elemente des Formulars später 1x anklicken, können Sie deren Parameter über das Eigenschaften-Fenster beeinflussen:

Das heisst, auf diese Art können Sie z.B. auch dem "Abschicken"-Button eine andere Beschriftung geben ("Zurücksetzen" hiesse übrigens soviel wie "Reset", aber wie gesagt, vergessen Sie das gleich wieder...):

So haben wir also mit der Zeit ein fixfertiges Formular - wundern Sie sich nicht über den roten Rahmen im Dreamweaver um das Formular, er ist im Browser unsichtbar:

Im Dreamweaver sieht dies so aus:

Die gelben "Zeichen" sind die unsichtbaren Elemente, die z.B. angeben, wie die Empfängeradresse lautet oder welche Website nach dem Versand dargestellt werden soll. Es ist einfacher, diese unsichtbaren Elemente im HTML-Modus zu bearbeiten. Darum ist hier als Hilfe der Formular-Code abrufbar.

Wechseln Sie also im Dreamweaver auf Ihrer Formular-Page in den HTML-Modus und ändern Sie die nötigen Felder wenn nötig "von Hand" ab. Achten Sie auf folgendes:

• Der Form-Tag muss genau so lauten wie im Beispiel, damit es funktioniert.
• Die Felder input type="hidden" heissen, dass dies versteckte Formularfelder sind, die der User nicht sieht, aber Infos für das CGI beinhalten. Wichtig sind hier:
  • <input type="hidden" name="betreff" value="Feedbacktest Topweb"> - Angezeigter Absender
  • <input type="hidden" name="absender" value="formulartest.topweb@
    ihredomainhiereintragen.ch"> - Absender-Mailadresse
  • <input type="hidden" name="empfaenger" value="IHRE MAIL-ADRESSE EINTRAGEN"> - Unbedingt alles GROSSGESCHRIEBENE durch Ihre funktionierende E-Mailadresse ersetzen
  • <input type="hidden" name="antwortseite_template" value="http://www.jacomet.ch/
    topweb/answer.htm"> - Die Adresse der Antwortseite. Beachten Sie, dass Sie eine Page angeben, die a) existiert und b) keine Bilder enthält, denn diese Seite wird quasi auf den Server von Nettz.de gespiegelt und alle Bilderverweise gehen verloren (ausser sie sind mit absoluten Links versehen, d.h. zum Beispiel http://www.meinserver.ch/images/bildname.gif - dann sehen sie die Images aber im Dreamweaver nicht mehr...)
• Die Feldnamen mit AA und BB am Anfang haben folgende Bewandnis: Die Felder werden im E-Mail alphabetisch geordnet, d.h. AA wird zuerst stehen, BB an zweiter Stelle usw. Möglich sind auch Feld-Bezeichnungen, die anfangen mit A1, A2, A3 usw.
• <input name="SUBMIT" type="SUBMIT" id="SUBMIT" value="...und weg damit!"> und <input type="RESET" value="Reset" name="RESET"> sind die Absenden- und Reset-Felder

Versuchen Sie's also - aber vergessen Sie nichts :-) Leider gilt auch hier: Der kleinste Fehler führt zu einem Versagen des Formulars. Geben Sie Ihre E-Mail-Adresse als Empfängeradresse des Mails ein.

Für Fortgeschrittene: Mehr Felder & Prüfungsscripts

Wer Spass an der Sache und das Grundprinzip begriffen hat, dem stehen hier weitere Beispielscripts zur Auswahl:

• Formular-Vorlage 1: Enthält auch Auswahlfelder
• Formular-Vorlage 2: Enthält zudem ein Javascript, das prüft, ob bestimmte Felder ausgefüllt sind und eine Popup-Meldung aussendet, wenn nicht. Dazu ist der Form-Tag mit den Codes name="Formular" und onSubmit="return chkFormular()" ausgestattet, d.h. vor dem Abschicken wird gepüft, ob bestimmte Felder ausgefüllt sind. Beachten Sie: Die Feldnamen und den Formularnamen dürfen Sie nicht ändern - ausser Sie passen das Javscript auch minutiös an... und beachten Sie, wenn Sie das Script in ein eigenes Design einfügen, müssen Sie einen Teil in den HEAD und einen Teil in den BODY kopieren.

  Achtung: Ersetzen Sie jeweils den gesamten Quellcode durch den aus den PDFs, die Codes beinhalten auch den <head>-Teil und den <body>-Tag.

  Beachten Sie, dass Sie in allen Codes Ihre eigene Mailadresse an der dafür vorgesehenen Stelle eingeben!

  Dreamweaver bringt bei "Fenster > Verhalten" (und dann rechts aufs Pluszeichen klicken auch eigene Formular-Prüf-Codes mit, die Texte sind da allerdings immer englisch und müssen im Javascript-Quellcode umgeschrieben werden...

Zum Nachlesen: KnowWare-Heft 27, Seite 60-63

Ein versteckter Hinweis zum Schluss, unter "an sich unwichtige Details" einzuordnen: Formulardaten können zwar auch via Mail verschickt werden, davon rate ich aber dringend ab. In den meisten Fällen kommt es zu einer Fehlermeldung, die ungeübte Anwender nicht verstehen. Grund: Auf dem Computer, auf dem das Formular ausgefüllt wird, muss ein Mailprogramm mit einem gültigen SMTP-Server installiert sein.

Wenn das nicht der Fall ist, wird im Extremfall nichts verschickt - und der User ist wütend, wenn er kein Feedback bekommt. Und der mühsamen Fallen nicht genug: Je nach Compi erhält der Empfänger auch nur ein Attachment mit der Endung "att", die man mühsam mit einem Text-Editor öffnen muss.

Aber damits doch gesagt ist - der Form-Tag wäre in diesem Fall: <form action="mailto:ihremailadresse@ihrserver.ch" method="post" enctype="multipart/form-data">

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.