Wie man ein HTML-Kontaktformular erstellt, das E-Mails sendet

So erstellen Sie ein einfaches HTML-Kontaktformular

HTML-Kontaktformulare ermöglichen es deinen Besuchern, dich einfach zu kontaktieren.

Erstellen eines leeren Formulars

Beginne damit, ein leeres Formular zu erstellen, indem du die <form>-Tags verwendest. Lege die Methode post oder get fest, um die Daten an den Server zu senden, und gib eine Aktion an, die auf das Skript verweist, das die E-Mails verarbeitet.

<form action="mail.php" method="post">

Hinzufügen von Feldern

Füge dem Formular jetzt Felder hinzu, mit denen deine Besucher ihre Informationen eingeben können. Verwende für jedes Feld die Tags <input>, <textarea> oder <select> und gib entsprechende Attribute wie type, name und placeholder an.

<input type="text" name="name" placeholder="Dein Name">
<input type="email" name="email" placeholder="Deine E-Mail-Adresse">
<textarea name="message" placeholder="Deine Nachricht"></textarea>

Hinzufügen eines Textfeldes für die E-Mail-Adresse

Ein Textfeld ist ein wesentliches Element jedes Kontaktformulars, da es die E-Mail-Adresse des Benutzers erfasst. Gehe wie folgt vor, um ein Textfeld für die E-Mail-Adresse zu deinem HTML-Formular hinzuzufügen:

Verwendung des HTML-Tags <input>

Verwende den HTML-Tag <input> mit dem Attribut type="email", um ein Textfeld für die E-Mail-Adresse zu erstellen. Dieses Attribut weist den Browser an, das Feld für die Eingabe einer gültigen E-Mail-Adresse zu validieren.

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email" placeholder="[email protected]">

Festlegen einer ID und eines Namens

Die Attribute id und name dienen dazu, das Eingabefeld eindeutig zu identifizieren und mit dem Backend-Skript zu verknüpfen, das die E-Mail verarbeitet.

Angabe eines Platzhalters

Das Attribut placeholder bietet einen Hinweistext, der im Eingabefeld angezeigt wird, bis der Benutzer Eingaben vornimmt. Er empfiehlt sich, um dem Benutzer das erwartete Format der E-Mail-Adresse anzuzeigen.

Validierung der E-Mail-Adresse

Der Browser validiert zwar grundlegende Formate, es wird jedoch empfohlen, zusätzliche Validierungsprüfungen mit JavaScript oder einem serverseitigen Skript durchzuführen, um sicherzustellen, dass die E-Mail-Adresse gültig ist.

Angeben eines „Senden“-Buttons

Sobald du die Felder für das Kontaktformular festgelegt hast, ist es Zeit, die Schaltfläche "Senden" hinzuzufügen, mit der das Formular abgeschickt wird.

Zweck der Schaltfläche „Senden“

Die Schaltfläche "Senden" löst den Prozess aus, bei dem die vom Nutzer eingegebenen Daten an den Server gesendet werden. Damit wird die Aktion eingeleitet, um die E-Mail zu senden.

HTML-Syntax

Für die Schaltfläche "Senden" verwendest du das <button>-Element. Hier ist die grundlegende Syntax:

<button type="submit">Senden</button>

Das Attribut type mit dem Wert "submit" gibt an, dass beim Klicken auf die Schaltfläche das Formular abgeschickt wird.

Beschriftung der Schaltfläche

Der Text, der auf der Schaltfläche angezeigt wird, sollte den Zweck der Schaltfläche eindeutig wiedergeben. Üblicherweise wird "Senden" verwendet, aber du kannst auch andere Bezeichnungen wie "Nachricht senden" oder "Anfragen senden" wählen.

Stilisierung der Schaltfläche

Du kannst CSS verwenden, um das Aussehen der Schaltfläche zu gestalten. Du kannst Eigenschaften wie Farbe, Schriftart und Größe anpassen.

Tipps für effektive Schaltflächen „Senden“

• Verwende einen klaren und prägnanten Text.
• Gestalte die Schaltfläche visuell auffällig.
• Platziere die Schaltfläche an einer prominenten Stelle im Formular.
• Vermeide es, mehrere Schaltflächen "Senden" auf derselben Seite zu haben.

Schreiben von JavaScript zum Verarbeiten des Formulars

Sobald du dein HTML-Kontaktformular eingerichtet hast, benötigst du JavaScript, um die Eingaben zu verarbeiten und die E-Mail zu senden. Führe die folgenden Schritte aus:

Ereignis-Listener hinzufügen

Als erstes erstelle einen Ereignis-Listener für das "Senden"-Button-Element. Dies zeigt JavaScript, dass das Formular verarbeitet werden soll, wenn auf den Button geklickt wird.

