Pređi na sadržaj
FFormhook
Svi vodiči

Vodič

Remix kontakt forma (backend nije potreban)

Remix je izgrađen oko serverskih ruta, ali kontakt forma ne mora da bude jedna od njih. Možete da šaljete direktno na Formhook iz pregledača običnim form actionom - ili, ako želite Remixovu priču o progresivnom poboljšanju, koristite useFetcher za upravljanje stanjem slanja.

Koristite običnu HTML formu

API ruta vam nije potrebna. Forma šalje POST direktno na Formhook i vaš framework nikada ne mora da dodirne unos.

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>

Ili pošaljite fetch-om u Remix

Koristite ovu verziju ako želite klijentska stanja uspeha/greške bez ponovnog učitavanja stranice.

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

Kako radi

Snipet sa običnom formom radi kao standardna HTML forma - Remixov <Form> bi usmerio slanje na Remix action, ali usmeravanje action-a na formhook.app/f/YOUR_API_KEY potpuno zaobilazi Remix i šalje podatke direktno na Formhook. useFetcher verzija zadržava Remixovo progresivno poboljšanje uz spoljni POST: pregledač radi XHR slanje, a vi dobijate fetcher.state da pokrećete svoj UI.

Šta se dešava dalje

  • Unos stiže u vašu Formhook kontrolnu tablu u roku od sekunde.
  • Push obaveštenje stiže na svaki uređaj na kom ste ga uključili.
  • Odgovorite direktno iz kontrolne table (Pro i više) - bez Resend/SendGrid integracije u vašoj Remix aplikaciji.

Isporučite svoju Remix kontakt formu danas.

Registrujte se besplatno, napravite formu, nalepite API ključ. Pet minuta.

Počnite besplatno

Besplatni paket: 5 formi · 250 unosa mesečno · Bez kreditne kartice.

Remix kontakt forma - FAQ

Da li moram da pišem Remix action funkciju?
Ne. Usmeravanje actiona forme na formhook.app potpuno zaobilazi Remix rutiranje. Ako biste radije proksirali kroz Remix action radi logovanja ili oblikovanja payloada, možete - ali nije obavezno.
Hoće li useFetcher i dalje raditi ako je action na drugom originu?
Da. useFetcher ispod haube koristi fetch, pa cross-origin zahtevi rade dok god lista dozvoljenih origina vaše Formhook forme uključuje origin vaše Remix aplikacije.
Da li ovo radi sa Remixovim `unstable_singleFetch` ili React Routerom 7?
Da - slanje forme ide direktno na Formhook, pa na njega ne utiču Remixove promene u učitavanju podataka ili rutiranju.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.