Ziel ist es, ein einfaches Kontaktformular, mit Hilfe eines kostenlosen "Formularmailer" zu erstellen, dass im E-Mail Postfach bei euch dann auch ankommt.
Wir wollen ein Kontaktformular erstellen, mit den wichtigsten Feldern wie Textarea, Optionsschaltergruppe, Sendebutton sowie dem Löschbutton.
Wie oben bereits gesagt, werde ich in diesem Tutorial den für Einsteiger sehr leichten Weg mit dem Gratis-Formmailer verwenden.
Wir erstellen uns unser gewünschtes Formular, das geht am besten mit verschiedenen Editoren wie Dreamweaver, GoLive, Frontpage etc. etc.
Wie in meinem Beispiel:
Geschlecht
Vorname
Nachname
E-Mail Adresse
Nachricht an uns
In der rechten Spalte fügen wird jetzt die Felder ein:
Ich habe bei meinem Beispiel eine
Optionsschaltergruppe
3 Textareas
und einen Textbereich sowie Sende- und Lösch-Button.
Schritt 2:
Den Gratis-Formmailer eintragen
Solltet ihr das Formular fertig erstellt haben, so habt ihr (wenn ihr
das Formular nach meinen beschriebenen Tags gemacht habt) am Anfang
diesen Befehl stehen:
<form method="POST" action="(z.B. euere Adresse des
Formmailers)"
Schritt 3:
E-Mail Adresse hinzufügen
Hier schreiben wir jetzt den Formmailer rein:
In meinem Beispiel:
<form action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi"
method="post" enctype="multipart/form-data">
Gleich nach dem <form action=".........."> schreiben
wir in die nächste Zeile folgenden Befehl:
<input type="hidden" name="empfaenger" value="youremail@adresse.at">
(youremail@adresse.at" bitte editieren mit der E-Mail Adresse,
wo die Formulardaten hingeschickt werden sollen)
Schritt 4:
Testet euer Formular
Tippt überall was rein, und klickt auf Senden, und schaut danach in euer Postfach, da sollte nun eine E-Mail mit den eingegebenen Daten eingegangen sein.
Schritt 5:
Formularfelder richtig bennen
Ihr seht jetzt in eurer Email, dass leider nicht
sehr hilfreiche Phrasen wie textfield = , textfield 2 = etc. stehen.
Diese stehen da, weil ihr im Formular die Textfelder nicht richtig benennt
habt.
Das ändern wir am Besten gleich in unserem Formular:
Wir gehen rauf, wo unsere "Vorname-Textarea" steht, also die
Textarea nebem dem Vorname:
Im Quelltext steht folgendes:
<input type="text" name="textfield" />
das "text" ändern wir jetzt ganz einfach in "Vorname"
das macht ihr jetzt bei allen anderen Bereichen auch, damit ihr euch besser auskennt wenn ihr die Mail gesendet bekommt.
Schritt 6:
Fertiges Formular testen
Hier mein Quellcode:
<body>
<form action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi"
method="post" enctype="multipart/form-data">
<input type="hidden" name="empfaenger" value="youremail@adresse.at">
<table width="100%" border="0" cellspacing="5">
<tr>
<td width="23%">Geschlecht</td>
<td width="77%"><p>
<label>
<input type="radio" name="Optionsschaltergruppe1"
value="optionsschalter" />
männlich</label>
<br />
<label>
<input type="radio" name="Optionsschaltergruppe1"
value="optionsschalter" />
weiblich</label>
<br />
</p></td>
</tr>
<tr>
<td>Vorname</td>
<td><label>
<input name="vorname" type="text" id="vorname"
/>
</label></td>
</tr>
<tr>
<td>Nachname</td>
<td><label>
<input name="nachname" type="text" id="nachname"
/>
</label></td>
</tr>
<tr>
<td>E-Mail Adresse </td>
<td><label>
<input name="Email" type="text" id="Email"
/>
</label></td>
</tr>
<tr>
<td>Nachricht an uns </td>
<td><label>
<textarea name="nachricht an uns" cols="50" rows="5"
id="nachricht an uns"></textarea>
</label></td>
</tr>
<tr>
<td><label>
<input name="senden" type="submit" id="senden"
value="Senden" />
</label></td>
<td><label>
<input name="löschen" type="reset" id="löschen"
value="Alles Löschen" />
</label></td>
</tr>
</table>
</form>
</body>
 |
 |
 |
||||||
|
||||||||
| |