Netlify Forms ile Backendsiz İletişim Formu Nasıl Yapılır?

Netlify Forms, statik veya framework tabanlı bir sitedeki form gönderimlerini ayrı bir backend endpoint’i yazmadan kabul etmenizi sağlar. Form detection etkinleştirildikten sonra Netlify, deploy sırasında HTML içindeki işaretlenmiş formu algılar; doğrulanan gönderimleri dashboard’da gösterir ve istenirse e-posta, webhook veya Slack bildirimi tetikler. En basit kurulumda benzersiz bir form adı, method="POST" ve data-netlify="true" attribute’u yeterlidir.

Bu kolaylık, form güvenliği ve veri yönetiminin ortadan kalktığı anlamına gelmez. Input validation, erişilebilir hata mesajları, spam koruması, kişisel veri minimizasyonu, saklama politikası ve bildirim alıcıları yine proje sahibinin sorumluluğundadır.

Öne Çıkanlar

• Netlify Forms’un yeni veya güncellenmiş formları işlemesi için form detection etkin olmalı ve ardından site yeniden deploy edilmelidir.
• Her formun benzersiz bir name değeri olmalıdır.
• HTML formunda data-netlify="true" veya netlify attribute’u kullanılır.
• JavaScript/AJAX gönderiminde body URL encoded olmalı; JSON gönderimi doğrudan Netlify Forms formatı değildir.
• Framework tarafından yalnız browser’da render edilen form için build sırasında görülebilen statik bir form blueprint’i gerekebilir.
• Netlify, temel spam filtrelemesinde Akismet kullanır; honeypot ve reCAPTCHA 2 ek koruma sağlayabilir.
• Kredi tabanlı planlarda form submission’ları 23 Ağustos 2026 itibarıyla ücretsiz ve sınırsızdır; abuse ve kişisel veri riskleri devam eder.

Netlify Forms Nedir ve Kimler İçin Uygundur?

Netlify Forms, deploy edilen HTML’i tarayarak form tanımını build aşamasında kaydeden yönetilen bir form işleme hizmetidir. Kullanıcı formu gönderdiğinde Netlify isteği kabul eder, spam filtresinden geçirir ve doğrulanan submission’ı proje panelinde saklar.

Şu projeler için güçlü bir başlangıçtır:

• Kişisel portföy ve iletişim sayfası,
• Etkinlik veya kampanya microsite’ı,
• Basit teklif talebi,
• Statik ürün veya ajans sitesi,
• İçerik önerisi veya geri bildirim formu,
• Backend ekibi olmayan küçük proje.

Aşağıdaki ihtiyaçlarda ise özel Function veya uygulama backend’i daha uygun olabilir:

• Karmaşık çok adımlı form,
• Her gönderimde gerçek zamanlı business rule ve authorization,
• Hassas sağlık, finans veya kimlik verisi,
• Büyük dosya, virüs taraması veya özel retention,
• Transaction ve idempotency gerektiren kayıt,
• Çok ayrıntılı webhook retry ve queue yönetimi,
• Kullanıcının gönderim geçmişini görmesi.

Netlify Forms, form alanlarını otomatik olarak güvenli iş sürecine dönüştürmez. Kullanıcının girdiği verinin nereye gittiğini, kim tarafından görüldüğünü ve ne zaman silindiğini ayrıca tasarlayın.

En Basit HTML Formu Nasıl Oluşturulur?

Aşağıdaki form build sırasında Netlify tarafından algılanabilir:

```html <form name="contact" method="POST" data-netlify="true" action="/tesekkur.html"> <input type="hidden" name="form-name" value="contact">

<p> <label for="name">Adınız</label> <input id="name" name="name" type="text" autocomplete="name" required> </p>

<p> <label for="email">E-posta</label> <input id="email" name="email" type="email" autocomplete="email" required> </p>

<p> <label for="subject">Konu</label> <input id="subject" name="subject" type="text" maxlength="120" required> </p>

<p> <label for="message">Mesajınız</label> <textarea id="message" name="message" rows="6" maxlength="2000" required></textarea> </p>

<button type="submit">Gönder</button> </form> ```

Temel alanlar:

• name="contact": Formun Netlify panelindeki adı.
• method="POST": Submission yöntemi.
• data-netlify="true": Netlify Forms işaretlemesi.
• Hidden form-name: Özellikle AJAX ve JavaScript akışında doğru formun seçilmesini sağlar.
• Her input içindeki name: Dashboard’da saklanacak field key’idir.
• action: Başarılı normal HTML gönderimi sonrası açılacak statik sayfa.

