3.0 KiB
3.0 KiB
Spezifikation: Issue #15 – Kontaktformular Backend-Integration
Repo: greggy/landingpage-haus-schleusingen
Issue: #15
Komplexität: S (Small)
Datum: 2026-05-13
Problem
Das Kontaktformular simuliert den Versand nur mit setTimeout. Anfragen gehen verloren.
Lösung: mailto:-Link mit vorformatierter E-Mail
Da das Projekt eine statische Landingpage (HTML/CSS/JS) ohne Backend ist, wird der Formular-Submit so umgebaut, dass ein mailto:-Link generiert wird. Der E-Mail-Client des Nutzers öffnet sich mit einer vorausgefüllten E-Mail an mki@kies-media.de.
Warum mailto: statt Formspree?
- Keine externe Abhängigkeit, kein Account nötig
- Funktioniert zuverlässig auf allen Geräten
- Kein Privacy-Problem (Daten gehen nicht über Drittanbieter)
- Keine Limits (Formspree: 50/Monat kostenlos)
Warum kein eigenes Backend?
- Statische Seite (nginx serves HTML only)
- Extra Infrastruktur nötig (PHP/Node.js + SMTP)
- Overkill für eine Vermietungs-Landingpage
Technische Umsetzung
Formular-HTML (haus-schleusingen.html)
- Form bleibt wie vorhanden (fname, lname, email, phone, interest, message)
- Keine Änderung an name-Attributen nötig (alle bereits kompatibel)
JavaScript (js/haus-schleusingen.js)
Form-Submit-Handler wird ersetzt:
$("#contactForm").on("submit", function (e) {
e.preventDefault();
var fname = $("#fname").val().trim();
var lname = $("#lname").val().trim();
var email = $("#email").val().trim();
var phone = $("#phone").val().trim();
var interest = $("#interest").val();
var message = $("#message").val().trim();
var subject = "Kontaktanfrage: " + interest;
var body = "Von: " + fname + " " + lname + "\n";
body += "E-Mail: " + email + "\n";
if (phone) body += "Telefon: " + phone + "\n";
body += "Anliegen: " + interest + "\n\n";
body += message;
var mailto = "mailto:mki@kies-media.de"
+ "?subject=" + encodeURIComponent(subject)
+ "&body=" + encodeURIComponent(body);
window.location.href = mailto;
// Erfolgsmeldung anzeigen
$("#contactForm").hide();
$("#formSuccess").fadeIn(400);
});
Edge Cases
- Kein E-Mail-Client installiert: mailto:-Link tut nichts → Nutzer sieht trotzdem Erfolgsmeldung (suboptimal, aber bei statischer Seite akzeptabel)
- Leere Felder: HTML5
requiredauf fname, lname, email verhindert leeren Submit - Sonderzeichen:
encodeURIComponentkodiert Umlaute und Sonderzeichen korrekt - Lange Nachrichten: mailto:-Body hat praktische Limits (~2000 Zeichen URL), für Kontaktformulare ausreichend
Akzeptanzkriterien
- ✅ Bei Submit öffnet sich der E-Mail-Client mit vorformatierter E-Mail
- ✅ Betreff enthält Art des Anliegens
- ✅ Body enthält alle Formulardaten strukturiert
- ✅ Erfolgsmeldung wird angezeigt
- ✅ Kein setTimeout-Simulatoren mehr
- ✅ Bestehendes CSS/Styling bleibt unverändert