Exemples et technologies

React

Installer un formulaire Formeo avec React.

Principe de l’installation

Le composant ci-dessous conserve les champs HTML accessibles et gère l’état de la tentative avec React, sans bibliothèque supplémentaire.

Avant de copier le code

Placez le composant dans votre projet et remplacez la clé publique du formulaire.
Faites correspondre les champs name, email et message avec votre configuration publiée.
Prévoyez une zone de retour annoncée et désactivez le bouton uniquement pendant la tentative.

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.

React / JSX

// Composant React côté navigateur
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 →