Exemples et technologies

Next.js

Installer un formulaire Formeo avec Next.js.

Principe de l’installation

Dans l’App Router, le formulaire interactif est un composant client. Aucun secret de gestion n’est nécessaire pour envoyer des champs au point de réception public.

Avant de copier le code

Placez le composant dans un fichier dédié avec la directive use client.
Utilisez l’URL publique de votre service Formeo et sa clé de formulaire, pas un secret serveur.
Testez après publication sur votre hébergement et vérifiez les origines autorisées.

Exemple à adapter

Cet exemple correspond au modèle de contact avec name, email et message. Une autre structure de champs nécessite un schéma publié correspondant. YOUR_ACCESS_KEY est une clé d’exemple à remplacer.

Next.js / JSX

'use client';
import { useState, useRef } from 'react';
export default function Contact() {
  const [etat, setEtat] = useState('');
  const [busy, setBusy] = useState(false);
  const tentative = useRef({ contenu: '', id: '' });
  async function envoyer(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;
    const data = new FormData(form);
    const fields = { name: data.get('name'), email: data.get('email'), message: data.get('message') };
    const contenu = JSON.stringify(fields);
    if (contenu !== tentative.current.contenu) tentative.current = { contenu, id: crypto.randomUUID() };
    setBusy(true); setEtat("Envoi en cours…");
    try {
      const response = await fetch("https://formeo.me/api/submit", {
        method: 'POST', headers: { 'Content-Type': 'application/json', 'Idempotency-Key': tentative.current.id },
        body: JSON.stringify({ form_key: "YOUR_ACCESS_KEY", fields })
      });
      const result = await response.json();
      if (!response.ok) throw new Error(response.status === 429 ? "Limite atteinte. Réessayez plus tard." : "Envoi impossible. Vérifiez les champs et réessayez.");
      setEtat("Votre message a été enregistré. La livraison e-mail est suivie séparément.");
    } catch (error) { setEtat(error instanceof Error ? error.message : "Envoi impossible."); }
    finally { setBusy(false); }
  }
  return <form onSubmit={envoyer}>
    <label>Votre nom<input name='name' autoComplete='name' required /></label>
    <label>Votre e-mail<input name='email' type='email' autoComplete='email' required /></label>
    <label>Votre message<textarea name='message' required maxLength={5000} /></label>
    <button disabled={busy}>Envoyer le message</button>
    <p role='status' aria-live='polite'>{etat}</p>
  </form>;
}

Vérifier le résultat

Testez aussi l’adresse invalide, le champ obligatoire vide et une reprise après un problème réseau. Le message de confirmation doit décrire l’enregistrement sans garantir la livraison e-mail. Vérifiez ensuite l’historique dans votre espace.

Documentation relue le 14 octobre 2026Signaler un point à améliorer →