Ai-je besoin d'un backend ou d'un serveur Node pour ce formulaire de contact Vue ?

Non. Le formulaire POSTe directement vers Formhook, donc votre app Vue peut rester une SPA statique pure. Compilez avec Vite, déployez le dossier dist/ sur n'importe quel CDN.

Puis-je utiliser ceci avec Pinia / Vue Router state ?

Oui - le snippet est un SFC autonome, mais vous pouvez remonter l'état de statut dans Pinia ou utiliser Vue Router pour naviguer vers une route de remerciement séparée après le succès.

Et si j'utilise l'Options API au lieu de ?

Le même motif fetch fonctionne dans un handler methods.onSubmit avec data() { return { status: 'idle' } }. Seule la syntaxe diffère - Formhook se moque du style Vue que vous utilisez.

← Tous les guides

Guide

Formulaire de contact Vue (sans backend)

Vue est un framework côté client, mais le formulaire de contact que vous livrez n'a pas besoin de backend de votre côté. Utilisez le form action HTML brut dans n'importe quel template Vue, ou un SFC Vue 3 avec <script setup> et fetch pour une UX succès/erreur inline.

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.

contact.html

<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 Vue

Utilisez cette version si vous voulez des états succès/erreur côté client sans rechargement de page.

src/components/ContactForm.vue

<!-- src/components/ContactForm.vue -->
<script setup lang="ts">
import { ref } from "vue";

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));

  const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });

  status.value = res.ok ? "ok" : "error";
  if (res.ok) form.reset();
}
</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 formulaire HTML brut fonctionne dans n'importe quel template Vue - c'est juste du markup. Pour un flux succès/erreur inline, le snippet SFC utilise <script setup> avec une state machine de statut adossée à un ref et un appel fetch vers formhook.app/f/YOUR_API_KEY. Object.fromEntries(new FormData(form)) sérialisé en JSON est la forme de payload la plus propre ; Formhook accepte aussi form-encoded et multipart.

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) - particulièrement utile pour les déploiements SPA-only sans capacité d'envoi d'e-mails.

Lancez votre formulaire de contact Vue aujourd'hui.

Inscrivez-vous gratuitement, créez un formulaire, collez la clé API. Cinq minutes.

Commencer gratuitement

Niveau gratuit : 5 formulaires · 250 soumissions/mois · Sans carte bancaire.

Formulaire de contact Vue - FAQ

Ai-je besoin d'un backend ou d'un serveur Node pour ce formulaire de contact Vue ?: Non. Le formulaire POSTe directement vers Formhook, donc votre app Vue peut rester une SPA statique pure. Compilez avec Vite, déployez le dossier dist/ sur n'importe quel CDN.
Puis-je utiliser ceci avec Pinia / Vue Router state ?: Oui - le snippet est un SFC autonome, mais vous pouvez remonter l'état de statut dans Pinia ou utiliser Vue Router pour naviguer vers une route de remerciement séparée après le succès.
Et si j'utilise l'Options API au lieu de <script setup> ?: Le même motif fetch fonctionne dans un handler methods.onSubmit avec data() { return { status: 'idle' } }. Seule la syntaxe diffère - Formhook se moque du style Vue que vous utilisez.

Guides pour les autres frameworks

Migrating from Formspree? See how Formhook compares.