SvelteKit

SvelteKit, herhangi bir route bileşeni içinde @formstork/svelte store ile çalışır. Store; submit işleyicisini, yükleniyor bayrağını ve başarı durumunu sizin için bağlar, böylece formunuz neredeyse hiç kod olmadan çalışır.

Kurulum

npm install @formstork/svelte

İstemci tarafı form

En basit kurulum tamamen bir +page.svelte route içinde yaşar.

<!-- src/routes/contact/+page.svelte -->
<script>
  import { createFormstork } from "@formstork/svelte";

  const { submit, isSubmitting, isSuccess, message } = createFormstork({
    accessKey: "YOUR_ACCESS_KEY",
  });
</script>

{#if $isSuccess}
  <p>Thanks, {$message}</p>
{:else}
  <form on:submit={submit}>
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button disabled={$isSubmitting}>
      {$isSubmitting ? "Sending..." : "Send"}
    </button>
  </form>
{/if}

Store, adı olan her alanı okur, gizli access_key alanını ekler ve sizin adınıza Formstork’a gönderir. Döndürdüğü Svelte store’larını $ önekiyle okuyun.

Sunucu tarafı form action

İsteği istemciden uzak tutmak mı istiyorsunuz? Bunun yerine bir form action içinden endpoint’e gönderin.

// src/routes/contact/+page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    data.append("access_key", "YOUR_ACCESS_KEY");
    await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: data,
      headers: { Accept: "application/json" },
    });
    return { success: true };
  },
};

Bunu +page.svelte dosyanızdaki düz bir <form method="POST"> ile eşleştirin.

Adım adım

1. app.formstork.com adresinden kaydolun ve ücretsiz erişim anahtarınızı panelden kopyalayın.
2. npm install @formstork/svelte komutunu çalıştırın.
3. src/routes/contact/+page.svelte gibi bir route oluşturun.
4. Yukarıdaki <script> bloğunu ekleyin ve YOUR_ACCESS_KEY yerine gerçek anahtarınızı yazın.
5. Her input’a bir name verin; bunlar aldığınız alanlar olur.
6. Buton durumu için $isSubmitting, teşekkür mesajı için $isSuccess kullanın.
7. Sunucu tarafı akış için +page.server.js action’ını ve method="POST" olan bir form ekleyin.

Gönderimler panelinizde görünür. Ücretsiz plan ayda 250 gönderimi kapsar.