logo
Publié le

Créer un formulaire de contact avec Formspree dans un projet Next.js

Auteurs

📨 Introduction

Quand ton site Next.js est statique (comme sur Vercel), il n’y a pas de backend pour traiter un formulaire de contact.
Mais grâce à Formspree, tu peux recevoir les messages de tes visiteurs directement par e-mail, sans écrire une seule ligne de backend.

Le hook officiel useForm fourni par Formspree simplifie tout le processus : il gère pour toi l’envoi, les états de chargement, et les erreurs.

Dans cet article, on va :

  • Installer le package officiel @formspree/react
  • Créer un formulaire stylé et réactif
  • Déployer le tout sur Vercel

⚙️ 1. Installation du package Formspree

Installe le package React officiel :

npm install @formspree/react

✉️ 2. Créer ton compte Formspree

Rendez-toi sur formspree.io

Clique sur Start for free

Une fois connecté, crée un nouveau formulaire

Formspree te donnera une URL unique du type :

https://formspree.io/f/mayvpqdr

Conserve l'ID Formspree mayvpqdr: tu en auras besoin juste après.

🧩 3. Créer le formulaire avec useForm

Crée un composant : components/ContactForm.jsx

"use client";

import { useForm, ValidationError } from "@formspree/react";

export default function ContactForm() {
  const [state, handleSubmit] = useForm("mayvpqdr"); // Remplace par ton ID Formspree

  if (state.succeeded) {
    return (
      <p className="text-green-600 text-center font-medium">
        ✅ Message envoyé avec succès !
      </p>
    );
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="mx-auto max-w-md space-y-4 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md"
    >
      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          Adresse e-mail
        </label>
        <input
          id="email"
          type="email"
          name="email"
          required
          className="w-full rounded-md border border-gray-300 p-2 dark:bg-gray-800 dark:border-gray-600"
        />
        <ValidationError prefix="Email" field="email" errors={state.errors} />
      </div>

      <div>
        <label htmlFor="message" className="block font-medium mb-1">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="5"
          required
          className="w-full rounded-md border border-gray-300 p-2 dark:bg-gray-800 dark:border-gray-600"
        />
        <ValidationError prefix="Message" field="message" errors={state.errors} />
      </div>

      <button
        type="submit"
        disabled={state.submitting}
        className="w-full rounded-md bg-primary-600 p-2 text-white hover:bg-primary-700 transition"
      >
        {state.submitting ? "Envoi..." : "Envoyer"}
      </button>
    </form>
  );
}

🧱 4. Créer la page /contact

Crée un fichier app/contact/page.jsx :

import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
  return (
    <section className="py-12 px-6">
      <h1 className="text-3xl font-bold mb-6 text-center">Contact</h1>
      <p className="text-center text-gray-500 mb-8">
        Tu as une question ou une idée de collaboration ? Écris-moi 👇
      </p>
      <ContactForm />
    </section>
  );
}

🏁 Conclusion

Et voilà 🎉 En seulement quelques lignes, tu as un formulaire de contact React complet qui fonctionne sur Vercel, sans backend et avec gestion d’erreurs intégrée grâce au hook useForm.

PARTAGER