Vue

Ikiform에 제출하는 Vue 싱글 파일 컴포넌트, 그리고 시크릿 키를 쓰는 Nuxt 서버 라우트.

Vue에서는 SDK나 fetch로 브라우저에서 POST합니다. 평소 설정 외에 플러그인이나 빌드 단계는 필요 없습니다.

SDK 설치

Terminal

npm install @ikiform/sdk

싱글 파일 컴포넌트

ContactForm.vue

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

const status = ref("idle");
const errors = ref({});
const message = ref("");

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

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

Ikiform 사람 확인을 쓰는 폼은 React 가이드처럼 submit 전에 challenge(formId)를 호출하고 토큰을 { turnstileToken }으로 전달하세요.

Nuxt 서버 라우트

서버에서 POST하려면 시크릿 키와 함께 본문을 전달하는 서버 라우트를 추가하세요. 페이지는 여러분의 라우트로 JSON을 POST합니다. 하이드레이션 전 대체 동작을 갖추고 브라우저에서 바로 POST하는 컴포넌트는 Nuxt를 참고하세요.

server/api/contact.post.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return $fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}` },
    body,
    ignoreResponseError: true,
  });
});

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