Guide
Formulaire de contact Nuxt (sans backend)
Nuxt n'a pas besoin d'une route serveur pour recevoir les soumissions de formulaire de contact. Déposez le formulaire HTML brut dans une page Nuxt, ou - si vous voulez un retour côté client - utilisez un handler Vue 3 <script setup> avec $fetch et un ref pour suivre l'état de la soumission.
Utilisez un formulaire HTML brut
Vous n'avez pas besoin d'une route API. Le formulaire POSTe directement vers Formhook, et votre framework n'a jamais à toucher la soumission.
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" required></textarea>
</label>
<!-- honeypot: bots fill this; humans don't see it -->
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
<!-- optional: send users to a thank-you page after a native POST -->
<input type="hidden" name="_redirect" value="https://example.com/thanks" />
<button type="submit">Send</button>
</form>Ou envoyez avec fetch dans Nuxt
Utilisez cette version si vous voulez des états succès/erreur côté client sans rechargement de page.
<!-- pages/contact.vue -->
<script setup lang="ts">
type Status = "idle" | "sending" | "ok" | "error";
const status = ref<Status>("idle");
async function onSubmit(e: Event) {
e.preventDefault();
status.value = "sending";
const form = e.target as HTMLFormElement;
const data = Object.fromEntries(new FormData(form));
try {
await $fetch("https://formhook.app/f/YOUR_API_KEY", {
method: "POST",
body: data,
});
status.value = "ok";
form.reset();
} catch {
status.value = "error";
}
}
</script>
<template>
<p v-if="status === 'ok'">Thanks - we'll be in touch.</p>
<form v-else @submit="onSubmit">
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
<input type="text" name="_gotcha" tabindex="-1" hidden />
<button type="submit" :disabled="status === 'sending'">
{{ status === "sending" ? "Sending…" : "Send" }}
</button>
<p v-if="status === 'error'">Something went wrong. Please try again.</p>
</form>
</template>Comment ça marche
Le snippet de formulaire brut fonctionne dans n'importe quelle page Nuxt (pages/contact.vue) sans route server/api correspondante. Pour les états succès/erreur côté client, le deuxième snippet utilise $fetch - le wrapper fetch intégré de Nuxt - et un ref pour piloter la state machine du statut. Les deux vont directement vers formhook.app/f/YOUR_API_KEY.
Ce qui se passe ensuite
- La soumission arrive dans votre tableau de bord Formhook en moins d'une seconde.
- Une notification push se déclenche sur chaque appareil où vous l'avez activée.
- Répondez directement depuis le tableau de bord (Pro et au-dessus) - pas besoin d'API serveur Nuxt ni d'intégration e-mail transactionnel.
Lancez votre formulaire de contact Nuxt aujourd'hui.
Inscrivez-vous gratuitement, créez un formulaire, collez la clé API. Cinq minutes.
Commencer gratuitementNiveau gratuit : 5 formulaires · 250 soumissions/mois · Sans carte bancaire.
Formulaire de contact Nuxt - FAQ
- Dois-je écrire une route serveur Nitro pour le formulaire ?
- Non. Le formulaire poste directement vers Formhook, ce qui signifie que votre site Nuxt peut rester entièrement statique si c'est ce que vous voulez. Pas de /server/api/contact.ts à maintenir.
- Est-ce que cela fonctionne avec `nuxt generate` (site statique) ?
- Oui. Le formulaire de contact est juste un POST HTML - il ne se soucie pas de savoir si le reste de votre site Nuxt est rendu statiquement ou en périphérie.
- Où mettre la clé API ? Est-il sûr de la committer ?
- La clé API est un identifiant par formulaire, pas un secret au sens traditionnel - elle est déjà exposée dans le HTML de chaque visiteur. Traitez-la comme un identifiant d'endpoint public et appuyez-vous sur les rate limits par formulaire de Formhook, la liste CORS et le commutateur Turnstile pour la protection.
Guides pour les autres frameworks
Migrating from Formspree? See how Formhook compares.