maro
45261a0461
- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
|
|
const fieldClass =
|
|
"w-full rounded-2xl border border-anouma-taupe/30 bg-background px-5 py-3.5 text-base text-anouma-plum placeholder:text-anouma-plum/50 focus:border-anouma-mauve-dark focus:outline-none";
|
|
|
|
type ContactFormProps = {
|
|
toEmail: string;
|
|
subjectPrefix?: string;
|
|
submitLabel?: string;
|
|
};
|
|
|
|
/**
|
|
* Opens the visitor's email client with a pre-filled message. There is no
|
|
* backend configured yet — swap this for a Server Action once a mail
|
|
* provider is connected.
|
|
*/
|
|
export function ContactForm({
|
|
toEmail,
|
|
subjectPrefix = "Nachricht über anouma.org",
|
|
submitLabel = "Nachricht senden",
|
|
}: ContactFormProps) {
|
|
const [sent, setSent] = useState(false);
|
|
|
|
function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const data = new FormData(e.currentTarget);
|
|
const name = String(data.get("name") ?? "");
|
|
const email = String(data.get("email") ?? "");
|
|
const message = String(data.get("message") ?? "");
|
|
|
|
const subject = encodeURIComponent(`${subjectPrefix} von ${name}`);
|
|
const body = encodeURIComponent(`${message}\n\n— ${name} (${email})`);
|
|
window.location.href = `mailto:${toEmail}?subject=${subject}&body=${body}`;
|
|
setSent(true);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div>
|
|
<label htmlFor="name" className="mb-2 block text-sm font-medium text-anouma-plum">
|
|
Name
|
|
</label>
|
|
<input id="name" name="name" type="text" required className={fieldClass} autoComplete="name" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="mb-2 block text-sm font-medium text-anouma-plum">
|
|
E-Mail
|
|
</label>
|
|
<input id="email" name="email" type="email" required className={fieldClass} autoComplete="email" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="mb-2 block text-sm font-medium text-anouma-plum">
|
|
Deine Nachricht
|
|
</label>
|
|
<textarea id="message" name="message" required rows={5} className={fieldClass} />
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="inline-flex items-center justify-center rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 hover:bg-anouma-plum"
|
|
>
|
|
{submitLabel}
|
|
</button>
|
|
{sent && (
|
|
<p className="text-sm text-anouma-olive" role="status">
|
|
Dein E-Mail-Programm sollte sich jetzt geöffnet haben. Falls nicht, schreib gerne direkt an{" "}
|
|
{toEmail}.
|
|
</p>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|