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.
<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
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 startenKostenlose 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.