Fast alle Websiten haben es: ein Kontakt Formular. Mit der Programmiersprache PHP kannst du ein solches Formular ganz einfach selbst machen. In diesem Tutorial erkläre ich, wie das genau funktioniert.
Ich setze hier gewisse Grundkenntnisse in HTML und PHP aus.
Das fertige Kontakt Formular kannst du aber auch ganz ohne Kenntnisse hier downloaden.
Und hier findest du eine kleine Vorschau des Formulars.
Schritt 1: Datei anlegen
Um PHP “programmieren” zu können, brauchst du eine PHP Datei. Erstelle deswegen eine Datei mit der Endung .php. Hinweis: Du kannst auch einfach eine .txt Datei nehmen und die Endung auf .php ändern.
Schritt 2: Das Formular definieren
Bevor es ans EMail abschicken geht, müssen die Besucher erst mal ein Formular haben, dass sie ausfüllen können. Dieses Formular coden wir in HTML und CSS. Ich habe mich in dem Beispiel für eine Tabelle entschieden, es geht aber auch mit labels.
Egal wie du dich entscheidest, wichtig ist, dass das Gerüst von dem tag
<form action="" method="post">umschlossen ist. Dieser Code Schnipsel kündigt an, dass gleich ein Formular kommt. Da unser PHP Code sich in der gleichen Datei befindet, bleibt action leer. Mit post wird angegeben, dass die Daten des Formulares direkt übertragen werden.
Schritt 3: Die Input Felder
Wie bereits erwähnt habe ich mich dazu entschieden, dass Formular als Tabelle darzustellen. Damit ich meine Formular später besser gestalten kann, gebe ich der Tabelle eine ID mit.
<table id="FormularTable">Dann definieren wir die erste Zeile…
<tr>… und die ersten zwei Spalten. Ich möchte, dass der Benutzer zuerst seinen Namen eingeben kann. Das sieht dann folgendermaßen aus:
<td valign="top">Name:</td>
<td><input onfocus="this.value=''" type="text" name="Name" id="Name" value="Name" />
</td>Das input Feld sorgt dafür, dass der Benutzer auch etwas eintippen kann. onfocus leert das Feld, sobald der Benutzer drauf klickt (sobald der Fokus auf dem Feld liegt). Mit type kannst du angeben, dass dieses Feld text erwartet. In “value” kannst du angeben, was in deinem input Feld von Beginn an drin stehen soll (bevor der Benutzer etwas eintippt).
Haben wir beide Spalten definiert, muss natürlich auch die Spalte wieder abgeschlossen werden. Dafür sorgt:
</tr>So kannst du nun all deine Felder, die der Benutzer später ausfüllen soll, anlegen. Bei mir sieht das Ganze dann schließlich so aus:
<table id="FormularTable">
<tr>
<td valign="top">Name:</td>
<td><input onfocus="this.value=''" type="text" name="Name" id="Name" value="Name" />
</td>
</tr>
<tr>
<td>EMail:</td>
<td><input onfocus="this.value=''" type="text" name="E-Mail" id="E-Mail" value="E-Mail" />
</td>
</tr>
<tr>
<td>Homepage:</td>
<td><input type="text" name="HP" id="HP" value="http://" />
</td>
</tr>
<tr>
<td colspan=2>
<textarea onfocus="this.value=''" name="Text" value="Text" rows="5" cols="40">Deine Nachricht</textarea><br/>
</td>
</tr>
Da der Input type “Text” nur eine Zeile zulässt, gibt es für mehrzeilige Texte eine “Textarea”. Hier kann der Benutzer einen längeren Text schreiben, perfekt für eine Nachricht. Mit “rows” und “cols” kannst du angeben, wie groß der Nachrichtenblock sein soll.
Nun braucht der Benutzer auch etwas zum draufklicken, damit er die Nachricht auch abschicken kann. Deshalb legen wir noch einmal eine Zeile mit zwei Spalten an. Dieses mal ist der type “submit”. Durch diesen Typ wird das Feld automatisch zum “Button”. In “name” kannst du festlegen, wie der Button beschriftet werden soll. Zum Schluss müssen wir dann noch die Tabelle und das Formular abschließen.
<tr>
<td colspan=2>
<input type="submit" name="Senden" id="Senden" value="Senden" size="20" />
</td>
</tr>
</table></form>Schritt 4: EMail versenden mit PHP
PHP Code muss mit <?php angekündigt werden. Zuerst definieren wir, wohin die EMail geschickt werden soll, von dem sie kommt und was der Betreff ist. Dafür legen wir verschiedene Variablen an.
<?php
$strEmpfaenger = 'lulu@thepinkpearl.de'; // Wer ist der Empfänger dieser Email? (Du - deine EMail Adresse :D)
$strFrom = 'lulu <lulu@thepinkpearl.de>'; // Von wem die EMail kommt (von deiner Seite)
$strSubject = 'Kontakt Formular'; // Betreff
$strDelimiter = ":\t";
$headers = "Date: ". date("r") ."\r\n". "From: ".$strFrom ."\r\n";
?>
Damit die EMail nun erst gesendet wird, wenn der Benutzer auf den Button klickt, musst du das zuerst abfragen.
<?php
if($_POST)
{Nun brauchen wir den Inhalt der EMail. Mit “each($Post) erhälst du alle Felder. Diese durchläufst du nun mithilfe einer while Schleife und stückelst so deine EMail zusammen und speicherst sie schließlich im Mailtext:
$strMailtext = "";
while(list($strName,$value) = each($_POST)){
if(is_array($value)){
foreach($value as $value_array){
$strMailtext .= $strName.$strDelimiter.$value_array."\n";
}
}
else{
$strMailtext .= $strName.$strDelimiter.$value."\n";
}
}Nun brauchst du nur noch die PHP Funktion aufzurufen, welche die EMail auch tatsächlich versendet. Die Funktion dafür heißt “mail“:
mail($strEmpfaenger, $strSubject, $strMailtext, $headers)
or die("Die Mail konnte nicht versendet werden.");Das “or die” sorgt dafür, dass im Fehlerfall eine Meldung unter dem Kontaktformular ausgegeben wird.
Die letzte Meldung wird schließlich ausgegeben, wenn die EMail erfolgreich versendet wurde.
<br/><p><b>Wir werden deine Anfrage so schnell wie möglich bearbeiten.</b></p>Ich hoffe, nach diesem kleinen Tutorial verstehst du den Kontaktformular Code ein bisschen besser. Selbstverständlich kannst du dieses Formular auch abändern. Bei Fragen oder Problemen kannst du mir gerne schreiben.
