Mit
diesem Rezept begleitest du mich bei der Erstellung eines
Feedback-Formulars auf meiner im Zusammenhang mit dem Arcor-Vertrag
kostenlosen Homepage.
Mit
dem von Arcor angebotenen HTML-Code bindest du in deine Webseite ein
Kontaktformular ein, 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 DIENSTE / Online-Dienste die Seite mit
Gaming Area bis Newslgroups, wo du das Homepage-Center
aufsuchst.
2. Unter SOFTWARE UND SKRIPTE findest du
das Mailformular.
3. Platziere in Nvu den Cursor an
die geeignete Stelle in deinem Projekt und klicke oben links, wo
'Normaler Text' in der Auswahlliste namens 'Absatzformat auswählen'
steht in diese und wähle 'Generic container (div)'. Sofort erscheint
unten in der
Statuszeile (nur wenn eingeschaltet mit Ansicht / Anzeigen-verstecken /
Statuszeile) der Tag <div>. Den Anklicken und in den
Editiermodus 'Quelltext' (gleich darüber leicht zu finden) wechseln. Im
Quelltetxt erkennst du den neuen Container markiert:
<div></div>
4.
Kopiere den ganzen HTML-Code von der Arcorseite zwischen die beiden
<div>-Tags. Nach Änderung von
"IhrBenutzername@arcor.de" in deine email-Adresse und
Austausch von "http://www.arcor.de" in deine eigene URL ist das
Formular einsatzbereit.
5. Wechsel in den
Editiermodus
'Normal'. Das Ergebnis siehst du hier drunter. Nvu
zeigt die gepunkteten roten Linien, um die Blindtabelle darzustellen.
Im
Browser gibt es diese roten Linien natürlich nicht.
6.
Da das Formular in einem
<div>-container sitzt, kann dieser noch ein wenig
gestaltet
werden.
a)
In das
Formular klicken. Links in der Statuszeile das <div>
rechtsklicken. Dadurch wird der ganze Container ausgewählt/markiert und
das Kontextmenü erscheint.
b) Wieder auf
<div> rechtsklicken und mit Inline styles /
Randeigenschaften / Stil: solid / Breite: 1px / Farbe: blau, bzw
#3366FF OK / OK / einen Rahmen setzen.
c) Wieder auf
<div> rechtsklicken und mit Inline styles /
Hintergrund-Eigenschaften / Farbe: #CCCCFF OK / OK / den Container
einfärben.
d) Mit Inline styles / Box-Eigenschaften
die Breite auf 500px setzen, / OK. Bei den Box-Eigenschaften lassen
sich gleich noch die Raender nach allen
vier Seiten für einen Abstand zu den anderen Elementen auf der
Webseite nach Belieben einstellen. Die Box-Eigenschaft Abstaende legt die Zwischenräume zwischen
den Box-Grenzen und dem Formular fest. Jede Änderung bei diesen Werten
wird übersichtlich sofort von Nvu umgesetzt, noch vor der Eingabe, und
kann laufend korrigiert und angepasst werden.
7.
Arcor sagt selbst, es können weitere Textfelder hinzugefügt werden. Auf
diese Weise wird aus dem Formular bei 6. die folgende Form:
Bitte teilen Sie mir hier Ihre
Wünsche mit.
a)
Im Quelltext wird die Aufschrift der Senden- und
Rücksetzen-Schaltflächen entsprechend überschrieben.
b)
Im Quelltext kommen vor das öffnende Tag <form> zwei
Zeilenumbrüche <br><br>, um im Container
Platz für Zusatztexte zu schaffen. Genauso noch jeweils
zwei <br>
vor jedes <input>, vor jedes </td> und
hinter den schließenden Tag <form>. Andernfalls kann der
Mauszeiger nicht zwischen die Elemente platziert werden. Das Weitere
folgt im
Editiermodus 'Normal'. Jetzt lassen sich beliebige Leerzeilen einfügen
oder löschen.
c) Das Wort Betreff und das zugehörige
Formularfeld markieren, kopieren und darunter einfügen. Aus Betreff
wird "Email" und im Quelltext wird aus dem zweiten <input
name="Betreff" ein <input name="Email". Beide formularfelder
bekommen die doppelte Breite von size="60".
d)
Gleich darunter gibt es drei Radibuttons zum Anklicken. Hierzu Menü /
Einfügen / Formularfeld / In der Auswahlliste für den Feldtyp
Radiobutton wählen / Feldwert: SZ / Häkchen bei 'Anfangs
ausgewählt' setzen / OK und dahinter noch Sehr zufrieden
schreiben. angekreuzt. Zwie weitere Buttons zum Abklicken
folgen,
EINV für Einverstanden und NZ für Überhaupt nicht zufrieden.
e)
Darunter "Ihr Wunsch" zur Kennzeichnung des Textfeldes darunter.
f)
Unter das Textfeld kommen noch zwei Checkboxen mit den Feldnamen BA und
KA für "Ich möchte eine Antwort bekommen" und für "Keine Antwort bitte".
g)
Hinter Absenden kommen eineige Leerzeichen und die überflüssigen
<br> werden einfach entfernt.