b-projects

Kontaktformular mit PHP erstellen
Dienstag, den 16. September 2008 um 17:43 Uhr

Hallo,

das folgende Tutorial zeigt wie Sie ein Kontaktformular für Ihre Homepage erstellen.

Zuerst überlegen wir uns was das Kontaktformular alles können soll. Also ich halte das Formular ganz simpel. Es soll ein Eingabefeld für den Namen, den Betreff, die E-Mail Adresse und natürlich ein Feld für die Nachricht beinhalten.

 

 

 

Wie implementieren wir das nun? Auf an die Arbeit!

Als erstes erstellen wir eine neue PHP-Datei namens index.php. Sie können dies einfach auf Ihrer Festplatte durchführen und die Daten später auf Ihr Webspace hochladen.

Im nächsten Schritt kümmern wir uns um das HTML Gerüst. Schreiben sie folgenden Code in die index.php:

<html>
<head>
<title>Mein Kontaktformular</title>
<meta name="author" content="b-projects.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
</html>

Ich gehe davon aus dass ein wenig HTML Kentnisse vorhanden sind.
Mit <title>Mein Kontaktformular</title> wird der Titel der Seite festgelegt und danach die Meta Angaben (für uns nicht so wichtig).

So nun definieren wir das eigentliche Formular im <body>
Fügen Sie nach dem </head> folgenden Code ein:

<body>
<div align="center">
<br><br>

<?php
// wurde auf ABSCHICKEN geklickt?
if(isset($_POST["submit"]))
{

// es wurde kein Name eingetragen
if(!$_POST["name"] || empty($_POST["name"]))
{
?>
<div align="center"><span class="mail">Du hast folgende Angabe vergessen einzutragen: Name.</span> <a href="/<?php echo $_SERVER["PHP_SELF"]; ?>" title="zurück">zurück</a></div>
<?php
}

// es wurde keine E-Mail Adresse eingetragen
elseif(!$_POST["email"] || empty($_POST["email"]))
{
?>
<div align="center"><span class="mail">Du hast folgende Angabe vergessen einzutragen: eMail-Adresse.</span> <a href="/<?php echo $_SERVER["PHP_SELF"]; ?>" title="zurück">zurück</a></div>
<?php
}

// es wurde keine Nachricht eingetragen
elseif(!$_POST["nachricht"] || empty($_POST["nachricht"]))
{
?>
<div align="center"><span class="mail">Du hast folgende Angabe vergessen einzutragen: Nachricht.</span> <a href="/<?php echo $_SERVER["PHP_SELF"]; ?>" title="zurück">zurück</a></div>
<?php
}

// ist alles Eingetragen dann
else
{
// Erzeuge den E-Mail Header

// E-Mail Absender
$header.="From: \"".$_POST["name"]."\" <".$_POST["email"].">\n";

// Domain also was in der Mailadresse hinter dem ‘@’ steht
$header.="Organization: ".substr($deinemailadresse,strpos($deinemailadresse,"@"))."\n";

// Format der Mail
$header.="Content-Type: text/plain;\n";

// Name des Mailprogramms, hier die PHP-Version
$header.="X-Mailer: PHP/".phpversion();

 

// Die Nachricht
$nachricht1 = "".$_POST["nachricht"]."\n\n";

// Mail wird nun verschickt
mail("\"".$deinname."\" <".$deinemailadresse.">",$betreff,$nachricht1, $header);

// Betreff der Dankesmail
$betreff_danke = "Vielen Dank";

// Text der Dankesmail
$body_danke = "Hallo ".$_POST["name"].",\n\nDanke für deine Nachricht!\n\nSie erhalten in Kürze Antwort von mir.\n\n\nMit freundlichen Gruessen\n\n".$deinname."\n\n--\n\nIhre Nachricht:\n\n".$nachricht1."";

// Header für die Dankesmail, analog zu oben
$header_danke.="\"".$deinname."\" <".$deinemailadresse.">";
$header_danke.="Organization: ".substr($deinemailadresse,strpos($deinemailadresse,"@"))."\n";
$header_danke.="Content-Type: text/plain;\n";
$header_danke.="X-Mailer: PHP/".phpversion();

// Senden von der Dankmail
mail("\"".$_POST["name"]."\" <".$_POST["email"].">",$betreff_danke,$body_danke,$header_danke);
?>

<table border="0"><tr><td colspan="2" align="left">
<span class="mail">Vielen Dank für folgende Nachricht</span></td></tr>
<tr><td colspan="2" align="center"> </td></tr>
<tr><td><span class="mail">Dein Name:</span></td><td><?php echo $_POST["name"]; ?></td></tr>
<tr><td><span class="mail">Deine eMail-Adresse:</span></td><td><a href="mailto:<?php echo $_POST["email"]; ?>"><?php echo $_POST["email"]; ?></a></td></tr>

<?php } ?>
<tr><td valign="top"><span class="mail">Deine Nachricht:</b></td><td><?php echo nl2br($_POST["nachricht"]); ?></td></tr><tr>
<tr><td colspan="2" align="center"> </td></tr>
<td colspan="2" align="center"><span class="mail">Eine Dankes-eMail von mir ist bereits unterwegs!</span></td></tr></table>
<?php
} // end alles eingetragen

