Svelte와 SvelteKit

브라우저에서 POST하는 Svelte 5 컴포넌트와, 시크릿 키로 POST하는 SvelteKit 폼 액션.

Svelte 컴포넌트

npm install @ikiform/sdk로 SDK를 설치한 뒤 브라우저에서 폼을 POST하세요.

ContactForm.svelte

<script>
  import { submit } from "@ikiform/sdk";

  let status = $state("idle");
  let errors = $state({});
  let message = $state("");

  async function onsubmit(event) {
    event.preventDefault();
    status = "sending";
    const result = await submit("frm_xxxxxxxxxxxxxxxx", new FormData(event.currentTarget));
    if (result.ok) {
      status = "sent";
      return;
    }
    errors = result.error.fields ?? {};
    message = result.error.message;
    status = "error";
  }
</script>

{#if status === "sent"}
  <p>Thanks, we got it.</p>
{:else}
  <form {onsubmit}>
    <label>
      Email
      <input name="email" type="email" required />
    </label>
    {#if errors.email}<p>{errors.email[0]}</p>{/if}
    <label>
      Message
      <textarea name="message"></textarea>
    </label>
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
    {#if status === "error" && !errors.email}<p role="alert">{message}</p>{/if}
    <button disabled={status === "sending"}>Send</button>
  </form>
{/if}

SvelteKit 폼 액션

폼 액션은 JavaScript 없이도 작동하고, JavaScript가 로드되면 향상됩니다. 액션은 IKIFORM_SECRET_KEY로 저장한 시크릿 키를 사용해 Ikiform에 POST합니다. 서버 없는 프리렌더링 페이지는 SvelteKit을 참고하세요.

src/routes/contact/+page.server.js

import { env } from "$env/dynamic/private";
import { fail } from "@sveltejs/kit";

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const body = new URLSearchParams();
    for (const [name, value] of data) if (typeof value === "string") body.append(name, value);
    const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
      method: "POST",
      headers: { Accept: "application/json", Authorization: `Bearer ${env.IKIFORM_SECRET_KEY}` },
      body,
    });
    const result = await response.json();
    if (!result.ok) return fail(response.status, { message: result.error.message, fields: result.error.fields ?? {} });
    return { sent: true };
  },
};

src/routes/contact/+page.svelte

<script>
  import { enhance } from "$app/forms";

  let { form } = $props();
</script>

{#if form?.sent}
  <p>Thanks, we got it.</p>
{:else}
  <form method="POST" use:enhance>
    <label>
      Email
      <input name="email" type="email" required />
    </label>
    {#if form?.fields?.email}<p>{form.fields.email[0]}</p>{/if}
    <label>
      Message
      <textarea name="message"></textarea>
    </label>
    {#if form?.message && !form?.fields?.email}<p role="alert">{form.message}</p>{/if}
    <button>Send</button>
  </form>
{/if}

서버에서 보낸 POST는 모두 서버의 IP 주소에서 오므로, Ikiform의 방문자별 레이트 리밋이 모든 방문자를 합쳐서 셉니다. Standard 프리셋은 IP와 폼별로 분당 5건을 허용하며, 트래픽이 많은 사이트는 이 한도에 닿을 수 있습니다. 가능하면 브라우저에서 POST하거나, 서버를 거쳐 보내는 폼에는 Relaxed 또는 Custom 레이트 리밋을 고르세요.