Zum Inhalt springen
FFormhook
Alle Anleitungen

Anleitung

Remix-Kontaktformular (kein Backend nötig)

Remix ist um Server-Routen herum gebaut, aber ein Kontaktformular muss keine sein. Sie können direkt aus dem Browser an Formhook senden - entweder mit einem einfachen form-action oder, wenn Sie Remixs Progressive-Enhancement-Story wollen, mit useFetcher zur Verwaltung des Submission-Zustands.

Verwenden Sie ein einfaches HTML-Formular

Sie benötigen keine API-Route. Das Formular sendet direkt an Formhook, und Ihr Framework muss die Einsendung nie selbst verarbeiten.

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>

Oder mit fetch in Remix senden

Verwenden Sie diese Variante, wenn Sie client-seitige Erfolgs-/Fehlerzustände ohne vollständigen Seiten-Reload möchten.

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>
  );
}

So funktioniert es

Das einfache Formular-Snippet funktioniert als Standard-HTML-Formular - Remixs <Form> würde die Einsendung an eine Remix-Action routen, aber das action auf formhook.app/f/YOUR_API_KEY zu setzen, umgeht Remix vollständig und sendet die Daten direkt an Formhook. Die useFetcher-Version behält Remixs Progressive Enhancement bei, sendet aber dennoch extern: Der Browser macht eine XHR-Einsendung, und Sie bekommen fetcher.state, um Ihre UI zu steuern.

Was als Nächstes passiert

  • Einsendung landet innerhalb einer Sekunde in Ihrem Formhook-Dashboard.
  • Push-Benachrichtigung wird auf allen aktivierten Geräten ausgelöst.
  • Antworten Sie direkt aus dem Dashboard (Pro und höher) - keine Resend/SendGrid-Integration in Ihrer Remix-App erforderlich.

Veröffentlichen Sie heute Ihr Remix-Kontaktformular.

Kostenlos registrieren, Formular erstellen, API-Schlüssel einfügen. Fünf Minuten.

Kostenlos starten

Kostenlose Stufe: 5 Formulare · 250 Einsendungen/Monat · Keine Kreditkarte.

Remix-Kontaktformular - FAQ

Muss ich eine Remix-Action-Funktion schreiben?
Nein. Das Setzen des form-action auf formhook.app umgeht Remix-Routing vollständig. Wenn Sie lieber durch eine Remix-Action für Logging oder Payload-Shaping proxyen, können Sie das - aber es ist nicht erforderlich.
Funktioniert useFetcher noch, wenn die Action auf einer anderen Origin liegt?
Ja. useFetcher verwendet unter der Haube fetch, also funktionieren cross-origin-Requests, solange die Allowed-Origins-Liste Ihres Formhook-Formulars die Origin Ihrer Remix-App enthält.
Funktioniert das mit Remix' `unstable_singleFetch` oder React Router 7?
Ja - die Formular-Einsendung geht direkt an Formhook, also ist sie von Remixs Daten-Lade- oder Routing-Änderungen unberührt.

Anleitungen für andere Frameworks

Migrating from Formspree? See how Formhook compares.