Formlar (Demo)

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

Canlı sayfa: Contact (ContactPage.astro). Form stilleri: Fix UI Kullanımı. Sayfa metinleri: Çeviri Metinleri. İletişim verisi: Site Bilgileri.

---

Nerede?

Parça	Dosya
Form markup	src/components/pages/ContactPage.astro
Toast davranışı	src/components/islands/FormSubmitToast.tsx
Metinler	src/i18n/pages/contact.ts

Dört dil sarmalayıcısı (contact.astro, tr/iletisim.astro, …) yalnızca ContactPage çağırır — Sayfa Ekle / Kaldır.

---

Fix UI Form Yapısı

<form id="contact-form" class="fix-form" method="get" action="#">
  <div class="fix-form__row">
    <Label for="contact-name">{t(contactPage.nameLabel, locale)}</Label>
    <Input id="contact-name" name="name" type="text" required autocomplete="name" />
  </div>
  <!-- email, textarea ... -->
  <Button type="submit" variant="primary">
    {t(contactPage.submit, locale)}
  </Button>
</form>

Bileşen	Rol
fix-form	Form düzeni (Fix UI CSS)
Label	Erişilebilir etiket
Input	Metin / e-posta alanları
textarea + fix-input	Mesaj alanı
Button	Gönder — variant="primary"

Ayrıntılı sınıflar: Fix UI Kullanımı.

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

---

FormSubmitToast + client:load

Formun üstünde (aynı kart içinde) island mount edilir:

<FormSubmitToast
  client:load
  formId="contact-form"
  message={t(contactPage.toastMessage, locale)}
/>

Dosya: src/components/islands/FormSubmitToast.tsx

useEffect(() => {
  const form = document.getElementById(formId);
  if (!form) return;

  const handler = (event: Event) => {
    event.preventDefault();
    toast.success(message);
  };

  form.addEventListener('submit', handler);
  return () => form.removeEventListener('submit', handler);
}, [formId, message]);

• preventDefault → sayfa yenilenmez, ağ isteği yok
• Sonner toast.success — global Toaster BaseLayout’ta (Font & UI Kullanımı)

formId ile id="contact-form" eşleşmeli.

---

Demo Mesajı (Çeviri)

contact.ts:

toastMessage: ls(
  'Thanks! This is a demo — your message was not sent.',
  'Teşekkürler! Bu bir demo — mesajınız gönderilmedi.',
  …
),

Kullanıcıya gerçek gönderim olmadığı açıkça söylenir.

---

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

Demo yerine gerçek gönderim için tipik yollar:

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

FormSubmitToast yerine başarı/hata toast’u API yanıtına bağlanır. Spam koruması (honeypot, Turnstile) eklenir. Bu rehber kod eklemez — mimari seçim sizin.

---

Ne Değiştirirse Ne Olur

Değişiklik	Sonuç
formId / id uyumsuz	Toast tetiklenmez
toastMessage metni	4 dilde bildirim metni
preventDefault kaldırma	Tarayıcı action’a gider (demo bozulur)
Yeni alan (Input)	Form UI genişler; toast aynı kalabilir
client:load kaldırma	Island hydrate olmaz — submit çalışmaz

---

Yapmayın

• Her sayfada kopya toast useEffect yazmayın — FormSubmitToast yeniden kullanın.
• Contact bilgilerini forma hardcode etmeyin — sol kart contact.ts okur.
• Layout’a ikinci Toaster eklemeyin.
• Demo iken kullanıcıya «mesajınız iletildi» demeyin — metin dürüst kalsın.

---

İlgili Rehberler

• Fix UI Kullanımı — form, Label, Input, Button
• Font & UI Kullanımı — Sonner Toaster
• Çeviri Metinleri — form etiketleri
• Animasyonlar — Contact başlık hero
• React Kullanımı — island pattern

---

Özet

Contact demo formu: fix-form + Fix UI bileşenleri. FormSubmitToast client:load, preventDefault, Sonner toast. Gerçek backend yok. Canlıda Formspree/API/Worker. Toast mantığını sayfa başına kopyalamayın.