document.getElementById("submit-button").addEventListener("click", function(e) {
  e.preventDefault();
  // Formular verarbeiten
});

Eingaben abrufen

Im Ereignis-Listener kannst du die Werte aus den Eingabefeldern mit der document.getElementById()-Methode abrufen.

const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;

E-Mail-Adresse validieren

Bevor du die E-Mail sendest, ist es wichtig, die E-Mail-Adresse zu validieren, um sicherzustellen, dass sie ein gültiges Format hat. Du kannst ein reguläres Ausdrucksmuster oder eine Bibliothek wie emailjs-com verwenden.

const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/;
if (!emailRegex.test(email)) {
  alert("Ungültige E-Mail-Adresse");
  return;
}

AJAX-Anfrage senden

Um die E-Mail zu senden, musst du eine AJAX-Anfrage an einen serverseitigen Skript senden, z. B. PHP oder Node.js.

const xhr = new XMLHttpRequest();
xhr.open("POST", "email-script.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&email=" + email + "&message=" + message);

Antwort verarbeiten

Sobald die AJAX-Anfrage abgeschlossen ist, verarbeite die Antwort. Es handelt sich in der Regel um einen JSON-String mit einer Erfolgs- oder Fehlermeldung.

xhr.onload = function() {
  if (xhr.status === 200) {
    alert("E-Mail wurde erfolgreich gesendet");
  } else {
    alert("Fehler beim Senden der E-Mail");
  }
};

Senden der E-Mail mit PHP oder einem anderen serverseitigen Skript

Nachdem die Daten des Kontaktformulars erfolgreich verarbeitet wurden, musst du eine E-Mail mit den Informationen senden. Hierzu benötigst du ein serverseitiges Skript wie PHP.

PHP-Skript zum Senden von E-Mails

<?php
// Formularvariablen festlegen
$name = $_POST['name'];
$email = $_POST['email'];
$nachricht = $_POST['nachricht'];

// E-Mail-Header festlegen
$header = "From: $email\r\n";
$header .= "Reply-To: $email\r\n";
$header .= "Content-Type: text/plain; charset=UTF-8\r\n";

// E-Mail-Empfänger und Betreff festlegen
$empfaenger = "[email protected]";
$betreff = "Neue Nachricht aus dem Kontaktformular";

// E-Mail-Inhalt zusammenstellen
$inhalt = "Name: $name\n";
$inhalt .= "E-Mail-Adresse: $email\n";
$inhalt .= "Nachricht:\n$nachricht";

// E-Mail senden
mail($empfaenger, $betreff, $inhalt, $header);

// Erfolgsmeldung ausgeben
echo "<p>Vielen Dank für deine Nachricht. Wir werden uns in Kürze bei dir melden.</p>";
?>

Hinweis: Du kannst das Format von $inhalt anpassen, um HTML-Formatierung hinzuzufügen oder andere Informationen aufzunehmen.

Andere serverseitige Skriptsprachen

Neben PHP kannst du auch andere serverseitige Sprachen wie Python, Java oder Node.js verwenden, um E-Mails aus deinem Kontaktformular zu senden. Jedes Skript hat seine eigenen Vor- und Nachteile, daher solltest du dasjenige auswählen, mit dem du vertraut bist.

Best Practices für E-Mail-Versand

• Verwende eine gültige E-Mail-Adresse: Stelle sicher, dass die E-Mail-Adresse, von der du E-Mails sendest, legitim ist und nicht auf die schwarze Liste gesetzt wurde.
• Füge einen Betreff hinzu: Ein klarer und prägnanter Betreff hilft dem Empfänger zu entscheiden, ob er die E-Mail öffnen möchte.
• Überprüfe die E-Mail-Adresse: Verwende eine Funktion zur E-Mail-Validierung, um sicherzustellen, dass die bereitgestellte E-Mail-Adresse ein gültiges Format hat.
• Speichere die E-Mails nicht auf deinem Server: Lösche die E-Mails, nachdem du sie erfolgreich gesendet hast, um die Privatsphäre deiner Nutzer zu schützen.

Fehlerbehandlung und Validierung der E-Mail-Adresse

Um zu verhindern, dass deine Website durch fehlerhafte E-Mails überflutet wird, ist es wichtig, Fehler zu behandeln und die E-Mail-Adresse zu validieren.

Fehlerbehandlung

• Überprüfe, ob das Formular ausgefüllt ist: Verwende JavaScript, um sicherzustellen, dass alle erforderlichen Felder ausgefüllt sind, bevor du das Formular sendest.
• Behandle Serverfehler: Verwende PHP oder ein anderes serverseitiges Skript, um Serverfehler wie Verbindungsprobleme oder ungültige Anfragen zu behandeln.
• Melde Fehler an den Benutzer: Informiere den Benutzer über Fehler, die bei der Verarbeitung des Formulars auftreten, z. B. fehlende Eingaben oder ungültige E-Mail-Adressen.

