Kontaktformular ohne SMTP-Server erstellen — Vollständige Anleitung | Lugatu
Erfahren Sie, wie Sie Kundenanfragen zuverlässig erfassen, ohne SMTP-Passwörter im Code zu hinterlegen, Mailserver zu konfigurieren oder Zustellprobleme zu debuggen.
1. Die Probleme klassischer SMTP-Formulare
SMTP-Verbindungen über Port 25 oder 587 werden auf modernen Jamstack- und Serverless-Plattformen blockiert. Zudem führen abgelaufene Zugangsdaten und Spam-Filterungen häufig zu unbemerktem Datenverlust.
Hinterlegen Sie niemals SMTP-Passwörter in Git-Repositories oder Client-Dateien. Nutzen Sie stattdessen abgesicherte API-Endpunkte.
2. Schritt 1: Das HTML-Formular mit Honeypot-Schutz
Bauen Sie Ihr Formular mit semantischem HTML. Fügen Sie ein verstecktes Honeypot-Feld ein, das normale Besucher leer lassen, Bots jedoch automatisch ausfüllen.
<!-- Vanilla HTML Form with Lugatu Form Endpoint -->
<form id="inquiry-form">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Work Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Project Details</label>
<textarea id="message" name="message" rows="4" required></textarea>
<!-- Built-in Honeypot Bot Trap -->
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
<button type="submit">Send Inquiry</button>
</form>
<script>
document.getElementById('inquiry-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const data = new FormData(form);
const payload = {
fields: {
name: data.get('name'),
email: data.get('email'),
message: data.get('message')
},
honeypot: data.get('_gotcha') || ''
};
const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(payload)
});
if (res.ok) {
alert('Inquiry sent successfully!');
form.reset();
}
});
</script>3. Schritt 2: Sichere Übermittlung via Fetch-API
Fangen Sie das Submit-Event mit JavaScript ab und senden Sie die Daten als JSON an die Lugatu Ingestion-API. Sie erhalten sofort ein klares Status-Feedback.
4. Flexible Benachrichtigungsmodi und dauerhafte Aufbewahrung
Selbst wenn die Kontingente für ausgehende E-Mails erreicht sind, bleiben alle Einsendungen in Ihrem Workspace-Posteingang erhalten. Sie können pro Formular zwischen Sofortbenachrichtigungen, täglichen Zusammenfassungen oder wöchentlichen Zusammenfassungen wählen.
Sicherheits- und Authentifizierungsinvariante
Spam-Abwehr-Regel: Verwenden Sie für öffentlich zugängliche Formulare immer Honeypot-Felder. Private API-Schlüssel dürfen niemals im Quelltext der Website stehen.
Fehlerbehebung und häufige Aufnahmefehler
Lugatu erlaubt browserbasierte JSON-Anfragen an /api/v1/public/forms/... von allen Origins. Stellen Sie sicher, dass die URL exakt übereinstimmt.
Häufig gestellte Fragen
Funktioniert diese Methode auch auf statischen GitHub Pages?
Ja, absolut. Da Lugatu die gesamte Backend-Logik übernimmt, funktioniert das Formular auf GitHub Pages, Vercel, Netlify und Cloudflare Pages identisch.
Sind Sie bereit, Ihren Formularendpunkt zu erstellen?
Starten Sie in Sekundenschnelle kostenlos. Keine Kreditkarte erforderlich.