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 28f4783..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; @@ -1134,8 +1151,13 @@ type="text" autocomplete="name" placeholder="z. B. Thomas Müller" + maxlength="120" required /> +
@@ -1145,11 +1167,16 @@ +
@@ -1159,8 +1186,13 @@ name="subject" type="text" placeholder="Worum geht es?" + maxlength="160" required /> +
@@ -1170,11 +1202,18 @@ name="message" placeholder="Wie können wir dir helfen?" minlength="10" + maxlength="5000" required > - Mindestens 10 Zeichen erforderlich.
+ Mindestens 10 Zeichen erforderlich. + +
*Pflichtfelder
@@ -1207,6 +1246,10 @@ type="module" src="/src/components/navigationsbar/navigation.js" > +