ID du formulaire

Vue

Un composant monofichier Vue qui envoie à Ikiform, plus une route serveur Nuxt avec une clé secrète.

Vue envoie depuis le navigateur avec le SDK ou fetch. Aucun plugin ni étape de build n'est nécessaire au-delà de votre configuration habituelle.

Installez le SDK

Terminal
npm install @ikiform/sdk

Un composant monofichier

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>

Pour les formulaires avec la vérification humaine Ikiform, appelez challenge(formId) avant submit et passez le token dans { turnstileToken }, comme dans le guide React.

Route serveur Nuxt

Pour envoyer plutôt depuis le serveur, ajoutez une route serveur qui transmet le corps avec une clé secrète. La page envoie alors du JSON à votre propre route. Pour un composant qui envoie directement depuis le navigateur, avec une solution de repli avant l'hydratation, voir 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,
  });
});
Les envois depuis votre serveur viennent tous de l'adresse IP de votre serveur, donc les limites de débit par visiteur d'Ikiform comptent tous les visiteurs ensemble. Le préréglage Standard autorise 5 envois par minute par IP et par formulaire, ce qu'un site fréquenté peut atteindre. Envoyez depuis le navigateur quand c'est possible, ou choisissez la limite de débit Relaxed ou Custom pour les formulaires que vous faites passer par un serveur.