mail

Einsatz des vorgefertigten CGI Mailformular von LOOMES
(Ein Nvu-Rezept im Zusammenhang mit Kurs 1, Seite 8, hier im neuen Fenster)

Mit diesem Rezept begleitest du mich bei der Erstellung eines Feedback-Formulars auf einer Loomes-domain. Am Ende wird es noch etwas modifiziert.

Mit dem Mailformular klickst du dir ein Kontaktformular zusammen, mit dem dein Besucher mit dir in Verbindung tritt. Seine Formulareingaben werden automatisch in eine eMail umgewandelt und an dich verschickt.

1. Du loggst dich ein und wählst unter WWW-Tools die domain, an deren Postfach die Eingaben von deinem Formular gesendet werden. Dort findest du u. a. das Mailformular und weiterhin eine ausführliche Beschreibung des komfortablen Feedback-CGIs. Loomes schreibt selbst: " Mit diesem CGI-Tool können Sie den Besuchern Ihrer Web-Site die Möglichkeit geben, sich mit Ihnen direkt via E-Mail in Verbindung zu setzen.
Die Einsatzmöglichkeiten des Formular-Mail-Konverters reichen dabei von einer einfachen E-Mail, die nur Absender, Betreff und Textnachricht enthält, bis zu komplexen Bestellformularen mit mehreren Dutzend Text-, Auswahl- oder Listenfeldern. Zwei Beispiele zeigen in einer Vorschau, was du erhälst.

2. Die Erklärungen bei Loomes müssen hier nicht wiederholt werden. Bild 1 zeigt das einfache Formular kurz vor Fertigstellung, es muss nur noch als i-Tüpfelchen bei Textbereich die Schaltfläche 'hinzufügen' angeklickt werden.

Zusammenstellung bei Loomes

BILD 1

3. HTML erstellen: Ein Klick ergibt im nächsten Browserfenster den Quellcode:

Name: <input type="textfield" name="Name" value="" size="50" maxlength="50" >

Email: <input type="textfield" name="Email" value="" size="50" maxlength="50" >

Telefon: <input type="textfield" name="Telefon" value="" size="50" >

Betreff: <input type="textfield" name="Betreff" value="" size="50" maxlength="50" >

Nachricht: <textarea name="Nachricht" wrap="virtual" cols="50" rows="6" ></textarea>

</form>

4. Dieser Quellcode kann in eine extra "Feedback-Seite" oder auf jede beliebige Seite kopiert werden. In Nvu ein Wort als Platzhalter an die geeignete Stelle setzen, das Wort markieren und mit der Auswahlliste 'Absatzformat auswählen' den Generic container <div> nehmen. Den Tag in der Statusleiste anklicken und in den Editiermodus 'Quelltext' wechseln. Dort ist jetzt der Platzhalter durch eine Kopie mit dem HTML-Quellcode zu ersetzen.

5. Und so sieht es aus:

6. Das sieht nicht nur chaotisch aus, das ist es, zumal vorher als Beispiel auf der Loomes-Seite auch das einfache Formular recht geordnet aussah. Ein paar Zeilenvorschübe hinter jedem Feld würden die Elemente sofort untereinander anordnen. Ergänzend kommen noch ein paar inline styles zum <div>-Container.

7. Wie im Bild 1 zu sehen, wurden die Elemente Name, Email und Betreff als benötigt eingesetzt. Nachricht fehlt noch oben in der Auflistung, doch ist der Radiobutton schon auf Benötigt eingestellt. Das bedeutet, lässt der Besucher diese benötigten Eingaben aus, wird er mit entsprechender Hilfe genervt. Darum finde ich, sollte es ihm gleich gesagt werden. Daher noch die Ergänzungen mit den Asterixen und der Ansage in der untersten Zeile.

8. Um direkt hinter und vor dem <div>-Tag etwas außerhalb des Formulars schreiben zu können wird einfach im Quelltext gearbeitet und wo nötig noch ein <br> eingefügt. Damit die Leerzeichen zur Ausrichtung benutzt werden können, wurde die Schrift auf feste Breite mit Monospac821BT eingestellt.
Somit wird aus dem gleichen Quelltext dieses Formular und du kannst es hier sogar benutzen, um an mich eine Mitteilung zu schicken. Auch das chaotische Formular funktioniert und ich kann als Empfänger nicht sehen, welches hier benutzt wurde, weil ich den gleichen Code beide Male verwende.

Formular für Mitteilungen an huscholz

Felder mit einem * müssen ausgefüllt werden.

9. Wenn auf den Verschicken-Button geklickt wird, erhält ein Benutzer auf einer leeren Seite die Meldung: "Die Nachricht wurde verschickt." Dann bleibt diesem Absender nur, mit dem Browser-Pfeil 'Eine Seite zurück' bzw. 'Zurück zu ..." auf die Seite mit dem Formular zurück zu klicken. Wird eines der benötigten Felder nicht ausgefüllt und 'Verschicken' geklickt, dann taucht auf der leeren Seite die Meldung auf: "Sie haben die folgenden Felder nicht ausgefüllt: Vorname Email Nachricht.

10. Die versendete eMail hat den Betreff, der im Betreff stand und den Inhalt in einer Liste, die alle Eingaben aufzählt. Die Liste hier drunter wird von dem Formular hier drüber geliefert, mehr Eingaben erweitern die Liste entsprechend. Hinter jedem Doppelpunkt steht dann, was der Absender eingetrage hat.
[Name]:
[Email]:
[Telefon]:
[Nachricht]:

11. Nun gibt es bei Loomes auch die Option, auf jede richtige Eingabe mit einer Antwortseite zu reagieren, die überden Versand der eMail informiert. Das trage ich hier noch nach, oder wenn du es schreibst, baue ich es unter deinem Namen hier ein.

huscholz, 30.1.07

12. Im Hauptverzeichnis der Loomes-domain ist eine Webseite "mailform.tmpl" anzulegen, die den tag {NACHRICHT} enthält. Mit Nvu bastel ich auf die Schnelle diese Seite hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>mailform</title></head><body><center><div
style="border: 3px solid rgb(204, 0, 0); height: 600px; width: 700px; background-color: rgb(170, 170, 255);"><br>{NACHRICHT}</div></center></body></html>

Der Unterschied zu dem oben bei 9. geschilderten Ergebnis ist, dass jetzt die leere Seite durch "mailform.tmpl" ersetzt wird. Da, wo im Layout {NACHRICHT} steht, erscheint der simple Text "Die Nachricht wurde verschickt." Der Unterschied ist also, dass sich mit dem eigenen Design auch noch die Möglichkeit ergibt, dem Besucher dir vertraute Navgation anzubieten oder ihn weiter zu betreuen. Vielleicht mit dem nächsten Formular.

huscholz, 23.6.07