80 lines
3.0 KiB
Markdown
80 lines
3.0 KiB
Markdown
# 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`
|