70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
|
|
export default function ContactForm() {
|
|
const [message, setMessage] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setError("");
|
|
setMessage("");
|
|
const form = new FormData(event.currentTarget);
|
|
const name = String(form.get("name") ?? "").trim();
|
|
const email = String(form.get("email") ?? "").trim();
|
|
const subject = String(form.get("subject") ?? "").trim();
|
|
const text = String(form.get("message") ?? "").trim();
|
|
|
|
if (!name || !email.includes("@") || !subject || text.length < 10 || form.get("privacy") !== "on") {
|
|
setError("Bitte füllen Sie alle Pflichtfelder aus und bestätigen Sie die Datenschutz-Hinweise.");
|
|
return;
|
|
}
|
|
|
|
setPending(true);
|
|
try {
|
|
const response = await fetch("/api/contact", { method: "POST", body: form });
|
|
const result = await response.json() as { message?: string };
|
|
if (!response.ok) throw new Error(result.message ?? "Nachricht konnte nicht gesendet werden.");
|
|
event.currentTarget.reset();
|
|
setMessage(result.message ?? "Ihre Nachricht wurde vorbereitet.");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Nachricht konnte nicht gesendet werden.");
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className="form" onSubmit={submit} noValidate>
|
|
<div className="field">
|
|
<label htmlFor="name">Name</label>
|
|
<input id="name" name="name" />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="email">E-Mail</label>
|
|
<input id="email" name="email" type="email" />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="phone">Telefon</label>
|
|
<input id="phone" name="phone" />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="subject">Betreff</label>
|
|
<input id="subject" name="subject" />
|
|
</div>
|
|
<div className="field">
|
|
<label htmlFor="message">Nachricht</label>
|
|
<textarea id="message" name="message" />
|
|
</div>
|
|
<label className="checkbox">
|
|
<input type="checkbox" name="privacy" />
|
|
<span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Kontaktanfrage verarbeitet werden.</span>
|
|
</label>
|
|
{error && <p className="error">{error}</p>}
|
|
{message && <p className="success">{message}</p>}
|
|
<button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Nachricht senden"}</button>
|
|
</form>
|
|
);
|
|
}
|