Validierung der E-Mail-Adresse

• Überprüfe das Format: Verwende einen regulären Ausdruck, um sicherzustellen, dass die E-Mail-Adresse das korrekte Format aufweist, z. B. "[email protected]".
• Stelle sicher, dass der Domainname gültig ist: Verwende DNS-Abfragen, um zu überprüfen, ob der Domainname der E-Mail-Adresse gültig ist.
• Behandle Mehrfachantworten: Validierungssysteme können manchmal mehrere Antworten liefern. Verwende PHP-Funktionen wie array_unique() oder in_array(), um doppelte Antworten zu entfernen.

Tipps zur Validierung

• Verwende einen Validierungsdienst: Es gibt Dienste wie Mailgun oder SendGrid, die E-Mail-Adressen überprüfen und eine Rückmeldung über ihre Gültigkeit geben.
• Implementiere clientseitige Validierung: Verwende HTML5-Validierungsattribute, um die Eingabe des Benutzers bereits im Browser zu validieren.
• Verwende serverseitige Validierung: Validierung auf dem Server ist zuverlässiger als clientseitige Validierung, da sie browserübergreifend funktioniert.

Gestaltung des Kontaktformulars mit CSS

Ästhetische Gestaltung

Verwende CSS, um dein Kontaktformular optisch ansprechend zu gestalten. Hier sind einige Tipps:

• Farbschema: Wähle Farben, die zum Design deiner Website passen. Du kannst Kontrastfarben verwenden, um bestimmte Elemente hervorzuheben, wie z. B. die Schaltfläche "Senden".
• Schriftarten: Verwende professionelle und gut lesbare Schriftarten. Vermeide die Verwendung zu vieler verschiedener Schriftarten, da dies unübersichtlich wirken kann.
• Layout: Ordne die Formularfelder logisch an und verwende Leerzeichen, um sie zu trennen. Dies verbessert die Lesbarkeit und Benutzerfreundlichkeit.

Responsives Design

• Stelle sicher, dass dein Kontaktformular auf allen Geräten gut aussieht, einschließlich Mobiltelefonen und Tablets.
• Verwende flexible Layouts wie Flexbox oder Grid, damit sich das Formular an unterschiedliche Bildschirmgrößen anpassen kann.
• Teste dein Formular auf verschiedenen Geräten, um sicherzustellen, dass es richtig angezeigt wird.

Barrierefreiheit

• Berücksichtige die Barrierefreiheit, indem du sicherstellst, dass dein Kontaktformular für Benutzer mit Behinderungen zugänglich ist.
• Füge Alternativtexte zu Bildern und Beschriftungen zu Formularelementen hinzu.
• Verwende Farben mit hohem Kontrast, um die Lesbarkeit für sehbehinderte Benutzer zu verbessern.

Tipps zur Verbesserung der Benutzerfreundlichkeit

Um die Benutzerfreundlichkeit deines Kontaktformulars zu verbessern, solltest du die folgenden Tipps beachten:

### Klare Anweisungen und Beschriftungen

• Verwende deutliche Beschriftungen für jedes Feld, um dem Benutzer mitzuteilen, welche Informationen erforderlich sind.
• Erwäge, Platzhaltertext in den Feldern zu verwenden, um weitere Anweisungen zu geben.

### Reduzierung der Felder

• Fordere nur die wesentlichen Informationen an, die du benötigst. Jede zusätzliche Frage kann die Wahrscheinlichkeit verringern, dass das Formular ausgefüllt wird.

### Fehlerhandling

• Überprüfe die Eingaben des Benutzers auf häufige Fehler, wie z. B. leere Felder oder ungültige E-Mail-Adressen.
• Zeige dem Benutzer eine klare Fehlermeldung an, wenn ein Fehler entdeckt wird, und leite ihn an, den Fehler zu beheben.

### Fortschrittsanzeige

• Wenn das Formular viele Felder enthält oder das Senden der E-Mail einige Zeit in Anspruch nehmen kann, informiere den Benutzer über den Fortschritt. Dies kann durch eine Ladeanimation oder eine Fortschrittsleiste geschehen.

### Barrierefreiheit

• Stelle sicher, dass dein Formular für Benutzer mit Behinderungen zugänglich ist, indem du alternative Textbeschreibungen für Bilder und ARIA-Attribute hinzufügst.

### Mobile Optimierung

• Optimiere dein Formular für die Anzeige auf Mobilgeräten. Dies bedeutet, dass die Felder und Schaltflächen groß genug sein sollten, um leicht angeklickt zu werden, und das Formular sollte an verschiedene Bildschirmgrößen angepasst werden können.

