Auto-commit: 2026-05-20 21:35

memory/gitea-specs/issue-15.md

@@ -0,0 +1,79 @@
+# Spezifikation: Issue #15 – Kontaktformular Backend-Integration
+
+**Repo:** greggy/landingpage-haus-schleusingen  
+**Issue:** [#15](https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen/issues/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:
+
+```javascript
+$("#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 `required` auf fname, lname, email verhindert leeren Submit
+- **Sonderzeichen:** `encodeURIComponent` kodiert Umlaute und Sonderzeichen korrekt
+- **Lange Nachrichten:** mailto:-Body hat praktische Limits (~2000 Zeichen URL), für Kontaktformulare ausreichend
+
+### Akzeptanzkriterien
+1. ✅ Bei Submit öffnet sich der E-Mail-Client mit vorformatierter E-Mail
+2. ✅ Betreff enthält Art des Anliegens
+3. ✅ Body enthält alle Formulardaten strukturiert
+4. ✅ Erfolgsmeldung wird angezeigt
+5. ✅ Kein setTimeout-Simulatoren mehr
+6. ✅ Bestehendes CSS/Styling bleibt unverändert
+
+## Branch: `feature/issue-15-kontaktformular-backend`
+## Target: `main`