diff --git a/.gitignore b/.gitignore index e872025..b4f54fd 100644 --- a/.gitignore +++ b/.gitignore @@ -10,5 +10,6 @@ Thumbs.db # Private Buchungsdaten und lokale Testergebnisse src/server/data/* !src/server/data/.gitkeep +!src/server/data/contact-requests.csv playwright-report/ test-results/ diff --git a/docs/nutrition-contact-form.md b/docs/nutrition-contact-form.md new file mode 100644 index 0000000..32b7911 --- /dev/null +++ b/docs/nutrition-contact-form.md @@ -0,0 +1,21 @@ +# Kontaktformular der Ernährungsseite + +Das Formular in `index.html` sendet seine Eingaben als JSON an `POST /api/nutrition-contact`. +Der Server validiert Name, E-Mail, Betreff und Nachricht, speichert die Anfrage in +`src/server/data/contact-requests.csv` und sendet anschließend zwei E-Mails über +Mailpit auf `127.0.0.1:1025`: + +- eine Eingangsbestätigung an die eingegebene E-Mail-Adresse; +- beide Nachrichten mit dem Absender `Tri-Hub Ernährung `; +- die vollständige Kontaktanfrage an die Mailpit-Testadresse + `ernaehrung@tri-hub.de`; die SMTP-Verbindung ist fest auf den lokalen + Mailpit-Server gesetzt, daher wird diese Nachricht nur simuliert und nicht + an den echten Mailserver zugestellt. + +Die Mailpit-Weboberfläche ist lokal unter `http://127.0.0.1:8025` erreichbar. +Zum Entwickeln Mailpit mit `npm run dev:mail`, den API-Server mit +`npm run dev:server` und Vite mit `npm run dev` starten. + +Die CSV-Datei wird beim ersten erfolgreichen Absenden angelegt. Bei einem +Mailfehler bleibt die Anfrage gespeichert; die API meldet, dass der Versand +nicht vollständig bestätigt werden konnte. diff --git a/index.html b/index.html index d6bda2a..b658775 100644 --- a/index.html +++ b/index.html @@ -470,6 +470,7 @@ } input[type="text"], + input[type="email"], textarea, select { width: 100%; @@ -485,6 +486,7 @@ } input[type="text"], + input[type="email"], select { height: 48px; padding: 0 14px; @@ -557,6 +559,21 @@ cursor: pointer; } + #contactMessageHint.is-valid { + color: var(--brand); + } + + .field-error { + display: block; + min-height: 0; + color: #fca5a5; + font-size: 0.78rem; + } + + .form-status.is-error { + color: #fca5a5; + } + .form-status { min-height: 20px; margin-top: 12px; @@ -1102,6 +1119,117 @@ + + +
+
+
+
+
KONTAKT AUFNEHMEN
+

+ Schreib uns. +

+
+ +

+ Du hast Fragen oder möchtest einen Termin + vereinbaren? Schreib uns einfach. Wir melden uns + schnellstmöglich bei dir. +

+
+ +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + Mindestens 10 Zeichen erforderlich. + +
+ *Pflichtfelder +
+ + + +
+
+
+