### Verwendung von Captchas

• Erwäge die Verwendung von Captchas, um Spam von legitimen Anfragen zu unterscheiden. Allerdings können Captchas die Benutzerfreundlichkeit beeinträchtigen, daher solltest du sie nur verwenden, wenn unbedingt erforderlich.

Einbinden des Formulars in Ihre Website

Sobald du dein HTML-Kontaktformular fertig gestellt hast, ist es an der Zeit, es in deine Website einzubinden. Dafür sind folgende Schritte erforderlich:

Dateistruktur

Lege einen Ordner mit dem Namen "Kontakt" oder "Formulare" in deinem Website-Verzeichnis an. Speichere die HTML-Datei deines Kontaktformulars in diesem Ordner mit dem Dateinamen "kontaktform.html" oder einem anderen aussagekräftigen Namen.

Verweis auf die HTML-Datei

Öffne die Hauptseite deiner Website, beispielsweise "index.html" oder "home.html". Füge einen HTML-Link zum Kontaktformular hinzu, wie folgt:

<a href="./kontakt/kontaktform.html">Kontakt</a>

Hinweis: Passe den Pfad zum Kontaktformular entsprechend der Dateistruktur deiner Website an.

Öffnen in einem neuen Tab oder Fenster

Um das Kontaktformular in einem neuen Tab oder Fenster zu öffnen, setze das target-Attribut im Link auf _blank, wie folgt:

<a href="./kontakt/kontaktform.html" target="_blank">Kontakt</a>

Designanpassung

Sobald das Kontaktformular in deine Website eingebunden ist, kannst du es mit CSS an das Design deiner Website anpassen. In der HTML-Datei deines Formulars kannst du einem <style>-Tag benutzerdefinierte CSS-Regeln hinzufügen, um das Erscheinungsbild des Formulars zu ändern.

Überprüfen und Testen

Nachdem du das Kontaktformular eingebunden hast, überprüfe die Funktionalität, indem du das Formular ausfüllst und sendest. Stelle sicher, dass die E-Mail wie erwartet empfangen wird. Behebe eventuelle Probleme mit der E-Mail-Zustellung oder der Formularvalidierung.

Beheben häufiger Probleme

Bei der Erstellung und Implementierung eines HTML-Kontaktformulars kannst du auf folgende Probleme stoßen:

Das Formular sendet keine E-Mails

• Überprüfe die PHP- oder serverseitige Skriptkonfiguration: Stelle sicher, dass die SMTP-Einstellungen korrekt sind und dass der Server E-Mails senden kann.
• Aktiviere Fehlerberichterstattung: Aktiviere die PHP-Fehlerausgabe oder verwende ein Fehlerprotokollierungssystem, um Fehlermeldungen zu identifizieren.
• Überprüfe die E-Mail-Syntax: Vergewissere dich, dass die E-Mail-Adresse des Empfängers korrekt eingegeben ist.

E-Mails landen im Spam-Ordner

• Verwende einen seriösen E-Mail-Dienst: Vermeide kostenlose oder unbekannte E-Mail-Anbieter, die als Spam-Quellen bekannt sind.
• Erstelle eine personalisierte Betreffzeile: Vermeide generische Betreffzeilen, die Spam-Filter auslösen können.
• Personalisierter Text: Füge dem E-Mail-Text persönliche Elemente wie den Namen des Absenders oder Details zur Anfrage hinzu.
• Verwende einen E-Mail-Validierungsdienst: Verwende einen Dienst wie Mailgun oder SendGrid, um die Zustellbarkeit zu verbessern und Spam-Filter zu umgehen.

Das Formular wird nicht korrekt angezeigt

• Überprüfe die CSS-Einbindung: Stelle sicher, dass die CSS-Datei ordnungsgemäß in die HTML-Datei eingebunden ist und dass die Stile korrekt angewendet werden.
• Überprüfe die HTML-Struktur: Vergewissere dich, dass das Formular korrekt strukturiert ist und gültiges HTML verwendet wird.
• Verwende ein responsives Design: Das Formular sollte auf verschiedenen Geräten und Bildschirmauflösungen korrekt angezeigt werden.

Andere häufige Probleme

• Fehlende Bestätigungsmeldung: Füge eine Bestätigungsmeldung hinzu, um den Benutzer über den erfolgreichen Versand des Formulars zu informieren.
• Fehlende Fehlermeldung: Informiere den Benutzer über Fehler, die bei der Verarbeitung des Formulars auftreten.
• Validierung der E-Mail-Adresse: Verwende JavaScript oder RegEx, um sicherzustellen, dass der Benutzer eine gültige E-Mail-Adresse eingibt.
• Spamschutz: Implementiere einen Captcha oder einen Honeypot, um Spam-Einreichungen zu verhindern.