Guide

Formulaire de contact Remix (sans backend)

Remix est construit autour des routes serveur, mais un formulaire de contact n'a pas besoin d'en être une. Vous pouvez poster directement vers Formhook depuis le navigateur en utilisant un form action simple - ou, si vous voulez l'amélioration progressive de Remix, utilisez useFetcher pour gérer l'état de la soumission.

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 Remix

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

app/routes/contact.tsx

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

Le snippet de formulaire simple fonctionne comme un formulaire HTML standard - le <Form> de Remix routerait la soumission vers une action Remix, mais pointer l'action vers formhook.app/f/YOUR_API_KEY contourne Remix entièrement et envoie les données directement à Formhook. La version useFetcher conserve l'amélioration progressive de Remix tout en POSTant en externe : le navigateur fait une soumission XHR, et vous obtenez fetcher.state pour piloter votre UI.

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.

Lancez votre formulaire de contact Remix 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 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.

Guides pour les autres frameworks

Migrating from Formspree? See how Formhook compares.