Erstellen eines PHP-E-Mail-Skripts und -Formulars
German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)
Formulare auf Websites können für viele Zwecke verwendet werden, abgesehen davon, dass sie ein Ort sind, an dem Sie die Website-Administratoren kontaktieren können. In früheren Beiträgen habe ich behandelt, wie Sie ein voll funktionsfähiges Kontaktformular in PHP erstellen und wie Sie Ihr eigenes Captcha erstellen und in Ihre Kontaktformulare integrieren können. In diesem Tutorial liegt unser Fokus auf der Erstellung von Formularen in PHP, die anderen Zwecken dienen sollen, z. B. dem Sammeln von Informationen über einen Bewerber, der Buchung von Hotelzimmern oder dem Abrufen von Informationen über Hochzeitsveranstaltungen von Kunden.
Auswählen der richtigen Felder für Ihre Formulare
Im Kontaktformular-Tutorial haben wir gelernt, dass verschiedene Organisationen und Websites höchstwahrscheinlich spezifische Informationen von Personen erhalten möchten, die sie kontaktieren, um sie bestmöglich zu unterstützen. Zum Beispiel könnte ein Kontaktformular auf einer Schulwebsite Eltern nach Informationen über ihre Kinder fragen, die an dieser Schule eingeschrieben sind. In ähnlicher Weise kann das Kontaktformular auf einer Shopping-Website Informationen über das letzte Produkt sammeln, das die Leute gekauft haben, um sie besser zu bedienen.
Wenn Kontaktformulare zwischen verschiedenen Websites und Organisationen so unterschiedlich sein können, ist davon auszugehen, dass Formulare, die völlig unterschiedlichen Zwecken dienen sollen, sehr unterschiedliche Bereiche haben. Zum Beispiel werden Sie höchstwahrscheinlich Leute fragen, die ein Hotelzimmer buchen, ob sie von anderen Erwachsenen oder Kindern begleitet werden. Das Gleiche von einem Bewerber zu verlangen, würde keinen Sinn machen.
Dies ist eine wichtige Sache, an die Sie sich erinnern sollten, wenn Sie diesem Tutorial folgen. Das Grundkonzept, ein Formular zu erstellen, alle Informationen zu sammeln und irgendwohin per E-Mail zu senden, bleibt gleich, aber der Code muss mit ziemlicher Sicherheit geändert werden, um für Ihren Fall zu funktionieren. Möglicherweise möchten Sie Ihren Formularen andere Eingabefelder hinzufügen und diesen Feldern andere Namen zuweisen. Dies wirkt sich dann auf den PHP-Code im Backend aus. Wenn Sie Änderungen an den Formularen vornehmen, stellen Sie sicher, dass Sie auch den PHP-Code aktualisieren.
Sie können sich diese Liste der 20 besten PHP-E-Mail-Formulare ansehen, um sich über das Layout von Formularelementen oder verschiedenen Eingabefeldern, die Sie Ihren Formularen hinzufügen möchten, inspirieren zu lassen.
Erstellen eines HTML-Formulars
In diesem Tutorial erstellen wir als Beispiel ein Formular zur Buchung von Hotelzimmern. Der Einfachheit halber werden wir auch keine zusätzlichen JavaScript- oder PHP-Bibliotheken verwenden.
Mit diesem Gedanken im Hinterkopf schreiben wir das Markup für unser Formular. Wir müssen Personen, die eine Reservierung vornehmen, nach ihrem Namen, ihrer E-Mail-Adresse und Ihrer Telefonnummer fragen. Danach bitten wir sie, Details über die Anzahl der Kinder und Erwachsenen, die sie begleiten werden, die Check-in- und Check-out-Daten sowie die von ihnen bevorzugten Zimmertypen anzugeben. Am Ende werden wir sie fragen, ob es noch etwas gibt, das wir vor ihrer Ankunft wissen sollten.
1 |
<form action="reservation.php" method="post"> |
2 |
<div class="elem-group"> |
3 |
<label for="name">Your Name</label> |
4 |
<input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required> |
5 |
</div>
|
6 |
<div class="elem-group"> |
7 |
<label for="email">Your E-mail</label> |
8 |
<input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> |
9 |
</div>
|
10 |
<div class="elem-group"> |
11 |
<label for="phone">Your Phone</label> |
12 |
<input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required> |
13 |
</div>
|
14 |
<hr>
|
15 |
<div class="elem-group inlined"> |
16 |
<label for="adult">Adults</label> |
17 |
<input type="number" id="adult" name="total_adults" placeholder="2" min="1" required> |
18 |
</div>
|
19 |
<div class="elem-group inlined"> |
20 |
<label for="child">Children</label> |
21 |
<input type="number" id="child" name="total_children" placeholder="2" min="0" required> |
22 |
</div>
|
23 |
<div class="elem-group inlined"> |
24 |
<label for="checkin-date">Check-in Date</label> |
25 |
<input type="date" id="checkin-date" name="checkin" required> |
26 |
</div>
|
27 |
<div class="elem-group inlined"> |
28 |
<label for="checkout-date">Check-out Date</label> |
29 |
<input type="date" id="checkout-date" name="checkout" required> |
30 |
</div>
|
31 |
<div class="elem-group"> |
32 |
<label for="room-selection">Select Room Preference</label> |
33 |
<select id="room-selection" name="room_preference" required> |
34 |
<option value="">Choose a Room from the List</option> |
35 |
<option value="connecting">Connecting</option> |
36 |
<option value="adjoining">Adjoining</option> |
37 |
<option value="adjacent">Adjacent</option> |
38 |
</select>
|
39 |
</div>
|
40 |
<hr>
|
41 |
<div class="elem-group"> |
42 |
<label for="message">Anything Else?</label> |
43 |
<textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required></textarea> |
44 |
</div>
|
45 |
<button type="submit">Book The Rooms</button> |
46 |
</form>
|
Wir haben zwei grundlegende Muster verwendet, um zu überprüfen, ob der angegebene Name und die Telefonnummern gültig sind. Telefonnummern folgen je nach Gebietsschema unterschiedlichen Formaten. Dies bedeutet, dass Sie den Wert des Musterattributs entsprechend aktualisieren müssen.
Wir haben auch den Mindestwert für Erwachsene und Kinder auf 1 bzw. 0 festgelegt. Auf diese Weise können wir verhindern, dass Menschen fälschlicherweise negative Werte hinzufügen.
Sie können diesem Formular weitere Elemente für andere Dienstleistungen hinzufügen, die das Hotel anbietet, wie Abholung, Zimmerservice usw.
Im Moment können Besucher sowohl das Check-in- als auch das Check-out-Datum auf einen vergangenen Wert festlegen. Wir können dies vermeiden, indem wir einfach den Wert des min-Attributs sowohl für das Ein- als auch für das Auscheckdatum festlegen. In unserem Fall werden wir das minimal mögliche Check-in-Datum auf den aktuellen Tag festlegen. Der Wert des min-Attributs des Auscheckdatums ist das Eincheckdatum.
Der folgende JavaScript-Code übernimmt die gesamte Logik für uns. Die Monate sind nullbasiert, daher addieren wir 1 zum zurückgegebenen Wert, um den tatsächlichen Monat zu erhalten. Der zurückgegebene Datumswert kann je nach aktueller Uhrzeit eine beliebige ganze Zahl von 1 bis 31 sein.
Wenn die Datums- und Monatswerte einstellig sind, werden sie mit einer zusätzlichen 0 aufgefüllt, sodass die endgültige Zeichenfolge in einem gültigen Format bleibt.
1 |
var currentDateTime = new Date(); |
2 |
var year = currentDateTime.getFullYear(); |
3 |
var month = (currentDateTime.getMonth() + 1); |
4 |
var date = currentDateTime.getDate(); |
5 |
|
6 |
if(date < 10) { |
7 |
date = '0' + date; |
8 |
}
|
9 |
if(month < 10) { |
10 |
month = '0' + month; |
11 |
}
|
12 |
|
13 |
var dateTomorrow = year + "-" + month + "-" + date; |
14 |
var checkinElem = document.querySelector("#checkin-date"); |
15 |
var checkoutElem = document.querySelector("#checkout-date"); |
16 |
|
17 |
checkinElem.setAttribute("min", dateTomorrow); |
18 |
|
19 |
checkinElem.onchange = function () { |
20 |
checkoutElem.setAttribute("min", this.value); |
21 |
}
|
Die folgende CodePen-Demo zeigt uns, wie sich das Formular nach dem Hinzufügen der oben genannten Markup- und JavaScript-Funktionalität verhält.
Senden der Formulardaten per E-Mail mit PHP
Der letzte Schritt besteht darin, alle Daten aus unserem Formular zu sammeln und sie in einer E-Mail an betroffene Personen zu senden. Das ist eigentlich sehr einfach. Zuerst sammeln wir alle Informationen mit $_POST Variablen. Sobald wir die erforderlichen Informationen haben, verefizieren wir sie, um alles Bösartige zu entfernen. Schließlich erstellen wir den Text unserer HTML-E-Mail und senden sie dann mit der mail()-Funktion in PHP.
Der folgende Code gehört in eine Datei namens reservation.php. Der Dateiname wird anders sein, wenn Sie den Wert des action-Attributs des von im vorherigen Abschnitt geändert haben.
1 |
<?php
|
2 |
|
3 |
if($_POST) { |
4 |
$visitor_name = ""; |
5 |
$visitor_email = ""; |
6 |
$visitor_phone = ""; |
7 |
$total_adults = ""; |
8 |
$total_children = ""; |
9 |
$checkin_date = ""; |
10 |
$checkout_date = ""; |
11 |
$room_type = ""; |
12 |
$visitor_message = ""; |
13 |
|
14 |
if(isset($_POST['visitor_name'])) { |
15 |
$visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING); |
16 |
}
|
17 |
|
18 |
if(isset($_POST['visitor_email'])) { |
19 |
$visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']); |
20 |
$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL); |
21 |
|
22 |
}
|
23 |
|
24 |
if(isset($_POST['visitor_phone'])) { |
25 |
$visitor_phone = filter_var($_POST['visitor_phone'], FILTER_SANITIZE_NUMBER_INT); |
26 |
}
|
27 |
|
28 |
if(isset($_POST['total_adults'])) { |
29 |
$total_adults = filter_var($_POST['total_adults'], FILTER_SANITIZE_NUMBER_INT); |
30 |
}
|
31 |
|
32 |
if(isset($_POST['total_children'])) { |
33 |
$total_children = filter_var($_POST['total_children'], FILTER_SANITIZE_NUMBER_INT); |
34 |
}
|
35 |
|
36 |
if(isset($_POST['checkin'])) { |
37 |
$checkin_date = filter_var($_POST['checkin'], FILTER_SANITIZE_NUMBER_INT); |
38 |
}
|
39 |
|
40 |
if(isset($_POST['checkout'])) { |
41 |
$checkout_date = filter_var($_POST['checkout'], FILTER_SANITIZE_NUMBER_INT); |
42 |
}
|
43 |
|
44 |
if(isset($_POST['room_preference'])) { |
45 |
$room_type = filter_var($_POST['room_preference'], FILTER_SANITIZE_STRING); |
46 |
}
|
47 |
|
48 |
if(isset($_POST['visitor_message'])) { |
49 |
$visitor_message = htmlspecialchars($_POST['visitor_message']); |
50 |
}
|
51 |
|
52 |
|
53 |
$recipient = "booking@demo.com"; |
54 |
|
55 |
$headers = 'MIME-Version: 1.0' . "\r\n" |
56 |
.'Content-type: text/html; charset=utf-8' . "\r\n" |
57 |
.'From: ' . $visitor_email . "\r\n"; |
58 |
|
59 |
$email_content = "<html><body>"; |
60 |
$email_content .= "<table style='font-family: Arial;'><tbody><tr><td style='background: #eee; padding: 10px;'>Visitor Name</td><td style='background: #fda; padding: 10px;'>$visitor_name</td></tr>"; |
61 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Email</td><td style='background: #fda; padding: 10px;'>$visitor_email</td></tr>"; |
62 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Phone</td><td style='background: #fda; padding: 10px;'>$visitor_phone</td></tr>"; |
63 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Adults</td><td style='background: #fda; padding: 10px;'>$total_adults</td></tr>"; |
64 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Children</td><td style='background: #fda; padding: 10px;'>$total_children</td></tr>"; |
65 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-in Date</td><td style='background: #fda; padding: 10px;'>$checkin_date</td></tr>"; |
66 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-out Date</td><td style='background: #fda; padding: 10px;'>$checkout_date</td></tr>"; |
67 |
$email_content .= "<tr><td style='background: #eee; padding: 10px;'>Room Type</td><td style='background: #fda; padding: 10px;'>$room_type</td></tr></tbody></table>"; |
68 |
|
69 |
$email_content .= "<p style='font-family: Arial; font-size: 1.25rem;'><strong>Special Request from $visitor_name —</strong><i> $visitor_message</i>.</p>"; |
70 |
$email_content .= '</body></html>'; |
71 |
|
72 |
echo $email_content; |
73 |
|
74 |
if(mail($recipient, "Hotel Room Reservation Confirmation", $email_content, $headers)) { |
75 |
echo '<p>Thank you for booking a hotel room with us. We hope you have a pleasant stay.</p>'; |
76 |
} else { |
77 |
echo '<p>We are sorry but the booking confirmation email did not go through.</p>'; |
78 |
}
|
79 |
|
80 |
} else { |
81 |
echo '<p>Something went wrong</p>'; |
82 |
}
|
83 |
|
84 |
?>
|
Wir beginnen mit der Bereinigung des Namens und der E-Mail-Adresse des Besuchers. Danach bereinigen wir das Check-in-Datum, das Check-out-Datum, die Anzahl der Erwachsenen und die Anzahl der Kinder, unter Verwendung des FILTER_SANITIZE_NUMBER_INT-Flags. Dieses Flag entfernt alle Zeichen aus der Eingabe mit Ausnahme von Ziffern und + oder - Zeichen. Es eignet sich hervorragend für die Bereinigung unserer Daten, da wir sie im Format YYYY-MM-TT erwarten - nur Ziffern und das Minuszeichen. Sie sollten die PHP-Dokumentation durchgehen, um mehr über alle Bereinigungs- und Validierungsflags zu erfahren.
Sobald wir alle Eingaben bereinigt haben, beginnen wir mit der Vorbereitung unserer Header. Durch die Aufnahme von Content-type: text/html in die E-Mail-Header können wir HTML-Tags in unserer E-Mail verwenden. Für dieses Tutorial halten wir es einfach und zeigen alle Benutzerdaten in einer Tabelle an. Jede spezielle Nachricht, die von Personen hinterlassen wird, die ein Hotelzimmer buchen, ist unter der Tabelle aufgeführt.
Abschließende Gedanken
In diesem Tutorial haben wir die Grundlagen der Erstellung eines PHP-E-Mail-Skripts behandelt, das Daten aus Formularen sendet, die von Personen ausgefüllt wurden. Beim Erstellen von Formularen ist es wichtig, die Elemente richtig anzulegen und sicherzustellen, dass Sie nur nach Informationen fragen, die tatsächlich benötigt werden. Das Erstellen eines unnötig langen Formulars mit falsch angeordneten Elementen hält Benutzer davon ab, das Formular auszufüllen. Sie sollten auch sicherstellen, dass jedes Element richtig benannt ist. Die richtige Bereinigung von Benutzereingaben ist ebenso wichtig.
Wenn Sie noch nie Ihre eigenen Formulare erstellt haben und mit PHP nicht vertraut sind, ist es möglicherweise besser, Skripte zu verwenden, die von Profis erstellt wurden. Wir haben diese Liste der 20 besten PHP-E-Mail-Formulare erstellt, um Ihnen den Einstieg zu erleichtern. Diese Formulare verfügen über zusätzliche Funktionen wie Captcha, das Planen von E-Mails und das Hochladen von Dateien.
Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich bitte in den Kommentaren wissen.





