SvelteKit

이 페이지는 서버가 필요 없습니다. 폼의 action이 Ikiform 엔드포인트이므로 adapter-static과 모든 정적 호스트에서 작동합니다. JavaScript가 없으면 일반 HTML처럼 POST하고 리디렉션하며, JavaScript가 있으면 fetch로 POST하고 결과를 그 자리에 보여 줍니다. 대신 시크릿 키를 사용하는 폼 액션으로 POST하려면 Svelte를 참고하세요.

use:enhance를 쓰지 않는 이유

SvelteKit의 use:enhance는 +page.server.js 파일에 정의된 액션을 가리키는 method="POST" 폼에서만 작동합니다. Ikiform은 외부 URL이므로 이 페이지는 대신 작은 onsubmit 핸들러를 사용합니다. 점진적 향상 방식은 같습니다. 폼이 먼저 작동하고, 스크립트가 이를 개선합니다.

설정하기

1. 공개 환경 변수 추가하기

   PUBLIC_IKIFORM_FORM_ID=frm_xxxxxxxxxxxxxxxx
   PUBLIC_SITE_URL=https://example.com

   PUBLIC_SITE_URL은 JavaScript 없는 경우의 리디렉션에 사용합니다. 프리렌더링 중에는 page.url.origin이 여러분의 도메인이 아니라 http://sveltekit-prerender이므로, 이 값으로 리디렉션 주소를 만들 수 없습니다.

2. 페이지 프리렌더링하기

   export const prerender = true;

3. 폼 추가하기

   <script>
     import { PUBLIC_IKIFORM_FORM_ID, PUBLIC_SITE_URL } from "$env/static/public";
   
     const endpoint = `https://ikiform.com/f/${PUBLIC_IKIFORM_FORM_ID}`;
   
     let status = $state("idle");
     let errors = $state({});
     let message = $state("");
   
     async function onsubmit(event) {
       event.preventDefault();
       status = "sending";
       try {
         const response = await fetch(endpoint, {
           method: "POST",
           headers: { Accept: "application/json" },
           body: new FormData(event.currentTarget),
         });
         const result = await response.json();
         if (result.ok) {
           status = "sent";
           return;
         }
         errors = result.error.fields ?? {};
         message = result.error.message;
       } catch {
         message = "Couldn't reach the server. Try again.";
       }
       status = "error";
     }
   </script>
   
   {#if status === "sent"}
     <p>Thanks, we got it.</p>
   {:else}
     <form action={endpoint} method="POST" {onsubmit}>
       <label>
         Email
         <input name="email" type="email" autocomplete="email" required aria-invalid={errors.email ? "true" : undefined} />
       </label>
       {#if errors.email}<p>{errors.email[0]}</p>{/if}
       <label>
         Message
         <textarea name="message" rows="5"></textarea>
       </label>
       <input type="hidden" name="_redirect" value={`${PUBLIC_SITE_URL}/contact/thanks`} />
       <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"}>{status === "sending" ? "Sending" : "Send"}</button>
     </form>
   {/if}

   리디렉션 대상으로 src/routes/contact/thanks/+page.svelte를 추가하세요.

SvelteKit의 CSP를 사용한다면

kit.csp를 설정했다면 fetch POST와 일반 폼 POST 모두에 Ikiform을 허용하세요. 그렇지 않으면 브라우저가 둘 중 하나를 막습니다.

const config = {
  kit: {
    csp: {
      directives: {
        "connect-src": ["self", "https://ikiform.com"],
        "form-action": ["self", "https://ikiform.com"],
      },
    },
  },
};

export default config;

Allowed domains

프로덕션과 미리보기 호스트를 등록하세요.

• vercel.app, pages.dev, netlify.app만 단독으로 추가하지 마세요. 다른 사람의 사이트를 포함해 그 호스트의 모든 사이트가 일치하게 됩니다.

테스트 체크리스트

1. 허용 도메인에 localhost를 넣고 개발 서버를 실행해 제출하세요. 감사 메시지가 폼을 대체해야 합니다.
2. vite build를 실행하고, 결과물에 폼이 이미 들어 있는 contact.html이 있는지 확인하세요.
3. JavaScript를 끄고 새로 고친 뒤 제출하세요. https: 도메인에서는 /contact/thanks로 이동해야 합니다.
4. 미리보기 배포에서 제출하고 스팸으로 표시되지 않는지 확인하세요.

문제 해결

관련 문서

• SvelteSvelte 5 컴포넌트와 서버 액션.
• AstroJavaScript 없는 폼, 원하면 향상 적용.
• Allowed domains출처를 비교하는 방식과 불일치 시 동작.
• 오류모든 오류 코드와 원인, 해결 방법.