// wenn nicht gesendet, Mailformular ausgeben
else
{
?>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Dein Name:</span></td>
<td><input type="text" name="name" class="formular"></td>
</tr>
<tr>
<td>Betreff:</td>
<td><input type="text" name="betreff" class="formular"></td>
</tr>
<tr>
<td>Deine eMail-Adresse</td>
<td><input type="text" name="email" class="formular"></td>
</tr>

<tr>
<td valign="top">Deine Nachricht:</td>
<td><textarea name="nachricht" cols="50" rows="5" class="feld"></textarea></td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="reset" value="zurücksetzen" class="formular"> <input type="submit" value="abschicken" name="submit" class="formular"></td>
</tr>
</table>
</form>
<!-- end-nicht-gesendet -->
<?php } ?>
</div>
</body>

 

Puh ziemlich viel Code ;-) Zum Glück ist der ziemlich selbsterklärend.
Das Formular wird ab <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> bis </form> erstellt.
Bei dem Attribut action wird angegeben welche PHP Datei für die Auswertung des Formulars zuständig ist.

In unserem Fall haben wir den Auswertungsscript in der gleichen Datei wie das Formular (index.php). echo $_SERVER["PHP_SELF"]; ermittelt den Namen der aktuellen Datei.
Was bedeutet aber nun <?php und ?>. Mit <?php sagen wir dass sich der folgende Code um PHP-Code handelt. Mit ?> schließen wir den PHP-Code ab.

Ich werde auf das Formular in HTML nicht näher eingehen. Genaueres über Formulare in HTML finden Sie hier.

Nun aber zum PHP Teil:
Da der PHP Script auch aufgerufen wird wenn unsere Formular Seite zum ersten mal aufgerufen wurde und somit noch keine Daten (Name, E-Mail, Nachricht..) zu Verfügung stehen, müssen wir dies abfragen.

Mit isset($_POST["submit"]) ermitteln wir ob das Formular schon abgeschickt wurde. Ist dies der Fall ist die If-Bedingung erfüllt und wir fahren fort mit der Überprüfung der Benutzereingabe.
Mit if(!$_POST["name"] || empty($_POST["name"])) überprüfen wir ob der Name eingegeben wurde. In dieser Bedingung allerdings ob er nicht eingegeben wurde. In diesem Fall zeigen wir einen Kurzen Hinweis an:

<div align="center">
<span class="mail">Du hast folgende Angabe vergessen einzutragen: Name.</span>
<a href="/<?php echo $_SERVER["PHP_SELF"]; ?>" title="zurück">zurück</a>
</div>

Analog dazu funktionieren auch das Prüfen der E-Mail Adresse und der Nachricht.

Die E-Mail wird mit dem Befehl mail("\"".$deinname."\" <".$deinemailadresse.">",$betreff,$nachricht1, $header); abgeschickt. Also mail( mailadresse mit oder ohne name, betreff, mail header).
Zuvor muss noch der Mail Header erstellt werden. Der Code ist selbsterklärend.

 

Bisher haben wir $deinemailadresse und $deinname noch gar nicht definiert. Dies machen wir in einer separaten Datei, somit können diese Parameter schneller geändert werden.

Erstellen Sie nun eine weitere PHP-Datei namens config.php

Fügen Sie folgenden Code ein:

<?php

// Eigene Kontaktdaten
$deinname = "hierDeinenNamenEintragen";
$deinemailadresse = "deine@email_adresse.de";

?>

 

Jetzt müssen wir die config.php Datei noch in unser Formularscript einbunden.

Gehen Sie wieder in die index.php und tagen Sie zu beginn des PHP-Scripts den Include-Befehl ein.

Damit das ganze so aussieht:

<?php

include "config.php";
// wurde auf ABSCHICKEN geklickt?
if(isset($_POST["submit"]))
{

 

Nun sind die beiden Variablen $deinname und $deinemailadresse bekannt.

Probieren Sie Ihr Formular aus. Laden sie die beiden Dateien auf Ihren Webspace hoch und rufen Sie die index.php auf.

Damit das ganze noch schöner aussieht können sie noch ein CSS Stylesheet einbinden. Ein fertiges Stylesheet können Sie hier downloaden und in das gleiche Verzeichnis wie die index.php laden.

Um das Stylesheet zu verwenden müssen Sie folgende Zeile zwischen <head> und </head> in die index.html einfügen:

<link rel="stylesheet" type="text/css" href="/style.css">

 

{googleAds}
<div style="float:right">
<script type="text/javascript"><!--
google_ad_client = "pub-6665307871608047";
google_ad_slot = "1234567891";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
{/googleAds}

 

 

Die 3 fertigen Dateien können Sie hier auch downloaden:

Kontaktformular.zip

 

Viel Spaß beim nachmachen :-)

Aktualisiert ( Dienstag, den 24. Januar 2012 um 08:55 Uhr )
 

Tutorials Übersicht