ID formulir

Vue

Single-file component Vue yang mengirim ke Ikiform, plus server route Nuxt dengan secret key.

Vue mengirim dari browser dengan SDK atau fetch. Tidak perlu plugin atau build step di luar penyiapan biasa Anda.

Pasang SDK

Terminal
npm install @ikiform/sdk

Single-file component

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>

Untuk formulir dengan pemeriksaan manusia Ikiform, panggil challenge(formId) sebelum submit dan berikan tokennya sebagai { turnstileToken }, seperti di panduan React.

Server route Nuxt

Untuk mengirim dari server, tambahkan server route yang meneruskan body dengan secret key. Halaman lalu mengirim JSON ke route Anda sendiri. Untuk komponen yang mengirim langsung dari browser, dengan fallback sebelum hidrasi, lihat 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,
  });
});
Kiriman dari server Anda semuanya berasal dari alamat IP server Anda, jadi rate limit per pengunjung milik Ikiform menghitung semua pengunjung sekaligus. Preset Standard mengizinkan 5 kiriman per menit per IP dan formulir, yang bisa tercapai oleh situs yang ramai. Kirim dari browser jika bisa, atau pilih rate limit Relaxed atau Custom untuk formulir yang Anda proxy lewat server.