# 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`