Formlar (Demo)

Bu belge gerçek gönderim yapmayan demo formu anlatır. Kullanıcı «Gönder»e basınca yalnızca toast görünür; sunucuya veri gitmez.

Canlı demo: /fix-ui (FixUiPage.astro). Form stilleri: Fix UI Kullanımı. Toast: Font & UI Kullanımı.

Nerede?

Parça	Dosya
Form markup	`src/components/fix-ui/FixUiPage.astro`
Toast davranışı	`src/components/islands/FormSubmitToast.tsx`
Route	`src/pages/fix-ui/index.astro`

fix-form sınıfı yalnızca katalog demosu içindir; production form alanları Input / Label / Textarea üzerinden Tailwind ile stillenir.

Fix UI Form Yapısı (katalog)

<form id="fix-ui-form" class="fix-form" method="get" action="#">
  <div class="fix-form__row">
    <Label for="fix-ui-name">Ad</Label>
    <Input id="fix-ui-name" name="name" type="text" required />
  </div>
  <Button type="submit" variant="primary">Gönder</Button>
</form>

Bileşen	Rol
`fix-form`	Form düzeni (yalnızca katalog CSS)
`Label`	Erişilebilir etiket (Tailwind)
`Input` / `Textarea`	Alanlar (Tailwind semantic sınıflar)
`Button`	Gönder — `fix-btn`

method="get" ve action="#" — tarayıcı varsayılanını nötrler; asıl davranış JS ile kesilir.

`FormSubmitToast` + `client:load`

<FormSubmitToast
  client:load
  formId="fix-ui-form"
  message="Teşekkürler! Bu bir demo — mesajınız gönderilmedi."
/>

Dosya: src/components/islands/FormSubmitToast.tsx

preventDefault → sayfa yenilenmez, ağ isteği yok
Sonner toast.success — global Toaster BaseLayout’ta

formId ile form id eşleşmeli.

Canlıya Geçiş (Not — İmplementasyon Yok)

Yöntem	Kısa not
Formspree / Getform	`action` + `method="POST"`, `preventDefault` kaldırılır veya koşullu
Astro API route	`src/pages/api/...` — sunucuda e-posta veya CRM
Cloudflare Worker	Edge’de doğrulama + webhook

Spam koruması (honeypot, Turnstile) eklenir. Bu rehber kod eklemez.

Yapmayın

Her sayfada kopya toast useEffect yazmayın — FormSubmitToast yeniden kullanın.
Layout’a ikinci Toaster eklemeyin.
Demo iken kullanıcıya «mesajınız iletildi» demeyin.

İlgili Rehberler

Fix UI Kullanımı — /fix-ui katalog
Font & UI Kullanımı — Sonner
React Kullanımı — island pattern

Özet

Demo form /fix-ui sayfasında: fix-form + Fix UI Button + Tailwind alanlar. FormSubmitToast ile backend yok. Gerçek gönderim için Formspree/API/Worker.