FRAMEWORK

Vue uygulamanız için form backend

Formstork, Vue formunuzun POST'unu alan backend'dir. Submit handler'ınızı access key'inizle Formstork endpoint'ine yönlendirin; her gönderim size e-postayla gelir, aranabilir bir panele kaydedilir ve ziyaretçiye e-postayı yanıtlayarak dönebilirsiniz.

Nasıl çalışır

Vue tarafında form state'i zaten elinizde, dolayısıyla tek ihtiyacınız olan bu alanları Formstork'a yollayan bir submit handler. Handler'ınız form verisini gizli bir access_key alanıyla birlikte https://api.formstork.com/submit adresine POST eder, gerisini Formstork halleder. Her gönderimi size e-postayla yollar, ziyaretçinin e-postasını reply-to olarak ayarlar ve mesajı aranabilir, etiketlenebilir bir panele kaydeder. Sade bir fetch çağrısı olduğu için Vite uygulamasında, Nuxt'ta ya da herhangi bir Vue kurulumunda aynı şekilde, kendi sunucunuz olmadan tarayıcıda çalışır. Fetch'i elle yazmak istemezseniz @formstork/vue paketini de kullanabilirsiniz.

vue

<script setup>
import { ref } from "vue";

const sent = ref(false);

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

<template>
  <p v-if="sent">Thanks, we will be in touch.</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 type="submit">Send</button>
  </form>
</template>

Kurulacak ya da yayınlanacak backend yok

Vue tarayıcıda çalışır, bu da öyle. Ayakta tutmanız gereken bir Express route'u, bir serverless fonksiyon ya da kendi sunucunuz yok. Formunuz doğrudan Formstork'a POST eder, siz de statik bir build yayınlarsınız.

Her gönderim saklanır ve aranabilir

E-postanın ötesinde, her gönderim arayabileceğiniz, etiketleyebileceğiniz ve CSV ya da JSON olarak dışa aktarabileceğiniz bir panele kaydedilir. Hiçbir şey yalnızca e-posta kutusunda kalmaz, silinen bir mesaj yüzünden asla bir başvuruyu kaybetmezsiniz.

Size ulaşmadan spam filtrelenir

Gizli bir honeypot ve sunucu tarafı içerik filtresi çöp gönderimleri otomatik yakalar; daha fazlasını istediğinizde Turnstile, hCaptcha ya da reCAPTCHA'yı açabilirsiniz. Gerçek mesajlar temiz şekilde gelir.

Kurulum

1Formstork'ta bir form oluşturun ve access key'ini panelden kopyalayın.
2Vue bileşeninizde, formdan bir FormData oluşturan bir submit handler ekleyin.
3Bu veriyi access_key dahil olacak şekilde https://api.formstork.com/submit adresine POST edin.
4Bir kez test amaçlı gönderin. Gönderim hem e-posta kutunuza hem de panelinize düşer.

Sık sorulanlar

Vue'da backend olmadan form gönderimlerini nasıl işlerim?

Vue bileşeninize, form alanlarını access key'inizle birlikte https://api.formstork.com/submit adresine POST eden bir submit handler ekleyin. Formstork isteği alır, gönderimi size e-postayla yollar ve saklar; böylece kendi sunucunuza ya da API route'unuza ihtiyacınız olmaz.

FormData mı JSON mı kullanmalıyım?

İkisi de çalışır. FormData en basiti, çünkü doğrudan form elementinden oluşturabilirsiniz ve ücretli planlardaki dosya yüklemeleri için de bunu kullanırsınız. İsterseniz bunun yerine application/json içerik tipiyle bir JSON gövdesi gönderebilirsiniz.

@formstork/vue paketini kullanmak zorunda mıyım?

Hayır. Paket, işleri kolaylaştıran bir composable, ancak endpoint'e atılan sade bir fetch çağrısı her yerde çalışır ve ihtiyacınız olan tek şey budur. Projenize hangisi uyuyorsa onu kullanın.

Formstork'u ücretsiz dene

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

Access key'ini al Dokümanları oku