Form adını sonradan değiştirmek, panelde yeni bir form gibi algılanmasına ve eski submission görünümünün ayrılmasına yol açabilir. Alan adını veya type’ını değiştirdiğinizde eski veriler UI’da yeni form şemasına göre görünmeyebilir; önceki kayıtlar API üzerinden hâlâ erişilebilir olabilir. Bu yüzden form şemasını version control’da dikkatli değiştirin.

Form Detection Nasıl Etkinleştirilir?

Netlify dashboard’da proje içindeki Forms bölümünden form detection etkinleştirilir. Bu ayar açıldıktan sonra yeniden deploy gerekir. Netlify, sonraki deploy’un HTML çıktısını tarar ve işaretlenmiş formu Active forms listesine ekler.

Kontrol sırası:

1. Forms bölümünde detection açık mı? 2. Yeni deploy alındı mı? 3. Build sonucundaki gerçek HTML içinde form var mı? 4. Formun name değeri benzersiz mi? 5. data-netlify="true" veya netlify attribute’u bulunuyor mu? 6. Submit edilen alanların name attribute’u var mı?

Build logunda form post-processing aşaması görülebilir. Form kaynak JSX veya Vue component’inde bulunmasına rağmen nihai HTML’de yoksa Netlify build sistemi formu algılamayabilir.

Form detection’ı form kullanmayan projede kapatmak post-processing’i azaltabilir. Ancak aktif bir form varken kapatılırsa yeni veya değiştirilmiş formlar submission kabul etmeyebilir. Ayarı değiştirmeden önce alternatif endpoint’in devrede olduğunu doğrulayın.

JavaScript ile Render Edilen Formlar Nasıl Çalışır?

React gibi client-side framework’lerde form yalnız JavaScript çalıştıktan sonra DOM’a ekleniyorsa deploy sırasında Netlify’nin taradığı statik HTML’de görünmeyebilir. Çözüm, aynı field şemasını içeren statik ve gizli bir blueprint eklemek olabilir:

``html <form name="contact" data-netlify="true" hidden> <input type="text" name="name"> <input type="email" name="email"> <input type="text" name="subject"> <textarea name="message"></textarea> </form> ``

Gerçek React formu aynı form-name ve field adlarıyla AJAX gönderir. Hidden blueprint, kullanıcının kullanacağı form değildir; build sistemine schema’yı gösterir.

Next. js Runtime v5 gibi belirli framework akışlarında form tanımlarının özel statik HTML dosyasına çıkarılması ve AJAX ile gönderilmesi gerekebilir. Framework adapter ve Netlify Forms dokümanı yayın tarihinde birlikte kontrol edilmelidir.

Static blueprint’te olmayan yeni bir JavaScript field’ı gönderirseniz Netlify alanı beklediğiniz gibi kaydetmeyebilir. Form schema değiştiğinde blueprint ve UI aynı commit’te güncellenmelidir.

AJAX ile Form Nasıl Gönderilir?

AJAX gönderimi, sayfayı yenilemeden loading, success ve error state göstermenizi sağlar. Netlify Forms request body’si URL encoded olmalıdır; doğrudan JSON body göndermek uygun değildir.

``html <form id="contact-form" name="contact" data-netlify="true"> <input type="hidden" name="form-name" value="contact"> <label> E-posta <input type="email" name="email" required> </label> <label> Mesaj <textarea name="message" required></textarea> </label> <button type="submit">Gönder</button> <p id="form-status" role="status" aria-live="polite"></p> </form> ``

```js const form = document.querySelector("#contact-form"); const status = document.querySelector("#form-status"); const submitButton = form.querySelector('button[type="submit"]');

const encode = (formData) => new URLSearchParams(formData). toString();

form. addEventListener("submit", async (event) => { event. preventDefault(); submitButton. disabled = true; status. textContent = "Gönderiliyor…";

try { const response = await fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: encode(new FormData(form)) });

if (! response. ok) { throw new Error(Form request failed: ${response. status}); }

form. reset(); status. textContent = "Mesajınız alındı. Teşekkürler. "; } catch (error) { console. error("contact_form_failed", { errorType: error instanceof Error ? error. name : "unknown" }); status. textContent = "Mesaj gönderilemedi. Lütfen yeniden deneyin. "; } finally { submitButton. disabled = false; } }); ```

