FRAMEWORK
Alpine.js uygulamanız için bir form backend'i
Alpine.js size reaktif bir form verir ama gönderimi tek başına hiçbir şey karşılamaz. @submit handler'ınızı Formstork'a yönlendirin; böylece her girdi size e-postayla gelsin ve aranabilir bir panele kaydedilsin, çalıştıracak sunucu olmadan.
Nasıl çalışır
Alpine.js formunuzun etkileşimli kısmını halleder: x-data ile state, doğrulama ve @submit.prevent ile bağlanmış bir submit handler. Kendi başına yapamayacağı şey gönderimi alıp saklamaktır, çünkü bunun için bir backend gerekir. Formstork işte o backend'dir. Handler'ınız formdan bir FormData oluşturur ve access key'inizle bir Formstork uç noktasına POST eder; Formstork da her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve girdiyi aranabilir bir panele kaydeder. İstek sade bir fetch() olduğundan, Alpine bileşeniniz herhangi bir statik host'ta kalır; deploy edilecek sunucu ya da serverless function yoktur.
<form
x-data="{
sending: false,
sent: false,
async submit(e) {
this.sending = true
const res = await fetch('https://api.formstork.com/submit', {
method: 'POST',
body: new FormData(e.target),
})
this.sending = false
this.sent = res.ok
if (res.ok) e.target.reset()
}
}"
@submit.prevent="submit"
>
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="email" name="email" placeholder="Your email" required />
<textarea name="message" placeholder="Your message" required></textarea>
<button type="submit" :disabled="sending" x-text="sending ? 'Sending...' : 'Send'"></button>
<p x-show="sent">Thanks, your message was sent.</p>
</form>Backend yok, sadece bir fetch()
Alpine handler'ınız form verisini doğrudan Formstork'a POST eder; çalıştıracak sunucu ya da deploy edilecek serverless function yoktur. Aynı bileşen GitHub Pages'ten Netlify, Vercel ve Cloudflare Pages'e kadar her statik host'ta çalışır.
Her gönderim e-postalanır ve saklanır
Her gönderim, ziyaretçinin adresi reply-to olarak ayarlanmış şekilde size e-posta olur; yanıtla dediğinizde mesajı yazan kişiye ulaşırsınız. Her girdi ayrıca aranabilir, etiketlenebilir bir panelde tutulur; filtreleyip CSV ya da JSON olarak dışa aktarabilirsiniz.
Spam sunucu tarafında halledilir
Gizli bir honeypot ve sunucu tarafında bir içerik filtresi, botları size ulaşmadan yakalar; istediğinizde Turnstile, hCaptcha ya da reCAPTCHA ekleyebilirsiniz. Bir kurallar motoru, bir alanın değerine göre gönderimi yönlendirebilir, engelleyebilir ya da redirect edebilir.
Kurulum
- 1Form işaretlemenizi oluşturun ve Alpine ile x-data üzerinden yönetin; gönderimi @submit.prevent ile kendi handler'ınıza bağlayın.
- 2Handler içinde alanları fetch() ile https://api.formstork.com/submit adresine gönderin; access key'inizi access_key alanı olarak ekleyin (gizli bir input ya da FormData girdisi).
- 3Yanıtı okuyun: res.ok olduğunda başarı durumunu gösterip formu sıfırlayın. Formstork gönderimi çoktan size e-postayla iletti ve sakladı.
- 4İsteğe bağlı: spam korumasını (honeypot, Turnstile, hCaptcha, reCAPTCHA) açın ya da Slack, Notion veya Google Sheets gibi bir entegrasyon bağlayın.
Sık sorulanlar
Alpine.js'te form gönderimlerini nasıl yönetirim?
Formun gönderimini @submit.prevent ile x-data içindeki bir handler'a bağlayın, ardından alanları fetch() ile access key'inizle bir Formstork uç noktasına POST edin. Formstork gönderimi alır, size e-postayla iletir ve aranabilir bir panelde saklar; böylece kendiniz hiç backend yazmaz ya da çalıştırmazsınız.
Alpine.js formu için backend ya da sunucu gerekir mi?
Hayır. Alpine bileşeniniz herhangi bir statik host'ta durabilen sade HTML ve JavaScript'tir. Formstork, POST'u alıp her gönderimi ileten barındırılan backend'dir; çalıştıracağınız ya da bakımını üstleneceğiniz hiçbir şey yoktur.
Ücretsiz mi?
Evet. Ücretsiz plan; tam panel, e-posta teslimi, spam filtresi, entegrasyonlar ve 90 günlük saklama ile ayda 250 gönderim içerir, kredi kartı gerekmez. Ücretli planlar daha yüksek hacim, kalıcı saklama, otomatik yanıtlar ve dosya yükleme/ek desteği ekler.
Formstork'u ücretsiz dene
Tam panelle ayda 250 gönderim. Kredi kartı gerekmez.
Access key'ini alDokümanları oku