Senden von schönen HTML-E-Mails mit PHP

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Dies wird eine Fortsetzung des Website-Änderungsantragsformulars sein, das wir hier schon seit einiger Zeit verwenden. Wenn Sie auf dem Laufenden bleiben müssen, habe ich zuerst darüber gesprochen, dann habe ich es erstellt, dann habe ich es im Screencast gezeigt, dann habe ich es gesichert. Während all dessen war das Endergebnis eine langweilige reine Text-E-Mail, die an eine einzige E-Mail-Adresse gesendet wurde.

Wir werden diese Ausgabe verbessern und die E-Mail in eine ansprechendere HTML-formatierte E-Mail umwandeln.

Es ist kaum anders als eine reine Text-E-Mail

Das Senden von HTML-E-Mails über PHP verwendet genau die gleichemailFunktion wie für reine Text-E-Mails

mail($to, $subject, $message, $headers);

Der letzte Parameter, die Kopfzeilen, sind für die Funktion optional, aber für das Senden von HTML-E-Mails erforderlich, da wir hier die Content-Type-Deklaration übergeben können, die E-Mail-Clients anweist, die E-Mail als HTML zu parsen.

Tatsächlich bietet der Kopfzeilenbereich die Möglichkeit, viele wichtige E-Mail-Funktionen auszuführen. Hier können wir die Einstellungen "Von:" und "Antworten an:" bei Bedarf festlegen, sowie CC und BCC an andere Empfänger senden (Hey, eine Checkbox zum CC an sich selbst wäre eine coole Funktion!). Hier ist der Code für das neue und verbesserte HTML-Sendende Website-Änderungsantragsformular

$to = '[email protected]';

$subject = 'Website Change Request';

$headers = "From: " . strip_tags($_POST['req-email']) . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['req-email']) . "\r\n";
$headers .= "CC: [email protected]\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

Jetzt können wir HTML-Tags verwenden

Der Nachrichtenparameter (ein großer String, den wir dermailFunktion mit dem E-Mail-Inhalt übergeben), kann nun HTML-Tags enthalten. Zum Beispiel

$message = '<html><body>';
$message .= '<h1>Hello, World!</h1>';
$message .= '</body></html>';

Hier ist das ganze Paket, um die Datentabelle wie oben gezeigt zu erstellen

$message = '<html><body>';
$message .= '<img src="//css-tricks.de/examples/WebsiteChangeRequestForm/images/wcrf-header.png" alt="Website Change Request" />';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['req-name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['req-email']) . "</td></tr>";
$message .= "<tr><td><strong>Type of Change:</strong> </td><td>" . strip_tags($_POST['typeOfChange']) . "</td></tr>";
$message .= "<tr><td><strong>Urgency:</strong> </td><td>" . strip_tags($_POST['urgency']) . "</td></tr>";
$message .= "<tr><td><strong>URL To Change (main):</strong> </td><td>" . $_POST['URL-main'] . "</td></tr>";
$addURLS = $_POST['addURLS'];
if (($addURLS) != '') {
    $message .= "<tr><td><strong>URL To Change (additional):</strong> </td><td>" . strip_tags($addURLS) . "</td></tr>";
}
$curText = htmlentities($_POST['curText']);           
if (($curText) != '') {
    $message .= "<tr><td><strong>CURRENT Content:</strong> </td><td>" . $curText . "</td></tr>";
}
$message .= "<tr><td><strong>NEW Content:</strong> </td><td>" . htmlentities($_POST['newText']) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";

Ich finde das sieht VIEL besser aus. Und da diese E-Mail (theoretisch) direkt an Sie gesendet wird, ist es nicht schön zu wissen, dass sie so formatiert sein wird, dass sie angenehm für die Augen ist?

Bedenken

Manche Leute hassen HTML-E-Mails absolut. Erstens können sie ein Sicherheitsrisiko darstellen, da in manchen E-Mail-Clients JavaScript ausgeführt werden kann, was problematisch sein kann. HTML-E-Mails haben auch die Angewohnheit, leichter in Spam-Filtern hängen zu bleiben. Ich denke, das ist hier weniger ein Problem, da diese E-Mail im Wesentlichen VON Ihnen FÜR Sie erstellt wird.

Demo

Ich habe die Demo und den Download aktualisiert, um das neue HTML-E-Mail-Format zu verwenden.

Demo ansehen   Dateien herunterladen

Es werden wahrscheinlich noch ein oder zwei weitere Demos zu diesem Formular folgen. Ich möchte zumindest eine zur Speicherung der Daten in einer Datenbank erstellen, bevor die E-Mail gesendet wird. E-Mails können eine so fragile Sache sein, dass das Speichern der Daten zuerst in einer DB sicherlich ein kluger Schachzug ist.