FRAMEWORK

Nuxt uygulamanız için form backend

Formstork, Nuxt formunuzun POST'unu karşılayan backend'dir. Alanlarınızı access key ile bir Formstork endpoint'ine yollarsınız; Formstork her gönderimi e-posta olarak size iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve gönderimi aranabilir bir panele kaydeder. Kurup bakımını yapacağınız bir server route yoktur.

Nasıl çalışır

Nuxt formunuzu render etmekte harikadır, ama verinin yine de gidecek bir yere ihtiyacı vardır. O yer Formstork'tur. Bileşeniniz alanları gizli bir access_key ile https://api.formstork.com/submit adresine POST eder; gerisini Formstork halleder: gönderimi saklar, ziyaretçinin adresini reply-to yaparak size e-postayla iletir ve spam filtresinden geçirir. İstek doğrudan endpoint'e gittiği için bir Nitro server route'una, veritabanına ya da SMTP servisine ihtiyacınız olmaz. Sayfa ister sunucuda render edilsin ister tamamen statik yayınlansın, aynı şekilde çalışır.

vue

<script setup>
const status = ref("")

async function onSubmit(e) {
  status.value = "sending"
  const res = await fetch("https://api.formstork.com/submit", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(e.target),
  })
  status.value = res.ok ? "sent" : "error"
}
</script>

<template>
  <p v-if="status === 'sent'">Thanks, we got your message.</p>
  <form v-else @submit.prevent="onSubmit">
    <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 :disabled="status === 'sending'">Send</button>
  </form>
</template>

Bakımını yapacağınız server route yok

Bir Nitro API route'una, veritabanına ya da SMTP kurulumuna ihtiyacınız yok. Form doğrudan Formstork'a gider, böylece Nuxt uygulamanız tamamen frontend kalır ve dağıtıp izlemeniz gereken bir parça daha azalır.

Statik ya da SSR, aynı kod

Nuxt'u ister statik site ister sunucu tarafı render ile dağıtın, endpoint'e giden fetch çağrısı aynıdır. Render modunuzu değiştirdiğinizde form işleme tarafında hiçbir şey değişmez.

Her gönderim, kayıtlı ve aranabilir

E-postanın yanında her gönderim, aranabilir ve etiketlenebilir bir panelde saklanır ve CSV ya da JSON olarak dışa aktarılabilir. Gönderimleri ayrıca Slack, Notion, Google Sheets ve imzalı webhook'lara yönlendirebilirsiniz.

Kurulum

1app.formstork.com adresindeki Formstork panelinden ücretsiz bir access key alın. Kredi kartı gerekmez.
2Bir Nuxt bileşeninde form oluşturun ve gizli bir access_key alanıyla https://api.formstork.com/submit adresine POST edin.
3Bir email alanı ekleyin; böylece Formstork her bildirimde ziyaretçinin adresini reply-to olarak ayarlar.
4npm run dev ile çalıştırın, bir test gönderimi yapın ve gelen kutunuza ve panele düştüğünü görün.

Sık sorulanlar

Nuxt'ta backend olmadan form gönderimlerini nasıl yönetirim?

Formunuzu Formstork'a yönlendirin. Nuxt bileşeniniz alanları gizli bir access_key ile https://api.formstork.com/submit adresine POST eder; Formstork her gönderimi e-postayla iletir, panelde saklar ve ziyaretçinin e-postasını reply-to yapar. Hiç server kodu yazmazsınız.

Nitro server route'una veya API endpoint'ine ihtiyacım var mı?

Hayır. Form doğrudan tarayıcıdan Formstork endpoint'ine POST eder, bu yüzden Nitro route'una, veritabanına ya da mail servisine ihtiyacınız yoktur. İsterseniz isteği kendi server route'unuz üzerinden geçirebilirsiniz, ama gerekli değildir.

Nuxt'ta @formstork/vue composable'ını kullanabilir miyim?

Evet. Nuxt Vue üzerinde çalışır, bu yüzden @formstork/vue paketi her script setup bileşeninde çalışır. Burada gösterilen sade fetch yöntemi ise hiçbir bağımlılık gerektirmez ve paket eklemek istemezseniz iyi bir alternatiftir.

Formstork'u ücretsiz dene

Tam panelle ayda 250 gönderim. Kredi kartı gerekmez.

Access key'ini al Dokümanları oku