JavaScript fetch() ile HTML Form Verilerini Nasıl Gönderirsin

Eğer daha önce bir iletişim formu oluşturdun ve kullanıcı "Gönder" butonuna tıkladıktan sonra tüm sayfanın yeniden yüklendiğini izlediysen, bu deneyimin ne kadar rahatsız edici olduğunu zaten biliyorsun. HTML form gönderme fetch javascript tekniklerini kullanarak, form verilerini arka planda bir backend endpoint'ine gönderebilir, kullanıcıyı aynı sayfada tutabilir ve herhangi bir tam sayfa yenilemesi olmadan temiz bir başarı veya hata mesajı gösterebilirsin. Bu rehber, temel HTML yazmaktan fetch() çağrını bir Sendform endpoint'ine yönlendirmeye kadar her adımda sana rehberlik ediyor, böylece gönderimler doğrudan gelen kutuna veya bağlı iş akışına ulaşıyor.

Neden Varsayılan Form Gönderimi Yerine fetch() Kullanmalı

Tarayıcının varsayılan form gönderme davranışı tam olarak bir şey yapar: form alanlarını serileştirir, action URL'sine bir POST (veya GET) isteği gönderir ve ardından sunucunun döndürdüğü yanıtı yükler. Bu, kullanıcının beyaz bir yanıp sönme görmesi, kaydırma konumunu kaybetmesi ve yeni bir sayfanın çizilmesini beklemesi anlamına gelir. Yavaş bir bağlantıda bu bozuk gibi hissettirilebilir.

Fetch API bunu tamamen JavaScript'te programatik olarak HTTP istekleri yaparak, uzaklaşmadan çözer. Bu, kullanıcıları meşgul tutan ve yükleme durumları, satır içi doğrulama geri bildirimi ve animasyonlu başarı bannerları dahil olmak üzere kullanıcı deneyiminin her yönünü kontrol etmeni sağlayan sayfa yenilemesi olmadan form gönderme desenini mümkün kılar.

fetch() tercih etmek için ek pratik nedenler:

