Sie möchten eine Kontaktformular auf Ihrer Webseite einbinden, scheuen aber die Herausforderung, selbst Code zu schreiben? Keine Sorge! Mit der Kombination aus HTML-Templates und etwas grundlegendem PHP können Sie ein voll funktionsfähiges Formular erstellen, auch wenn Sie keine umfassenden Programmierkenntnisse besitzen. In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie das geht.
Warum ein Kontaktformular unverzichtbar ist
Ein Kontaktformular ist mehr als nur eine nette Geste auf Ihrer Webseite. Es ist ein essenzielles Werkzeug für die Kommunikation mit Ihren Besuchern und potenziellen Kunden. Hier sind einige Gründe, warum ein Kontaktformular so wichtig ist:
- Direkter Draht zu Ihren Besuchern: Ermöglichen Sie eine einfache Kontaktaufnahme, ohne dass Besucher Ihre E-Mail-Adresse manuell abtippen müssen.
- Spamschutz: Ein Formular kann durch Captchas und andere Mechanismen vor Spam geschützt werden.
- Professioneller Eindruck: Ein gut gestaltetes Kontaktformular wirkt professionell und vertrauenswürdig.
- Daten sammeln: Sie können gezielt Informationen abfragen, die für Ihre Zwecke relevant sind (z.B. Branche, Grund der Kontaktaufnahme).
- Zeitersparnis: Strukturierte Anfragen helfen Ihnen, E-Mails effizienter zu bearbeiten.
Grundlagen: HTML für das Kontaktformular
Der erste Schritt ist die Erstellung der HTML-Struktur für Ihr Kontaktformular. HTML (HyperText Markup Language) ist die Grundlage jeder Webseite und definiert die Elemente und deren Anordnung. Hier ist ein einfaches Beispiel für ein Kontaktformular:
<form action="process.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Nachricht:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea><br><br>
<input type="submit" value="Senden">
</form>
Erklärung:
<form>: Definiert das Formular.action="process.php"gibt die Datei an, die die Formulardaten verarbeitet (dazu später mehr).method="post"legt fest, dass die Daten per POST-Methode gesendet werden.<label>: Beschreibt das zugehörige Eingabefeld. Dasfor-Attribut verknüpft das Label mit dem entsprechendeninput-Feld.<input type="text">: Erstellt ein Textfeld für den Namen.idundnamesind wichtig für die Verarbeitung der Daten.requiredsorgt dafür, dass das Feld ausgefüllt sein muss.<input type="email">: Erstellt ein Eingabefeld für die E-Mail-Adresse. Der Browser validiert, ob die Eingabe eine gültige E-Mail-Adresse ist.<textarea>: Erstellt ein mehrzeiliges Textfeld für die Nachricht.rowsundcolsdefinieren die Größe des Feldes.<input type="submit">: Erstellt einen Button zum Absenden des Formulars.
Sie können dieses Grundgerüst nach Belieben anpassen und weitere Felder hinzufügen, z.B. für die Telefonnummer, Betreff oder eine Checkbox für die Zustimmung zu den Datenschutzbestimmungen.
PHP: Die Datenverarbeitung im Hintergrund
Während HTML für die Struktur des Formulars zuständig ist, übernimmt PHP (Hypertext Preprocessor) die Verarbeitung der Daten, nachdem das Formular abgeschickt wurde. PHP ist eine serverseitige Skriptsprache, die auf dem Webserver ausgeführt wird.
Erstellen Sie eine Datei namens process.php (oder den Namen, den Sie im action-Attribut des Formulars angegeben haben) und fügen Sie folgenden Code ein:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = strip_tags(trim($_POST["name"]));
$email = strip_tags(trim($_POST["email"]));
$message = strip_tags(trim($_POST["message"]));
// Validate the data
if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Bitte füllen Sie alle Felder korrekt aus.";
exit;
}
$recipient = "[email protected]"; // Ersetzen Sie dies durch Ihre E-Mail-Adresse
$subject = "Neue Nachricht von Ihrer Webseite";
$email_content = "Name: $namen";
$email_content .= "E-Mail: $emailnn";
$email_content .= "Nachricht:n$messagen";
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Vielen Dank! Ihre Nachricht wurde gesendet.";
} else {
http_response_code(500);
echo "Es gab ein Problem beim Senden Ihrer Nachricht.";
}
} else {
http_response_code(403);
echo "Es gab ein Problem mit Ihrer Anfrage.";
}
?>
Erklärung:
<?php ... ?>: Markiert den PHP-Code.if ($_SERVER["REQUEST_METHOD"] == "POST"): Prüft, ob das Formular per POST-Methode abgeschickt wurde.$name = strip_tags(trim($_POST["name"])): Holt die Daten aus dem$_POST-Array (das die Formulardaten enthält), entfernt HTML-Tags (strip_tags) und Leerzeichen am Anfang und Ende (trim). Dies dient der Sicherheit.filter_var($email, FILTER_VALIDATE_EMAIL): Überprüft, ob die E-Mail-Adresse ein gültiges Format hat.$recipient = "[email protected]": Hier müssen Sie **Ihre eigene E-Mail-Adresse** eintragen, an die das Formular gesendet werden soll.mail($recipient, $subject, $email_content, $email_headers): Diese Funktion sendet die E-Mail. Sie benötigt die Empfängeradresse, den Betreff, den Inhalt und die Header.http_response_code(...): Setzt den HTTP-Statuscode, um dem Browser zu signalisieren, ob die Anfrage erfolgreich war.echo "...": Gibt eine Nachricht an den Benutzer aus.
Wichtige Hinweise:
- Sicherheit: Die Entfernung von HTML-Tags mit
strip_tagsist wichtig, um Cross-Site Scripting (XSS)-Angriffe zu verhindern. - E-Mail-Konfiguration: Stellen Sie sicher, dass Ihr Webserver für das Senden von E-Mails konfiguriert ist. Dies ist oft der Fall, aber im Zweifelsfall fragen Sie Ihren Hosting-Anbieter.
- Spamschutz: Erwägen Sie, einen Spamschutz wie reCAPTCHA in Ihr Formular zu integrieren.
- Fehlermeldungen: Passen Sie die Fehlermeldungen an, um sie benutzerfreundlicher zu gestalten.
Die Kombination: HTML Template & PHP
Nun haben Sie die beiden grundlegenden Bausteine: das HTML-Formular und das PHP-Skript zur Verarbeitung. Laden Sie die HTML-Datei auf Ihren Webserver hoch (z.B. index.html oder contact.html) und die process.php-Datei in das gleiche Verzeichnis. Achten Sie darauf, dass die action im <form>-Tag der HTML-Datei korrekt auf die process.php-Datei verweist.
Wenn Sie nun das Formular auf Ihrer Webseite aufrufen und abschicken, sollte das PHP-Skript die Daten verarbeiten und Ihnen eine E-Mail senden. Wenn Fehler auftreten, überprüfen Sie die Konfiguration Ihres Webservers und die Fehlermeldungen in der process.php-Datei (z.B. durch temporäres Einfügen von error_reporting(E_ALL); ini_set('display_errors', 1); am Anfang der Datei – aber entfernen Sie dies wieder, wenn das Formular funktioniert).
Templates nutzen: Einfacher geht’s kaum
Es gibt viele vorgefertigte HTML-Templates für Kontaktformulare, die Sie kostenlos herunterladen und anpassen können. Diese Templates bieten oft ein ansprechendes Design und sind bereits für verschiedene Geräte optimiert. Suchen Sie einfach nach „HTML Contact Form Template” in einer Suchmaschine. Achten Sie auf Lizenzen, die kommerzielle Nutzung erlauben, falls Sie das Formular geschäftlich nutzen möchten.
Nach dem Herunterladen eines Templates müssen Sie in der Regel nur noch:
- Die
actionim<form>-Tag auf Ihreprocess.php-Datei anpassen. - Das Design an Ihre Webseite anpassen (z.B. Farben, Schriftarten).
- Die E-Mail-Adresse in der
process.php-Datei ändern.
Fazit: Kontaktformular leicht gemacht
Mit etwas HTML und grundlegendem PHP können Sie auch ohne tiefgehende Programmierkenntnisse ein funktionierendes Kontaktformular erstellen. Nutzen Sie die vorhandenen HTML-Templates, um sich das Leben noch einfacher zu machen. Achten Sie dabei immer auf die Sicherheit und konfigurieren Sie Ihren Webserver korrekt. Viel Erfolg!