Vue

Un componente de archivo único de Vue que envía a Ikiform, más una ruta de servidor de Nuxt con una clave secreta.

Vue envía desde el navegador con el SDK o con fetch. No hace falta ningún plugin ni paso de build aparte de tu configuración habitual.

Instala el SDK

Terminal

npm install @ikiform/sdk

Un componente de archivo único

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>

En formularios con la verificación humana de Ikiform, llama a challenge(formId) antes de submit y pasa el token como { turnstileToken }, como en la guía de React.

Para enviar desde el servidor, añade una ruta de servidor que reenvíe el cuerpo con una clave secreta. La página envía entonces JSON a tu propia ruta. Para un componente que envía directamente desde el navegador, con una alternativa antes de la hidratación, consulta 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,
  });
});

Todos los envíos que salen de tu servidor vienen de la dirección IP de tu servidor, así que los límites de frecuencia por visitante de Ikiform cuentan a todos los visitantes juntos. El preset Standard permite 5 envíos por minuto por IP y formulario, algo que un sitio con mucho tráfico puede alcanzar. Envía desde el navegador cuando puedas, o elige el límite de frecuencia Relaxed o Custom para los formularios que pasan por un servidor.

Instala el SDK

Un componente de archivo único

Ruta de servidor de Nuxt