FRAMEWORK

SvelteKit için form backend'i

Formstork, SvelteKit formlarınızdan gelen gönderimleri alır, her birini size e-postayla iletir ve aranabilir bir panele kaydeder. Kuracak bir API route'u, çalıştıracak bir sunucu, bağlayacak bir veritabanı yok.

Nasıl çalışır

SvelteKit, bir formu yönetmek için iki doğal yer sunar: +page.svelte içinde client tarafında bir submit handler ya da +page.server.js içinde bir server form action. Her iki durumda da isteği gerçekten alacak bir backend gerekir ve bu Formstork'tur. Formunuz alanlarını, gizli bir access_key ile birlikte https://api.formstork.com/submit adresine gönderir; Formstork da her gönderimi size e-postayla iletir, ziyaretçinin e-postasını reply-to olarak ayarlar ve aranabilir, etiketlenebilir bir panelde saklar. İşin tamamen client tarafında kalmasını isterseniz bir +page.svelte handler'ından fetch() kullanın; isteği tarayıcıdan uzak tutmayı tercih ederseniz bir +page.server.js action'ından POST edin. Spam filtresini, otomatik yanıtları ya da Slack veya Google Sheets gibi bir entegrasyonu istediğinizde açarsınız.

svelte

<!-- src/routes/contact/+page.svelte -->
<script>
  let status = "";

  async function handleSubmit(event) {
    const data = new FormData(event.currentTarget);
    data.append("access_key", "YOUR_ACCESS_KEY");
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: data,
      headers: { Accept: "application/json" },
    });
    status = res.ok ? "Thanks, your message was sent." : "Something went wrong.";
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="you@example.com" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

{#if status}<p>{status}</p>{/if}

Kuracak API route'u ya da veritabanı yok

Bir +server.js uç noktasına, veritabanına bağlı bir form action'a ya da bunları barındıracak bir yere ihtiyacınız yok. SvelteKit formunuz doğrudan Formstork'a POST eder; Formstork her gönderimi sizin için alır, iletir ve saklar.

Client tarafı ya da server action, seçim sizin

Her şeyi client'ta tutmak için bir +page.svelte handler'ından fetch() ile, ya da isteği tarayıcıdan ve bundle'ınızdan uzak tutmak için bir +page.server.js action'ından POST edin. Aynı access key ve endpoint her ikisinde de çalışır.

Her gönderim saklanır ve aranabilir

E-postanın ötesinde Formstork her gönderimi aranabilir, etiketlenebilir bir panelde saklar; filtreleyebilir, CSV ya da JSON olarak dışa aktarabilirsiniz. Spam, size ulaşmadan önce bir honeypot, bir içerik filtresi ve isteğe bağlı Turnstile, hCaptcha ya da reCAPTCHA ile yakalanır.

Kurulum

1src/routes/contact/+page.svelte gibi bir route'ta formunuzu oluşturun ve her input'a bir name özniteliği verin (bunlar aldığınız alanlar olur).
2Bir submit handler içinde formdan bir FormData oluşturun, access_key'inizi ekleyin ve fetch() ile https://api.formstork.com/submit adresine POST edin (ya da bir +page.server.js action'ından POST edin).
3app.formstork.com'da kaydolun, access key'inizi panelden kopyalayın ve YOUR_ACCESS_KEY yerine yapıştırın.
4Bir kez test amaçlı gönderin. Gönderim, ziyaretçinin e-postası reply-to olarak ayarlanmış şekilde hem e-posta kutunuza hem de panelinize düşer. İsteğe bağlı: spam korumasını ya da bir entegrasyonu açın.

Sık sorulanlar

SvelteKit'te form gönderimlerini nasıl yönetirim?

Form alanlarınıza name özniteliği verin, sonra bir submit handler içinde bir FormData oluşturun, access_key'inizi ekleyin ve fetch() ile https://api.formstork.com/submit adresine POST edin. Formstork isteği alır, gönderimi size e-postayla iletir ve panelinizde saklar. İsterseniz bir +page.server.js form action'ından da POST edebilirsiniz.

Bir +server.js uç noktası ya da veritabanı gerekir mi?

Hayır. Formstork barındırılan backend'dir; bir +server.js route'u yazmaz, sunucu çalıştırmaz ya da veritabanı bağlamazsınız. Formunuz Formstork uç noktasına POST eder ve her gönderim hem e-posta kutunuza iletilir hem de panelinize kaydedilir.

SSR ve statik SvelteKit derlemeleriyle çalışır mı?

Evet. +page.svelte içinden yapılan client tarafı fetch() tarayıcıda çalışır; bu yüzden SvelteKit uygulamanız ister server-rendered, ister prerender edilmiş, ister tamamen statik bir adapter-static derlemesi olsun aynı şekilde çalışır. Server tarafında render edilen route'lar için bir +page.server.js action'ından da POST edebilirsiniz. Ücretsiz plan, kredi kartı gerekmeden ayda 250 gönderimi kapsar.

Formstork'u ücretsiz dene

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

Access key'ini al Dokümanları oku