JSON yerine application/x-www-form-urlencoded kullanılır. FormData() tüm named field’ları ve boş honeypot alanını body’ye dahil eder.

UX açısından:

• Submit sırasında butonu geçici devre dışı bırakın.
• Kullanıcıya görünür loading state verin.
• Başarıdan sonra formu temizleyin veya gönderim ID’si gösterin.
• Hata halinde kullanıcının yazdığını kaybetmeyin.
• Status mesajını aria-live ile screen reader’a duyurun.
• Retry yapılacaksa aynı submission’ın iki kez oluşabileceğini düşünün.

Client-side required ve maxlength kontrolleri kullanıcı deneyimidir; kötü niyetli request bunları atlayabilir. Hassas business validation gerekiyorsa Function veya özel backend kullanın.

Başarı Sayfası ve Hata UX’i Nasıl Tasarlanır?

Normal HTML submit’inde action="/tesekkur. html" ile statik başarı sayfasına yönlendirebilirsiniz. Bu dosya publish directory içinde gerçekten bulunmalıdır.

``html <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mesajınız alındı</title> </head> <body> <main> <h1>Teşekkürler</h1> <p>Mesajınız bize ulaştı.</p> <a href="/">Ana sayfaya dön</a> </main> </body> </html> ``

Custom success path çalışmıyorsa aynı sayfadan o path’e normal link verip dosyanın deploy edildiğini doğrulayın. Redirect veya SPA fallback, form POST endpoint’ini beklenmeyen route’a gönderebilir. Browser Network panelinde POST’un final status ve URL’sini inceleyin.

AJAX akışında HTTP 2xx dönmesi, submission’ın verified listesine girdiğini tek başına kanıtlamaz. Spam filtresi nedeniyle Spam submissions bölümüne düşebilir veya honeypot/reCAPTCHA tarafından sessizce reddedilebilir. Dashboard kontrolü zorunludur.

Bildirimler Nasıl Kurulur?

Verified submission geldiğinde e-posta, webhook veya Slack bildirimleri yapılandırılabilir. Netlify dashboard’da notification ayarından tüm formlar veya belirli bir form için hedef seçilir.

E-posta bildiriminde formda name="email" alanı bulunması, Reply-to değerinin submission e-postasına ayarlanmasına yardımcı olabilir. Böylece yanıt verirken adresi elle kopyalamak gerekmez.

Bildirimleri kurarken:

• Dağıtım listesini minimum yetkiyle belirleyin.
• Form body’sinde hassas veri varsa e-posta notification’a tamamını taşımayın.
• Webhook endpoint’inde imza/doğrulama ve idempotency kullanın.
• Slack kanalına kişisel veri göndermeyin.
• Notification başarısız olduğunda dashboard’un source of truth olduğunu unutmayın.
• Test gönderimiyle delivery zamanı ve reply-to davranışını doğrulayın.

E-posta bildirimini tek kayıt sistemi kabul etmeyin. Mesaj spam klasörüne düşebilir, dağıtım listesi değişebilir veya webhook geçici hata verebilir. Submission dashboard’u ve gerekiyorsa API/export süreci ayrı tutulmalıdır.

Spam Koruması Nasıl Eklenir?

Netlify tüm form submission’larını Akismet ile filtrelediğini belirtir. Verified listesinde görünmeyen testler Spam submissions bölümünde olabilir. Ek koruma için honeypot veya reCAPTCHA 2 kullanılabilir.

Honeypot

```html <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" > <input type="hidden" name="form-name" value="contact">

<p class="visually-hidden"> <label> Bu alanı boş bırakın <input name="bot-field" type="text" tabindex="-1" autocomplete="off"> </label> </p>

<label> E-posta <input type="email" name="email" required> </label>

<label> Mesaj <textarea name="message" required></textarea> </label>

<button type="submit">Gönder</button> </form> ```

Bot bot-field alanını doldurursa submission sessizce reddedilir ve spam listesine bile girmeyebilir. AJAX request’inde honeypot field’ın body içinde boş değerle bulunması gerekir; FormData(form) bunu kolaylaştırır.

Honeypot alanını erişilebilirlik ağacından yanlış biçimde gizleyip gerçek kullanıcının doldurmasına yol açmayın. CSS yaklaşımını keyboard ve screen reader ile test edin.

reCAPTCHA 2

reCAPTCHA kullanıcı etkileşimi ve üçüncü taraf veri aktarımı getirir. Privacy/consent, erişilebilirlik ve regional erişim sorunları değerlendirilmelidir. Honeypot ve Akismet yeterliyse ek friction gerekmeyebilir. Abuse yüksekse rate limit veya özel Function katmanı da düşünülmelidir.

Dosya Yükleme ve PII İçin Nelere Dikkat Edilmeli?

Netlify Forms dosya upload destekleyebilir; uploaded file linkleri dashboard, e-posta notification, CSV export ve API gibi yerlerde erişilebilir olabilir. Netlify setup dokümanında file request için yaklaşık 8 MB request boyutu ve 30 saniye upload süresi gibi limitler belirtilir; yayın tarihinde güncel limit yeniden doğrulanmalıdır.

Dosya alanı:

``html <label> Ek dosya <input type="file" name="attachment" accept=".pdf,.jpg,.png"> </label> ``

accept browser UX filtresidir; gerçek dosya türü ve güvenliği garanti etmez. Malware taraması, executable içerik, dosya adı sanitization ve erişim kontrolü hassas kullanımda ayrıca ele alınmalıdır.

Netlify, PII toplayan formlarda verinin aktif biçimde yönetilmesini; gerektiğinde export edilip düzenli silinmesini önerir. PII içeren file upload için ek güvenlik entegrasyonu gerekebilir.

Veri minimizasyonu soruları:

• Telefon numarasına gerçekten ihtiyaç var mı?
• Serbest metinde sağlık veya kimlik bilgisi girmemesi kullanıcıya açıklandı mı?
• Submission’a kim erişebilir?
• E-posta ve Slack notification aynı veriyi kaç yere kopyalıyor?
• Saklama süresi ve silme sahibi belli mi?
• Kullanıcının silme talebi nasıl işlenecek?

Bir formu silmek, geçmiş submission’ları kalıcı olarak kaldırır; file upload direct URL’lerinin cache nedeniyle kısa süre erişilebilir kalabileceği dokümante edilmiştir. Silme sürecini anlık mutlak yok olma garantisi gibi sunmayın.

Form Neden Dashboard’da Görünmüyor?

Form detection kapalı

Forms bölümünden detection’ı açın ve yeniden deploy edin. Ayarı açmak mevcut deploy’u geriye dönük taramayabilir.

Form statik HTML’de yok

JavaScript ile sonradan render edilen form için hidden static blueprint ekleyin. Build output HTML’ini inceleyin.

name veya attribute eksik

Formda benzersiz name, POST method ve data-netlify="true" bulunmalıdır. Input’ların da name değerleri olmalıdır.

_redirects veya framework routing POST’u yakalıyor

Form POST endpoint’i SPA fallback veya Function route’una gidiyor olabilir. Network panelinde request’in final URL ve response’unu kontrol edin.

AJAX body JSON

URL encoded body ve doğru Content-Type kullanın. Hidden form-name body’de bulunmalıdır.

Test spam’e düştü

Verified yerine Spam submissions listesini kontrol edin. Netlify, bariz sahte e-posta, anlamsız kısa metin ve aynı IP’den hızlı tekrarların spam’e düşebileceğini belirtir. Testte gerçek kişisel veri kullanmadan gerçekçi sentetik cümleler ve kontrollü aralık kullanın.

Honeypot yanlışlıkla doluyor

Password manager, browser autofill veya görünür CSS nedeniyle insan kullanıcı honeypot field’ı dolduruyor olabilir. Field adını ve autocomplete davranışını test edin.

Eski field verisi görünmüyor

Son deploy’da field adı/type’ı değişmiş olabilir. UI yalnız güncel form şemasına göre alan gösterebilir; eski veriyi API üzerinden doğrulayın.

Zorunlu Form Test Planı

Briefin istediği test yalnız sentetik veriyle yapılmalıdır:

Grup	Adet	Örnek	Beklenen gözlem
Geçerli	5	Geçerli format, tam cümle	Verified listesi ve notification
Geçersiz	3	Eksik email, uzun message, hatalı format	Client veya endpoint hatası
Spam benzeri	3	Honeypot dolu, tekrar, şüpheli metin	Reddedilme veya spam listesi

Kaydedilecek alanlar:

• Commit SHA ve deploy URL,
• Form detection durumu,
• Gönderim zamanı,
• HTTP status ve final URL,
• Verified/Spam/dashboard görünürlüğü,
• E-posta/webhook delivery zamanı,
• Honeypot/reCAPTCHA sonucu,
• False positive veya false negative,
• Kullanılan browser ve network,
• Kredi tabanlı/legacy plan türü.

