Fünf funktionierende Wege, Formulareingaben deiner Website ins Postfach zu bekommen: mailto, ein Formular-Endpunkt-Dienst, Netlify Forms, eine Serverless-Funktion mit E-Mail-API und Google Apps Script. Mit JavaScript-Code zum Absenden und Spamschutz.
Eine Webseite kann von sich aus keine E-Mails versenden. Das Formular muss seine Daten an etwas senden, das es kann: einen Formular-Endpunkt-Dienst, die Formularfunktion deines Hosters, eine Serverless-Funktion, die eine E-Mail-API aufruft, ein Google Apps Script oder deinen eigenen Server. Wähle danach, wie viel Kontrolle du brauchst, und sende dann per JavaScript ab, damit Besucher auf der Seite bleiben.
Die fünf Methoden im Vergleich
Zu jeder Methode unten gibt es vollständigen Code. Beginne mit dem Formular und dem JavaScript-Handler zum Absenden, die mit jeder Methode funktionieren, und wähle dann ein Backend.
Nur mit einer mailto:-Action, die das eigene E-Mail-Programm des Besuchers mit vorausgefüllten Angaben öffnet. Das scheitert bei allen, die kein Mailprogramm eingerichtet haben, darunter viele an gemeinsam genutzten oder Arbeitscomputern, und du kannst das Ergebnis weder gestalten noch validieren. Nutze für alles Wichtige eine der anderen Methoden.
Meist, weil die Nachricht vorgibt, von der Adresse des Besuchers zu stammen, oder weil deiner Domain SPF-, DKIM- und DMARC-Einträge für den versendenden Dienst fehlen. Versende von einer Adresse auf deiner eigenen Domain, setze den Besucher als Reply-To und füge die DNS-Einträge hinzu, die dir dein E-Mail-Anbieter gibt.
Ein Feld, das für Menschen versteckt, für einfache Bots aber sichtbar ist. Menschen lassen es leer, Bots füllen es aus. Dein Backend verwirft jede Einsendung, bei der es einen Wert hat. Das stoppt viel einfachen Spam, ohne echte Besucher zu stören.
Anfangs nicht. Beginne mit einem Honeypot und serverseitigen Prüfungen, etwa dem Ablehnen von Nachrichten voller Links. Füge eine Prüfung nur hinzu, wenn weiter Spam kommt, und nimm lieber eine, bei der Menschen keine Rätsel lösen müssen.
Dieses Frontend funktioniert mit jeder Methode. Das Skript sendet das Formular per fetch, zeigt eine Statusmeldung an und behält den Text, falls das Senden fehlschlägt.
Labels umschließen ihre Eingabefelder, der Browser prüft Pflichtfelder und das E-Mail-Format, und die Statuszeile wird Screenreadern angesagt.
Funktioniert mit jedem Endpunkt, der einen normalen Formular-Post akzeptiert. Wenn der Endpunkt JSON erwartet, sende stattdessen JSON.stringify(Object.fromEntries(data)) mit einem JSON-Content-Type.
Öffnet das E-Mail-Programm des Besuchers mit den Feldern im Nachrichtentext. Kein Server nötig, aber es wird nichts gesendet, wenn kein Mailprogramm vorhanden ist.
Dienste wie Formspree, Basin, Getform und Web3Forms geben dir eine URL zum Absenden und leiten jede Einsendung an dein Postfach weiter. Registriere dich, lege ein Formular an, füge dessen URL in das action-Attribut des Formulars oben ein und behalte das fetch-Skript. Prüfe die aktuellen Gratis-Limits jedes Dienstes und wo er die Daten speichert.
Netlify erkennt das Formular beim Deploy, wenn es das Attribut data-netlify hat. Aktiviere E-Mail-Benachrichtigungen in den Formulareinstellungen der Website. Bei per JavaScript gerenderten Formularen behältst du zusätzlich eine reine HTML-Kopie in deinen gebauten Dateien, damit Netlify sie findet.
Die Funktion empfängt das Formular, prüft es und ruft eine E-Mail-API mit einem geheimen Key auf, der auf dem Server bleibt. Dieses Beispiel nutzt die REST-API von Resend; SendGrid, Postmark und Amazon SES funktionieren genauso mit ihren eigenen Endpunkten.
Funktioniert auf Plattformen, die die Web-Objekte Request und Response nutzen. Setze RESEND_API_KEY in den Umgebungsvariablen deines Hosters und verifiziere vorher deine Absender-Domain beim E-Mail-Anbieter.
Ein kurzes Skript, als Web-App aus einem Google-Konto bereitgestellt, verschickt jede Einsendung per E-Mail und kann sie in einem Sheet protokollieren. Es gelten tägliche E-Mail-Kontingente, daher passt es für Formulare mit wenig Aufkommen.
Füge das in ein neues Apps-Script-Projekt ein und stelle es dann als Web-App bereit, die als du ausgeführt wird und auf die jeder zugreifen kann. Verwende die URL der Web-App als Formular-Action.
Shared Hosting läuft oft mit PHP. Die eingebaute Funktion mail() funktioniert bei vielen Hostern, aber die Zustellbarkeit ist besser mit einer SMTP-Bibliothek wie PHPMailer und einem echten Postfach auf deiner Domain.
Lehnt Anfragen ab, die kein POST sind, kürzt Leerzeichen in den Eingaben, verweigert Zeilenumbrüche in der Antwortadresse (über die Angreifer Header einschleusen könnten) und leitet auf eine Danke-Seite weiter.
Kostenlos starten · Keine Kreditkarte nötig