Web siteleri, ziyaret\u00e7ilerle etkile\u015fim kurman\u0131n ve bilgi toplaman\u0131n en temel yollar\u0131ndan biri olan formlara ihtiya\u00e7 duyar. \u0130leti\u015fim formlar\u0131, kay\u0131t formlar\u0131, geri bildirim anketleri veya e-posta abonelikleri… Liste uzay\u0131p gider. Ancak bu formlar\u0131 \u00e7al\u0131\u015f\u0131r hale getirmek \u00e7o\u011fu zaman bir arka u\u00e7 (backend) sunucusu, bir veritaban\u0131 ve ilgili programlama bilgisi gerektirir. Bu durum, \u00f6zellikle k\u00fc\u00e7\u00fck projeler, ki\u015fisel portf\u00f6y siteleri veya statik bloglar i\u00e7in gereksiz yere karma\u015f\u0131k, maliyetli ve zaman al\u0131c\u0131 olabilir. Peki ya bir backend sunucusu kurma, y\u00f6netme ve g\u00fcvenli\u011fini sa\u011flama derdine girmeden, sadece HTML, CSS ve belki biraz JavaScript kullanarak form g\u00f6nderimlerini ba\u015far\u0131yla halledebilirseniz? Bu rehberde, 2025 y\u0131l\u0131na uygun modern yakla\u015f\u0131mlarla, arka u\u00e7 olmadan HTML form g\u00f6nderimlerini nas\u0131l ele alaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Amac\u0131m\u0131z, hem geli\u015ftirme s\u00fcrecini basitle\u015ftirmek hem de sitenizin performans\u0131n\u0131 ve g\u00fcvenli\u011fini art\u0131rmak.<\/p>\n
Geleneksel web geli\u015ftirme yakla\u015f\u0131mlar\u0131nda, bir kullan\u0131c\u0131 bir HTML formunu doldurup “G\u00f6nder” d\u00fc\u011fmesine bast\u0131\u011f\u0131nda, bu veriler genellikle bir sunucuya (\u00f6rne\u011fin PHP, Node.js, Python tabanl\u0131 bir backend) g\u00f6nderilir. Sunucu bu verileri i\u015fler, do\u011frulama yapar, bir veritaban\u0131na kaydeder veya e-posta g\u00f6nderir. Ancak g\u00fcn\u00fcm\u00fcz\u00fcn JAMstack (JavaScript, APIs, Markup) ve statik site furyas\u0131yla birlikte, bir\u00e7ok proje i\u00e7in bu a\u011f\u0131r altyap\u0131 art\u0131k bir zorunluluk olmaktan \u00e7\u0131kt\u0131. Statik sitelerin h\u0131zl\u0131 y\u00fcklenmesi, d\u00fc\u015f\u00fck maliyetli bar\u0131nd\u0131r\u0131lmas\u0131 ve geli\u015ftirme kolayl\u0131\u011f\u0131 gibi avantajlar\u0131, form y\u00f6netimi konusunda da yeni \u00e7\u00f6z\u00fcmleri beraberinde getirdi. Bu rehber, bu yeni nesil \u00e7\u00f6z\u00fcmleri ele alarak, arka u\u00e7 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 ortadan kald\u0131rman\u0131n yollar\u0131n\u0131 g\u00f6sterecek ve formlar\u0131n\u0131z\u0131 zahmetsizce y\u00f6netmenizi sa\u011flayacak pratik bilgiler sunacakt\u0131r.<\/p>\n
Form y\u00f6netiminin arka u\u00e7suz hale gelmesi, sadece geli\u015ftiriciler i\u00e7in de\u011fil, ayn\u0131 zamanda son kullan\u0131c\u0131lar i\u00e7in de faydalar sunar. Sunucu taraf\u0131nda daha az kod \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131, genellikle daha h\u0131zl\u0131 yan\u0131t s\u00fcreleri ve daha iyi bir kullan\u0131c\u0131 deneyimi anlam\u0131na gelir. Ayr\u0131ca, sunucu g\u00fcvenli\u011fiyle ilgili potansiyel risklerin bir k\u0131sm\u0131 da ortadan kalkar, \u00e7\u00fcnk\u00fc hassas veriler do\u011frudan sunucunuza g\u00f6nderilmek yerine, g\u00fcvenilir \u00fc\u00e7\u00fcnc\u00fc taraf hizmetler veya API’ler arac\u0131l\u0131\u011f\u0131yla i\u015flenir. Bu sayede, projenizin \u00f6l\u00e7e\u011fi ne olursa olsun, form i\u015flevselli\u011fini kolayca entegre edebilir, maliyetleri d\u00fc\u015f\u00fcrebilir ve geli\u015ftirme s\u00fcre\u00e7lerinizi h\u0131zland\u0131rabilirsiniz. \u015eimdi, arka u\u00e7suz form g\u00f6nderiminin temel kavramlar\u0131na ve y\u00f6ntemlerine daha yak\u0131ndan bakal\u0131m.<\/p>\n
Arka u\u00e7suz form g\u00f6nderimi, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, form verilerini i\u015flemek i\u00e7in kendi sunucunuza veya veritaban\u0131n\u0131za ba\u011f\u0131ml\u0131 olmaman\u0131z anlam\u0131na gelir. Bu, \u00f6zellikle statik web siteleri veya JAMstack mimarisiyle geli\u015ftirilen uygulamalar i\u00e7in kritik \u00f6neme sahiptir. Temel olarak, bu yakla\u015f\u0131m, form verilerini do\u011frudan \u00fc\u00e7\u00fcnc\u00fc taraf hizmetlere y\u00f6nlendirerek veya JavaScript arac\u0131l\u0131\u011f\u0131yla harici API’ler kullanarak form etkile\u015fimini y\u00f6netmeyi hedefler. Bu sayede, sunucu kurulumu, bak\u0131m\u0131 ve g\u00fcvenli\u011fi gibi karma\u015f\u0131k g\u00f6revlerden kurtulmu\u015f olursunuz. Peki, bu “arka u\u00e7suz” sihir nas\u0131l ger\u00e7ekle\u015fiyor? \u0130\u015fte ba\u015fl\u0131ca y\u00f6ntemler:<\/p>\n
Bu y\u00f6ntem, form verilerinizi do\u011frudan \u00f6zel olarak tasarlanm\u0131\u015f bir \u00fc\u00e7\u00fcnc\u00fc taraf servisine g\u00f6ndermenizi sa\u011flar. Siz sadece basit bir HTML formu olu\u015fturursunuz ve formun Daha fazla kontrol ve \u00f6zelle\u015ftirme isteyen geli\u015ftiriciler i\u00e7in JavaScript kullanarak form verilerini do\u011frudan \u00e7e\u015fitli API’lere g\u00f6ndermek m\u00fcmk\u00fcnd\u00fcr. Bu senaryoda, HTML formunuzu bir JavaScript fonksiyonu ile yakalar, verileri toplar ve Teorik olarak, HTML formunuzun Bu yakla\u015f\u0131mlar\u0131n her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 bulunmaktad\u0131r. Se\u00e7iminiz, projenizin ihtiya\u00e7lar\u0131na, b\u00fct\u00e7enize ve teknik yetkinlik seviyenize ba\u011fl\u0131 olacakt\u0131r. Genel olarak, basit bir ileti\u015fim formu i\u00e7in \u00fc\u00e7\u00fcnc\u00fc taraf servisler idealdir. Daha dinamik veri toplama veya farkl\u0131 sistemlerle entegrasyon gerektiren durumlar i\u00e7in JavaScript ve API yakla\u015f\u0131mlar\u0131 daha uygun olabilir. Unutmay\u0131n, “arka u\u00e7suz” olmak, tamamen sunucusuz olmak anlam\u0131na gelmez; genellikle sunucu taraf\u0131 i\u015flevselli\u011fi sizin yerinize y\u00f6neten ba\u015fka bir hizmeti kullanmak anlam\u0131na gelir. \u015eimdi bu y\u00f6ntemleri daha detayl\u0131 inceleyelim.<\/p>\n \u00dc\u00e7\u00fcnc\u00fc parti form servisleri, arka u\u00e7suz form g\u00f6nderimini kolayla\u015ft\u0131ran en pop\u00fcler ve eri\u015filebilir y\u00f6ntemdir. Bu servisler, sizin i\u00e7in form verilerini toplar, e-posta bildirimleri g\u00f6nderir, spam filtreleme yapar ve hatta baz\u0131 durumlarda basit veri depolama \u00e7\u00f6z\u00fcmleri sunar. Gelin, bu servisleri kullanarak nas\u0131l form olu\u015fturaca\u011f\u0131m\u0131za dair bir vaka analizi ve ad\u0131m ad\u0131m k\u0131lavuzla ilerleyelim.<\/p>\n Diyelim ki, yakla\u015fan bir web semineri i\u00e7in kat\u0131l\u0131mc\u0131 kayd\u0131 toplamak isteyen basit, statik bir a\u00e7\u0131l\u0131\u015f sayfan\u0131z var. Bu durumda, Formspree gibi bir hizmet, sunucu kurma zahmetine girmeden kay\u0131tlar\u0131 y\u00f6netmek i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. \u0130\u015fte ad\u0131m ad\u0131m nas\u0131l yapaca\u011f\u0131n\u0131z:<\/p>\n Formspree Hesab\u0131 Olu\u015fturma:<\/strong> Formspree web sitesine gidin ve \u00fccretsiz bir hesap olu\u015fturun. Yeni bir form olu\u015fturdu\u011funuzda, size \u00f6zel bir form u\u00e7 noktas\u0131 (endpoint URL) sa\u011flayacakt\u0131r. Bu URL, HTML formunuzun HTML Form Yap\u0131s\u0131:<\/strong> Temel bir HTML formu olu\u015fturun. action<\/code> \u00f6zniteli\u011fini bu servisin API u\u00e7 noktas\u0131na ayarlars\u0131n\u0131z. Geri kalan t\u00fcm i\u015fi (verileri toplama, depolama, size e-posta ile bildirme, spam filtreleme vb.) bu servis yapar. Bu, form g\u00f6ndermenin en basit ve en yayg\u0131n yoludur. \u00d6rnek olarak Netlify Forms, Formspree, Getform ve Tally.so gibi platformlar g\u00f6sterilebilir. Bu hizmetler genellikle \u00fccretsiz katmanlar sunar ve k\u00fc\u00e7\u00fck projeler i\u00e7in olduk\u00e7a yeterlidir. Daha karma\u015f\u0131k ihtiya\u00e7lar i\u00e7in \u00fccretli planlara ge\u00e7i\u015f yapabilirsiniz. \u00d6zellikle Netlify ve Vercel gibi bar\u0131nd\u0131rma sa\u011flay\u0131c\u0131lar\u0131n\u0131n kendi b\u00fcnyelerinde sundu\u011fu form hizmetleri, bu platformlarda bar\u0131nd\u0131r\u0131lan siteler i\u00e7in entegrasyonu olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\n<\/li>\nJavaScript ve Harici API Etkile\u015fimleri: Dinamik ve Kontroll\u00fc \u00c7\u00f6z\u00fcmler<\/h3>\n
fetch<\/code> API veya XMLHttpRequest<\/code> kullanarak harici bir servisin API’sine (\u00f6rne\u011fin, bir e-tablo hizmeti, bir CRM, bir e-posta g\u00f6nderim API’si veya \u00f6zel bir webhook) POST iste\u011fi g\u00f6nderirsiniz. Bu y\u00f6ntem, form g\u00f6nderim s\u00fcrecini tamamen istemci taraf\u0131nda y\u00f6netmenize olanak tan\u0131r ve ba\u015far\u0131l\u0131\/ba\u015far\u0131s\u0131z geri bildirimleri dinamik olarak g\u00f6sterebilmenizi sa\u011flar. Google Sheets’i basit bir veritaban\u0131 olarak kullanmak i\u00e7in Google Apps Script ile olu\u015fturulmu\u015f bir API endpoint’ine veri g\u00f6ndermek veya Zapier\/Pipedream gibi otomasyon ara\u00e7lar\u0131n\u0131n sa\u011flad\u0131\u011f\u0131 webhook’lar\u0131 kullanmak bu kategoriye girer. Bu yakla\u015f\u0131m, \u00fc\u00e7\u00fcnc\u00fc taraf form servislerinden biraz daha fazla kodlama bilgisi gerektirir ancak size inan\u0131lmaz esneklik sunar.<\/p>\n<\/li>\nE-posta Tabanl\u0131 G\u00f6nderimler (S\u0131n\u0131rl\u0131 Kullan\u0131m)<\/h3>\n
action<\/code> \u00f6zelli\u011fini mailto:adresiniz@example.com<\/code> olarak ayarlayarak form verilerinin kullan\u0131c\u0131n\u0131n varsay\u0131lan e-posta istemcisi arac\u0131l\u0131\u011f\u0131yla size g\u00f6nderilmesini sa\u011flayabilirsiniz. Ancak bu y\u00f6ntem genellikle pratik de\u011fildir. Kullan\u0131c\u0131n\u0131n e-posta istemcisinin do\u011fru yap\u0131land\u0131r\u0131lm\u0131\u015f olmas\u0131 gerekir, genellikle spam olarak alg\u0131lan\u0131r ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan sorunlar yaratabilir (\u00f6rne\u011fin, e-posta istemcisi a\u00e7\u0131l\u0131r ve kullan\u0131c\u0131n\u0131n manuel olarak g\u00f6ndermesi gerekir). Bu nedenle, bu rehberde bu y\u00f6nteme odaklanmayacak, daha modern ve g\u00fcvenilir \u00e7\u00f6z\u00fcmlere a\u011f\u0131rl\u0131k verece\u011fiz. Ancak bu, “backend olmadan” bir form g\u00f6nderimi yapman\u0131n en ilkel yollar\u0131ndan biri olarak bilinmelidir.<\/p>\n<\/li>\n<\/ol>\nAd\u0131m Ad\u0131m K\u0131lavuz: \u00dc\u00e7\u00fcnc\u00fc Parti Form Servisleriyle G\u00fc\u00e7l\u00fc Formlar Olu\u015fturma<\/h2>\n
Vaka Analizi 1: Bir Etkinlik Kay\u0131t Sitesi i\u00e7in Formspree Entegrasyonu<\/h3>\n
\n
action<\/code> \u00f6zniteli\u011finde kullan\u0131lacak adrestir.<\/p>\n<\/li>\naction<\/code> \u00f6zniteli\u011fine Formspree’den ald\u0131\u011f\u0131n\u0131z URL’yi, method<\/code> \u00f6zniteli\u011fine ise POST<\/code> de\u011ferini atay\u0131n. Her form \u00f6\u011fesinin (input, textarea, select) bir name<\/code> \u00f6zniteli\u011fine sahip oldu\u011fundan emin olun, \u00e7\u00fcnk\u00fc Formspree bu isimleri kullanarak verileri toplayacakt\u0131r.<\/p>\n\n