www.BuntesWeb.de - Computer & Internet

Das Homepage-Handbuch speziell für blutige Anfänger

Webdesign - Wir erstellen eine Beispielhomepage

E-Mail und Kontaktformular

Hier soll dem Homepagebesucher der erste Kontakt erleichtert werden. Neben der Nennung der Emailadresse gibt es ein Kontaktformular. Der Homepagebesucher muss nur ein paar Felder ausfüllen und dann auf den Absende-Button klicken. Dadurch werden die Formulardaten per Email an den Homepagebetreiber verschickt. Je nach Systemkonfiguration und Sicherheitseinstellungen wird sich dadurch das Emailprogramm des Anwenders öffnen. Zuvor muss er ggf. eine Sicherheitsabfrage bestätigen. Komfortabler kriegt man das als Anfänger aber leider nicht hin. Im Anhang finden Sie aber auch Tipps für die Verwendung eines Dienstanbieters.

Für die Erstellung der neuen Seite öffnen Sie wieder die Vorlage (vorlage.htm) und speichern sie diesmal unter dem Namen "kontakt.htm". Danach bearbeiten Sie die Seite entsprechend dem folgenden Beispiel: Beispielseite 12 - kontakt.htm. Abgesehen von dem Text muss diesmal eine Tabelle erstellt werden, damit 4 Eingabefelder und ihre Titel sowie der Absende-Button ordentlich positioniert werden können.

Aber Achtung: Wenn wir nun einfach eine Tabelle erzeugen und dann in jede Zelle ein Formularfeld einfügen, dann entstehen lauter voneinander unabhängige Formulare mit je einem Eingabefeld. Damit die Formulardaten aber alle gemeinsam übermittelt werden können, müssen wir unbedingt darauf achten, dass es sich nur um ein einziges Formular mit 4 Eingabefeldern und zugehörigem Sende-Button handelt. Daher muss eine gewisse Reihenfolge eingehalten werden:

• 1. Formular erzeugen
• 2. Tabelle ins Formular einfügen
• 3. Formularfelder in Tabellenzellen einfügen

Anwender von Namo WebEditor kennen keinen Befehl "Formular erstellen". Namo erzeugt automatisch ein Formular, wenn man das erste Feld einfügt. (Mehr dazu lesen Sie ggf. noch einmal nach unter Spezielle Website-Elemente - Das Formular.) Also fügen wir zum Zwecke der Erzeugung eines leeren Formulares einfach ein Formularfeld ein. Klingt widersinnig, ist aber der einfachste Weg. Ich verwende dazu gern den Zurücksetzen-Button, denn den finde ich absolut überflüssig und somit denke ich daran, den Button zum Schluss wieder zu entfernen. So könnte das dann aussehen:

Der Formular-Bereich wird nun in Namo WebEditor durch eine gestrichelte Linie kenntlich gemacht, vorausgesetzt man hat die Markierungen aktiviert. Bei der weiteren Arbeit an diesem Formular müssen Sie unbedingt innerhalb dieses Bereiches bleiben!

Als nächstes fügen Sie nun eine neue Tabelle direkt rechts neben dem "Zurücksetzen"-Button ein. Verwenden Sie folgende Tabelleneigenschaften:

• 2 Spalten, 5 Zeilen
• Breite: 746 (Pixel)
• Zellenfüllabstand: 5
• Zellenabstand: 0
• Rahmenstärke: 0

Jetzt müsste es ungefähr so aussehen:

Auch die an sich unsichtbare Tabelle wird in Namo WebEditor mit gestrichelten Linien angezeigt. Obwohl wir die Tabelle direkt rechts neben den Button gesetzt haben, wird sie darunter eingefügt. Das ist normal. In HTML sind Tabellen immer zeilenfüllend und dulden daher nichts neben sich, außer man setzt die Tabelle in eine Tabelle...

Abschließend müssen Sie die Zellenbreiten der neuen Tabelle aber noch anpassen. Und zwar soll die linke Spalte 100 Pixel breit sein. Die rechte entsprechend 626 Pixel. Namo WebEditor-Anwender können das mit der Maus erledigen, indem Sie die vertikale Linie in der Mitte der Tabelle anfassen und nach links ziehen, bis die linke Spalte die gewünschte Breite hat. Sie können aber auch die Spalten jeweils markieren und dann die Eigenschaften der Zellen bearbeiten. Mehr zum Thema Tabellen lesen Sie bitte nach in den Grundlagen (Grundelemente einer Webseite - Die Tabelle).

In der rechten Spalte dieser Tabelle bringen wir nun die Felder für das Formular unter. (Lesen Sie ggf. nochmal nach unter: Spezielle Website-Elemente - Das Formular). In die ersten 3 Zeilen kommt je eine einzeiliges Textfeld für den Namen, die Emailadresse und einen Betreff. Das 4. Feld ist ein Textfeld mit Laufleiste für die Nachricht. Zuletzt benötigen wir noch einen Button zum Abschicken der Email. Dessen Beschriftung entspricht dem Feldwert. Geben Sie an dieser Stelle z.B. "Formular per Email versenden" ein, dann steht auf dem Button nicht mehr irgend etwas wie "Absenden" oder was immer der Browser als Standard dort hinein schreibt, sondern ganz klar die Aufforderung, das Formular per Email zu versenden. Durch den relativ langen Schriftzug bekommen Sie außerdem einen schönen großen Button. Abschließend sieht es also etwa wie folgt aus:

Fast sind wir damit auch schon fertig. Allerdings funktioniert das Absenden so noch nicht. Außerdem haben wir ja noch diesen "Zurücksetzen"-Button, der eigentlich nur als Platzhalter dienen sollte. Jetzt ist er überflüssig geworden. Also löschen wir ihn einfach weg.

Dann müssen wir uns darum kümmern was passieren soll, wenn man den Absende-Button klickt. Schauen Sie sich mal die Formulareigenschaften an...

...wie Sie sehen - Sie sehen nichts. Wir haben ja lediglich ein paar Formularfelder eingefügt, aber bislang die Formulareigenschaften noch nicht bearbeitet.
Die müssen nämlich so aussehen:

Damit ist das Kontaktformular voll funktonsfähig. Wenn Sie es ausprobieren, dann werden Sie allerdings nicht weit kommen, da diese Muster-Mailadresse natürlich nicht existiert; jedenfalls war es im März 2009 noch so, als ich dieses Buchkapitel zuletzt überarbeitet habe.

Jetzt sollte diese Homepage-Seite noch einen Titel bekommen. Mit Namo WebEditor öffnen Sie die Dokumenteigenschaften. Begeben Sie sich auf die Karteikarte "Allgemein". Dort finden Sie das Eingabefeld "Titel:" Hier geben Sie einen aussagekräftigen, aber nicht zu langen Titel ein. Für das Kontaktformular passt der folgende Titel perfekt: "Email an Max Mustername"
 

Weiter geht es mit der Hobby-Seite: "Makrofotografie"

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum