Ein Kontaktformular auf statischen Websites ist oft ein notwendiges Übel. Viele Lösungen erfordern jedoch teure monatliche Gebühren für grundlegende Funktionen wie die Speicherung in Google Sheets oder E-Mail-Benachrichtigungen. Doch es geht auch kostenlos – mit einem kleinen Google Apps Script.
Der gesamte Prozess funktioniert ohne eigenen Server, Datenbank oder SMTP-Dienste. Stattdessen übernimmt ein Google Apps Script die Verarbeitung der Formulardaten, speichert sie in einer Google-Tabelle und sendet Benachrichtigungen per E-Mail. Diese Methode eignet sich besonders für Portfolios, Landingpages oder kleine Unternehmenswebsites, bei denen keine komplexen Funktionen benötigt werden.
Der technische Aufbau im Überblick
Die Architektur dieser Lösung ist denkbar einfach:
- HTML-Formular sendet eine POST-Anfrage an ein Google Apps Script.
- Das Script validiert die Eingaben, filtert Spam und schreibt die Daten in eine Google-Tabelle.
- Anschließend wird eine E-Mail-Benachrichtigung an den Website-Besitzer gesendet.
- Optional kann auch eine automatische Antwort an den Absender verschickt werden.
Der gesamte Prozess läuft ohne Serverkosten, Datenbanken oder externe E-Mail-Dienste ab. Der einzige Aufwand besteht in der Einrichtung des Google Apps Scripts, das später wie ein kostenloser Backend-Dienst fungiert.
Der Kern: Verarbeitung der Formulardaten
Das Herzstück der Lösung ist die doPost-Funktion im Google Apps Script. Sie übernimmt die Verarbeitung der eingehenden Anfragen und führt folgende Schritte aus:
function doPost(e) {
try {
return handlePost(e);
} catch (err) {
console.error(err);
return jsonResponse('error', 'Interner Serverfehler.');
}
}Innerhalb der handlePost-Funktion werden die Daten nach einem klaren Schema verarbeitet:
- Parsen der Eingaben: Die Daten werden entweder als JSON oder im
application/x-www-form-urlencoded-Format empfangen und entsprechend verarbeitet. - Spam-Schutz durch Honeypot-Feld: Ein verstecktes Feld
_gotchawird von Bots oft ausgefüllt, während echte Nutzer es ignorieren. Ist das Feld gefüllt, wird eine gefälschte Erfolgsmeldung zurückgegeben, und die Daten werden nicht gespeichert. - Validierung der Pflichtfelder: Name, E-Mail-Adresse und Nachricht werden auf Vollständigkeit und Plausibilität geprüft.
- E-Mail-Validierung: Die eingegebene E-Mail-Adresse wird auf korrekte Syntax überprüft.
- Einfache Spam-Filterung: Schlüsselwörter oder verdächtige Muster können automatisch erkannt und blockiert werden.
- Rate-Limiting: Mehrfache Einreichungen in kurzer Zeit werden begrenzt, um Missbrauch zu verhindern.
- Speicherung in Google Sheets: Die validierten Daten werden als neue Zeile in einer Tabelle hinzugefügt.
- E-Mail-Benachrichtigung: Der Website-Besitzer erhält eine E-Mail mit den eingegangenen Daten.
- Automatische Antwort (optional): Der Absender erhält eine Bestätigungsmail, falls gewünscht.
Diese Schritte stellen sicher, dass nur legitime Anfragen verarbeitet werden und die Daten strukturiert gespeichert werden.
Google Sheets als Datenbank nutzen
Google Sheets eignet sich überraschend gut als einfache Datenbank für Kontaktformulare. Die Vorteile liegen auf der Hand:
- Benutzerfreundlich: Auch Nicht-Techniker können die Daten leicht einsehen und bearbeiten.
- Exportierbar: Die Daten lassen sich einfach als CSV oder Excel-Datei herunterladen.
- Suchbar: Die integrierte Suchfunktion ermöglicht das schnelle Auffinden von Einträgen.
Um die Tabelle korrekt einzurichten, wird zunächst geprüft, ob die gewünschte Tabelle bereits existiert. Falls nicht, wird sie erstellt und mit den passenden Spaltenköpfen versehen:
function ensureSheet(sheetName) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
let sheet = ss.getSheetByName(sheetName);
if (!sheet) {
sheet = ss.insertSheet(sheetName);
sheet.appendRow(['Zeitstempel', 'Name', 'E-Mail', 'Nachricht', 'Quell-URL']);
sheet.setFrozenRows(1);
sheet.getRange('D:D').setWrap(true);
}
}Anschließend werden die neuen Daten als Zeile angehängt:
function appendRow(sheetName, row) {
SpreadsheetApp.getActiveSpreadsheet()
.getSheetByName(sheetName)
.appendRow(row);
}Diese einfache Struktur ermöglicht eine zuverlässige Speicherung der Formulardaten.
E-Mail-Benachrichtigungen ohne SMTP
Ein großer Vorteil von Google Apps Script ist die integrierte MailApp-Bibliothek. Damit lassen sich E-Mails direkt aus dem Script heraus versenden – ohne externe SMTP-Dienste wie SendGrid oder Mailgun.
Die Benachrichtigung an den Website-Besitzer sieht beispielsweise so aus:
MailApp.sendEmail({
to: cfg.recipientEmail,
subject: 'Neue Kontaktformular-Eingabe',
body: `${name} <${email}> hat folgende Nachricht gesendet:\n\n${message}`
});Für viele Anwendungsfälle ist diese einfache Lösung völlig ausreichend. Wer zusätzliche Funktionen wie personalisierte Antworten oder HTML-formatierte E-Mails benötigt, kann die MailApp-Bibliothek entsprechend erweitern.
Integration in das HTML-Formular
Auf der Client-Seite reicht ein einfacher JavaScript-Code aus, um das Formular an das Google Apps Script zu senden:
const res = await fetch(SCRIPT_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: form.name.value,
email: form.email.value,
message: form.message.value,
_gotcha: form._gotcha.value
})
});
const json = await res.json();Wichtig ist, dass die URL des bereitgestellten Google Apps Scripts korrekt in den Code eingebunden wird. Nach der Bereitstellung des Scripts als Web-App (mit der Einstellung "Jeder“ für den Zugriff) kann die URL in das Formular übernommen werden.
Für welche Anwendungsfälle eignet sich diese Lösung?
Die beschriebene Methode ist besonders für folgende Szenarien geeignet:
- Kontaktformulare auf Portfolios oder persönlichen Websites
- Landingpages für kleine Unternehmen oder Agenturen
- Einfache Lead-Erfassung für Startups
- Wartelisten oder interne Anfrageformulare
- Websites mit geringem bis mittlerem Traffic
Allerdings gibt es auch Grenzen: Dateiuploads, Zahlungsabwicklung oder sehr hohe Anfragemengen erfordern eine robustere Lösung. Für diese Fälle sind spezialisierte Dienste wie Formspree, Netlify Forms oder serverseitige Backends die bessere Wahl.
Ein fertiges Projekt zum Nachbauen
Wer nicht bei Null starten möchte, kann auf ein bereits fertiges Projekt zurückgreifen. Auf GitHub steht ein MIT-lizenziertes Projekt zur Verfügung, das alle beschriebenen Funktionen enthält:
- Speicherung in Google Sheets
- E-Mail-Benachrichtigungen
- Spam-Schutz durch Honeypot und Keyword-Filter
- Rate-Limiting
- Automatische Antworten
- Beispiel-Formular
Das Projekt bietet zudem eine kostenpflichtige Version für Teams, die eine benutzerfreundliche Oberfläche für die Einrichtung und Verwaltung mehrerer Formulare wünschen. Die Open-Source-Version ist jedoch bereits vollständig funktionsfähig und kann direkt verwendet werden.
Die Einrichtung eines kostenlosen Kontaktformular-Backends mit Google Sheets ist eine elegante Lösung für einfache Websites. Sie spart nicht nur Kosten, sondern reduziert auch den technischen Aufwand auf ein Minimum. Wer seine Formulare professionell und ohne monatliche Gebühren betreiben möchte, sollte diese Methode in Betracht ziehen.
KI-Zusammenfassung
Statik web siteleri için aylık ödeme gerektirmeyen ücretsiz bir iletişim formu arka ucu oluşturmanın yolu: Google Apps Script ve Google E-Tablolar ile nasıl yapılır?