Formulaire de contact Remix (sans backend)

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 Remix

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

// app/routes/contact.tsx
import { useFetcher } from "@remix-run/react";

export default function Contact() {
  const fetcher = useFetcher();
  const status = fetcher.state === "submitting" ? "sending" : fetcher.data?.ok ? "ok" : "idle";

  if (status === "ok") return <p>Thanks - we'll be in touch.</p>;

  return (
    <fetcher.Form
      method="post"
      action="https://formhook.app/f/YOUR_API_KEY"
      encType="application/x-www-form-urlencoded"
    >
      <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>
    </fetcher.Form>
  );
}

Comment ça marche

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 d'intégration Resend/SendGrid requise dans votre app Remix.

Formulaire de contact Remix - FAQ

Dois-je écrire une fonction action Remix ?

Non. Pointer le form action vers formhook.app contourne le routing Remix entièrement. Si vous préférez proxy via une action Remix pour le logging ou la mise en forme du payload, vous pouvez - mais ce n'est pas requis.

useFetcher fonctionnera-t-il encore si l'action est sur une origine différente ?

Oui. useFetcher utilise fetch sous le capot, donc les requêtes cross-origin fonctionnent tant que la liste des origines autorisées de votre formulaire Formhook inclut l'origine de votre app Remix.

Est-ce que cela fonctionne avec `unstable_singleFetch` de Remix ou React Router 7 ?

Oui - la soumission du formulaire va directement vers Formhook, donc elle n'est pas affectée par les changements de chargement de données ou de routing de Remix.