• Düz bir HTML formunun gönderemeyeceği özel başlıklar (örneğin, bir CSRF token'ı veya yetkilendirme anahtarı) ekleyebilirsin.
• Endpoint'in beklediğine bağlı olarak veriyi JSON, FormData veya URL kodlu dizeler olarak serileştirebilirsin.
• Hata işleme açıktır. "Başarısızlığın" ne anlama geldiğine ve nasıl iletileceğine sen karar verirsin.
• Mantık tamamen tarayıcıda yaşadığı için GitHub Pages, Netlify veya CDN'de barındırılanlar da dahil olmak üzere herhangi bir statik sitede çalışır.

Temel HTML Form Kurulumu

Tek bir satır JavaScript yazmadan önce, iyi yapılandırılmış bir HTML formuna ihtiyacın var. Buradaki temel detay, JavaScript gönderimi halledeceği için herhangi bir yere işaret eden bir action özelliğine ihtiyacın olmadığıdır. Ancak her input'ta anlamlı name özelliklerine sahip olmak istersin - bunlar gönderilen yükte alan anahtarları haline gelir.

<form id="contact-form" novalidate>
  <div>
    <label for="name">Adın</label>
    <input type="text" id="name" name="name" required placeholder="Ayşe Yılmaz">
  </div>

  <div>
    <label for="email">E-posta Adresi</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
  </div>

  <div>
    <label for="message">Mesaj</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Mesaj Gönder</button>

  <!-- Geri bildirim alanı -->
  <div id="form-feedback" aria-live="polite"></div>
</form>

Bu işaretlemede dikkat edilmesi gereken birkaç şey:

• Form elementindeki novalidate, JavaScript'te hata mesajlaşması üzerinde tam kontrol vererek yerel tarayıcı doğrulama baloncuklarını devre dışı bırakır.
• aria-live="polite" ile id="form-feedback" div'i, başarı ve hata mesajlarının görüneceği yerdir. ARIA özelliği, ekran okuyucuların geri bildirimi otomatik olarak duyurmasını sağlar.
• Her input hem bir id (etiket ilişkilendirmesi için) hem de bir name (form yükü için) içerir.

Submit Olayını Yakalama

Herhangi bir javascript form gönderiminde ilk adım, tarayıcının varsayılan davranışını engellemektir. Bunu form elementinde submit olayını dinleyerek ve hemen event.preventDefault() çağırarak yaparsın.

const form = document.getElementById('contact-form');

form.addEventListener('submit', async function (event) {
  event.preventDefault(); // Varsayılan sayfa navigasyonunu durdur

  // Temel istemci tarafı doğrulama
  const name = form.elements['name'].value.trim();
  const email = form.elements['email'].value.trim();
  const message = form.elements['message'].value.trim();

  if (!name || !email || !message) {
    showFeedback('Lütfen tüm alanları doldur.', 'error');
    return;
  }

  // Veri göndermeye devam et (sonraki bölüm)
  await submitForm({ name, email, message });
});

Doğrulama mantığını ağ çağrısından ayırarak, kodu okunabilir ve genişletmesi kolay tutarsın. Olay işleyicisindeki async anahtar kelimesi, içinde await kullanmanı sağlar, bu da Fetch API form veri çağrısının senkron görünmesini sağlar ve derin iç içe promise zincirlerinden kaçınır.

fetch() Çağrısını Sendform Endpoint'ine Yönlendirme

Gerçek işin yapıldığı yer burası. Form gönderimlerini almak, saklamak ve iletmek için kendi sunucunu oluşturmak yerine, Sendform'u backend'in olarak kullanabilirsin. Sendform kontrol panelinde bir form oluşturduktan sonra, benzersiz bir endpoint URL alırsın. Bu URL tek ihtiyacın olan şey.

Aşağıdaki gönderim fonksiyonu, Sendform'un doğal olarak kabul ettiği yükü oluşturmak için FormData API'sını kullanır:

async function submitForm(data) {
  // Bu URL'yi gerçek Sendform endpoint'inle değiştir
  const SENDFORM_ENDPOINT = 'https://sendform.net/tr/YOUR_FORM_ID';

  const formData = new FormData();
  formData.append('name', data.name);
  formData.append('email', data.email);
  formData.append('message', data.message);

  try {
    const response = await fetch(SENDFORM_ENDPOINT, {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      showFeedback('Teşekkürler! Mesajın gönderildi.', 'success');
      form.reset();
    } else {
      const errorData = await response.json().catch(() => ({}));
      const errorMsg = errorData.message || 'Bir şeyler ters gitti. Lütfen tekrar dene.';
      showFeedback(errorMsg, 'error');
    }
  } catch (networkError) {
    showFeedback('Ağ hatası. Bağlantını kontrol et ve tekrar dene.', 'error');
  }
}

Bu kodda alınan temel kararlar:

• Manuel olarak Content-Type başlığı ayarlanmaz. Body olarak bir FormData nesnesi geçtiğinde, tarayıcı otomatik olarak doğru multipart/form-data sınırını ayarlar.
• response.ok kontrolü sadece 200 değil, tüm 2xx HTTP durum kodlarını kapsar. Bu, response.status === 200 karşılaştırmasından daha sağlamdır.
• Dış try/catch, response.ok'un asla göremeyeceği ağ düzeyindeki hataları (DNS hataları, çevrimdışı durum) yakalar.

Yanıtı İşleme - Başarı ve Hata Mesajları

Veriyi göndermek işin sadece yarısı. Kullanıcıların anında, net geri bildirime ihtiyacı var. Yukarıda referans verilen showFeedback() yardımcı fonksiyonu, HTML'ye eklediğin geri bildirim div'ine bir mesaj yazar:

function showFeedback(message, type) {
  const feedbackEl = document.getElementById('form-feedback');
  feedbackEl.textContent = message;
  feedbackEl.className = type === 'success' ? 'feedback-success' : 'feedback-error';
}

Bu kasıtlı olarak minimal. Gerçek bir projede textContent yerine animasyonlu bir bileşen veya toast bildirim kütüphanesi kullanabilirsin, ancak desen aynı kalır: fetch() çağrısının sonucuna göre DOM'u güncelle.

Özel teşekkür sayfasına yönlendirme veya gönderimden sonra bir downstream otomasyonu tetikleme gibi daha gelişmiş senaryolar için, webhook'lar, Zapier ve API'larla form iş akışlarını nasıl otomatikleştireceğin makalemize göz at.

En İyi Uygulamalar ve İpuçları

Kodun çalışmasını sağlamak bir şey. Üretimde dayanacak şekilde göndermek başka bir şey. Akılda tutulması gereken en önemli ipuçları şunlar:

• İstek sırasında gönder butonunu devre dışı bırak. fetch() çağırmadan önce button.disabled = true ayarla ve bir finally bloğunda yeniden etkinleştir. Bu, kullanıcı birden fazla kez tıklarsa yinelenen gönderileri önler.
• Yükleme durumu göster. İstek devam ederken buton metnini "Gönderiliyor..." olarak değiştir veya spinner sınıfı ekle. Geri bildirim görmeyen kullanıcılar genellikle hiçbir şey olmadığını varsayar ve tekrar tıklar.
• Sunucu tarafında da doğrula. İstemci tarafı doğrulama kullanıcı deneyimi içindir. Sendform ve herhangi bir backend hizmet, gelen tüm veriyi güvenilmez olarak ele almalıdır.
• Her yerde HTTPS kullan. Form verisini düz HTTP üzerinden göndermek, kullanıcı girdisini transit halinde açığa çıkarır. Sendform endpoint'leri varsayılan olarak HTTPS'dir, ancak kendi sayfanın da HTTPS üzerinden sunulduğundan emin ol.
• Spam koruması ekle. Honeypot alanı veya CAPTCHA entegrasyonu önemsiz gönderileri önemli ölçüde azaltır. Bu konuya daha derin bir bakış için formlar için spam koruması en iyi uygulamaları rehberimize göz at.
• Hata yolunu kasıtlı olarak test et. Endpoint URL'sini geçici olarak geçersiz bir şeyle değiştir ve hata mesajının göründüğünü doğrula. Çoğu geliştirici sadece mutlu yolu test eder.
• Endpoint URL'sini sürüm kontrolunun dışında tut. Projen açık kaynaklıysa, Sendform endpoint'ini .gitignore'da listelenen bir ortam değişkeninde veya config dosyasında sakla.

Sonuç

Varsayılan form gönderimini bir fetch() çağrısıyla değiştirmek, herhangi bir iletişim veya potansiyel müşteri yakalama formuna yapabileceğin en yüksek etkili iyileştirmelerden biridir. Sonuç, kullanıcıları sayfanda tutan ve geri bildirim mesajlaşması üzerinde tam kontrol veren daha hızlı, daha profesyonel bir deneyimdir. Bunu bir Sendform endpoint'iyle eşleştir ve herhangi bir sunucu tarafı koda duyulan ihtiyacı tamamen ortadan kaldırırsın. Formun canlı, gönderilerin gelen kutuna ulaşıyor ve kullanıcıların rahatsız edici sayfa yenilemesi görmüyor. Ücretsiz Sendform endpoint'ini bugün oluştur ve ilk gönderimin dakikalar içinde teslim edilsin.

Sık Sorulan Sorular