Test e-posta adresleri gerçek bir kişiye ait olmamalı; ancak spam filtresinin bariz test@test. com gibi verileri farklı değerlendirebileceği not edilmelidir. Size ait kontrollü alias veya özel test domain’i kullanılabilir.

> Editör notu — zorunlu özgün kanıt: Bu taslak hazırlanırken form gerçek Netlify projesine deploy edilmedi; 5 geçerli, 3 geçersiz ve 3 spam-benzeri submission çalıştırılmadı. Yayından önce yalnız sentetik veriyle test yapılmalı; dashboard ekranı, notification header’ları, status code’lar ve false-positive sonucu kaydedilmelidir. Ölçülmeyen teslim süresi veya spam başarı oranı yazıya eklenmemelidir.

> Görsel notu: HTML form → Netlify detection → spam filter → verified/spam listesi → notification akışını gösteren özgün şema ve redakte dashboard ekranları hazırlanmalıdır.

> İç link editör notu: Netlify Functions, environment variables ve AI form özetleme yazıları yayımlandığında validation, webhook ve veri işleme bölümlerine doğal bağlantı eklenmelidir.

Netlify Forms Kontrol Listesi

• [ ] Form detection etkin ve site yeniden deploy edildi.
• [ ] Form adı benzersiz.
• [ ] method="POST" ve data-netlify="true" mevcut.
• [ ] Tüm field’larda doğru name bulunuyor.
• [ ] JavaScript form için static blueprint doğrulandı.
• [ ] AJAX body URL encoded ve form-name içeriyor.
• [ ] Loading, success ve error state erişilebilir.
• [ ] Verified ve Spam listeleri ayrı kontrol edildi.
• [ ] Honeypot/reCAPTCHA gerçek kullanıcıyı engellemiyor.
• [ ] Notification alıcısı ve privacy etkisi belirlendi.
• [ ] PII minimizasyonu ve retention politikası yazıldı.
• [ ] 11 gönderimlik sentetik test raporlandı.

Sık Sorulan Sorular

Netlify Forms ücretsiz mi?

23 Ağustos 2026 itibarıyla kredi tabanlı planlarda form submissions ücretsiz ve sınırsız olarak belgeleniyor. Legacy planlarda kullanım/fiyatlandırma farklı olabilir; spam ve dosya depolama riskleri yine yönetilmelidir.

Form gönderimi için JavaScript gerekir mi?

Hayır. Basit HTML POST formu yeterlidir. AJAX yalnız sayfa yenilenmeden özel UX istendiğinde kullanılır.

Netlify Forms JSON kabul eder mi?

Standart AJAX akışında body URL encoded olmalıdır. JSON gönderimi doğrudan Netlify Forms submission formatı değildir.

React formu neden algılanmıyor?

Form yalnız client-side render ediliyorsa build HTML’inde görünmeyebilir. Aynı field şemasını içeren static hidden form blueprint’i eklemek gerekebilir.

Netlify Forms hassas veri için uygun mu?

Basit PII için minimizasyon, erişim ve düzenli silme gerekir. Sağlık, finans, kimlik belgesi veya hassas file upload gibi senaryolarda özel güvenlik, hukuki değerlendirme ve alternatif backend/storage daha uygun olabilir.

Kaynaklar

• Forms setup
• Form submissions
• Form notifications
• Spam filters
• Forms troubleshooting
• Forms usage and billing

Sonuç

Netlify Forms, basit bir iletişim formunu ayrı backend geliştirmeden production’a çıkarmayı kolaylaştırır. Sağlam kurulum için form detection’ı açıp yeniden deploy edin, form adını ve static HTML blueprint’ini doğrulayın, AJAX gönderimini URL encoded yapın ve dashboard’da Verified ile Spam listelerini ayrı kontrol edin. Honeypot ve reCAPTCHA’yı yalnız abuse riskine göre ekleyin; PII, notification ve retention kararlarını formun teknik kurulumundan bağımsız bırakmayın.

Kendi iletişim formunuzu backend yazmadan oluşturmak için [ücretsiz Netlify hesabı açabilirsiniz](https://join. netlify. com/wmkqymu1heo2). Bu bir iş ortaklığı bağlantısıdır; bağlantı üzerinden kayıt olmanız veya ücretli plana geçmeniz halinde Ortak Alan komisyon kazanabilir.