Kontaktformular mit HTML5, PHP, JavaScript und Ajax
von Thomas
Erstellt am 31.05.2019
Setzt man nicht auf ein CMS wie WordPress, müssen Funktionen einer modernen Webseite selbst programmiert werden. In diesem Artikel geht es um das Beispiel von einem Kontaktformular in Kombination aus HTML5, PHP und JavaScript.
HTML5
Das Grundgerüst für das Ganze ist zunächst das Formular in HTML5 Code:
<h2>Kontaktieren Sie uns:</h2> <form id="my-form" > <input type="text" id="name" name="name" placeholder="Name" required> <input type="email" id="email" name="email" placeholder="E-Mail Adresse" required> <input type="text" id="subject" name="subject" placeholder="Betreff" required> <textarea name="message" type="text" id="message" placeholder="Nachricht" required> </textarea> <input type="submit" value="Senden" id="submit"> <div id="wait"> </div> <div id="response"> </div> </form>
HTML5 bringt uns schon eine Validation mit. Sie ist sehr vorteilhaft, macht uns das Leben einfacher und wird mit dem Parameter „required“ angegeben. Sich nur darauf zu verlassen wäre etwas blauäugig , daher werden die übergebenen Daten zusätzlich in PHP geprüft - dazu gleich mehr.
Zur Gestaltung des Kontaktformulars können z. B. schöne Vorschläge von der Webseite codepen.io genommen werden. Dort bin ich gerne unterwegs um Instruktionen zu erhalten.
PHP
Der PHP Code könnte z. B. so aussehen:
<?php
//Funktionen
function validateName($name) {
if (preg_match('/^[\wäüöß ]+$/', $name)) {
return true;
}
return false;
}
function validateSubject($subject){
if (preg_match('/^[\wäüö ]+$/', $subject)) {
return true;
}
return false;
}
function validateMessage($message){
if (preg_match('/^[\wäüö \n\r\.\,\;\:!?ß]+$/', $message)) {
return true;
}
return false;
}
//Variablen Sonstige
$firma = "Ihre Firma";
$domain = "domain.tld";
//variablen aus dem HTML Form
$name = trim($_POST['name']);
$email = $_POST['email'];
$subject = trim($_POST['subject']);
$message = $_POST['message'];
//Variablen für die Mail (z. B. Headers)
$sender ="info@$domain";
$formcontent="Von: $name \n Message: \n $message";
$contentsender="Sehr geehrte(r) Frau/Herr $name, \n \n Vielen Dank, dass Sie uns kontaktiert haben. Wir werden uns schnellstmöglich bei Ihnen melden. \n Ihre $firma.";
$empfaenger = "info@daomein.tld";
$betreff = "Kontaktformular Webseite $firma";
$headersender = "From: $email" . "
" . "Reply-to: $email" . "\\r\
" . "Content-Type: text/plain; charset='UTF-8'";
$headerempfaenger = "From: $sender" . "
" . "Reply-to: $sender" . "\\r\
" . "Content-Type: text/plain; charset='UTF-8'";
//Check, ob $_POST leer ist
if (!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['subject']) && !empty($_POST['message'])){
//check ob der Name ok ist
if(validateName($name)){
//check ob die Mail ok ist
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
//Check ob das subject ok ist
if (validateSubject($subject)) {
//Check ob die Message ok ist
if (validateMessage($message)) {
//Email an den Betreiber der Webseite
mail($empfaenger, $betreff, $formcontent, $headersender) or die("Error!");
//Bestätigungsmail an den Kunden
mail($email, $betreff, $contentsender, $headerempfaenger) or die("Error!");
header('Content-Type: application/json');
echo json_encode(array('mail' => 'send'));
exit;
}else {
header('Content-Type: application/json');
echo json_encode(array('mail' => 'message'));
exit;
}
}else {
header('Content-Type: application/json');
echo json_encode(array('mail' => 'subject'));
exit;
}
}else {
header('Content-Type: application/json');
echo json_encode(array('mail' => 'mail'));
exit;
}
}else {
header('Content-Type: application/json');
echo json_encode(array('mail' => 'name'));
exit;
}
}else {
header('Content-Type: application/json');
echo json_encode(array('mail' => 'empty'));
exit;
}?>
Die ersten drei Funktionen sind zur Überprüfung, ob die Übergebenen Parameter richtige sind. Mit der Funktion preg_match einzelne Buchstaben bei der Eingabe auf eine Whitelist gesetzt. Dies ist bestimmt nicht die eleganteste Lösung, aber eine der sichersten. Hiermit validieren wir, dass Nutzer keinen böswilligen Schadecode auf unserem Server ausführen.
Anschließend wird noch geprüft, ob die übergebenen Parameter leere Strings enthalten und entsprechendes Feedback gegeben. Bei der E-Mail benutzen wir direkt den vorgegebenen Filter von PHP zur Überprüfung.
Das Ergenbis geben wir in einem Array zurück, sodass wir die Meldungen mit JavaScript verarbeiten können.
JavaScript (jQuery) mit Ajax
Damit wir das Frontend auch entsprechend Nutzerfreundlich gestalten können, übergeben wir die Parameter an den PHP Code per AJAX POST. Anschließend agieren wir in der DOM mit schick aufbereitetem Feedback an den Kunden. Beachtet, das der Code in jQuery geschrieben ist:
jQuery(document).ready(function($) {
//Variablen bekommen
let button = $("#submit");
let form = $("#my-form");
let response = $("#response");
let wait = $("#wait");
//Variablen zum löschen bekommen
let name = $("#name");
let email = $("#email");
let subject = $("#subject");
let message = $("#message");
//Warten, bis senden Button gedrückt wurde, dann Funktion ausführen
$(form).submit(function(event) {
event.preventDefault();
//Den Button deaktivieren, damit nicht mehrfach Mails gesendet werden
$(button).attr("disabled", true);
//Kunden im Frontend Feedback geben, dass die Anfrage verarbeitet wird
$(wait).addClass("first-feedback").addClass("mt-4");
$(wait).append("<p>Ihre Anfrage wird verarbeitet, einen Moment bitte...</p>");
//Daten für AJAX POST aufbereiten
let form_data = $(this).serialize()
//POST and PHP
$.ajax({
url: "/datei.php",
method: "POST",
data : form_data,
success: function(data) {
let error = data;
$(wait).remove();
//checken, welche Meldung PHP zurückgibt und entsprechend reagieren
switch (error.mail){
case 'send':
$(response).addClass("send-message").addClass("mt-4");
$(response).append("<p>Ihre Nachricht wurde gesendet. <br> Bitte überprüfen Sie Ihren Posteingang.</p>");
break;
case 'name':
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Sie haben einen falschen, oder falsch formatierten Namen eingebenen. Nachricht wurde nicht gesendet.</p>");
case 'mail':
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Bitte geben Sie eine gültige E-Mail Adresse an. Nachricht wurde nicht gesendet.</p>");
case 'subject':
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Sie haben einen falschen, oder falsch formatierten Betreff eingebenen. Nachricht wurde nicht gesendet.</p>");
case 'message':
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Sie haben eine falsche, oder falsch formatierte Nachricht eingebenen. Nachricht wurde nicht gesendet.</p>");
case 'empty':
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Sie haben nicht alle Felder ausgefüllt. Nachricht wurde nicht gesendet.</p>");
};
},
error: function(){
$(response).addClass("failed-message").addClass("mt-4");
$(response).append("<p>Etwas ist schief gelaufen, versuchen Sie es bitte später erneut.</p>");
}
});
//Eingabefelder leeren
$("#name").val("");
$("#email").val("");
$("#subject").val("");
$("#message").val("");
});
});
Mit CSS könnt ihr die Klassen first-feedback, failed-message und send-message erstellen und anzeigen lassen.