Da li mi za ovo treba Gatsby Function ili Netlify funkcija?

Ne. Forma šalje POST direktno na Formhook. Vaš Gatsby sajt može da ostane čist statički build - bez adaptera za serverless funkcije.

Mogu li ovo da koristim lokalno sa `gatsby develop`?

Da. Pregledač šalje POST bez obzira na to kako je Gatsby servirao HTML. Samo proverite da je http://localhost:8000 na listi dozvoljenih origina forme dok razvijate.

Kako da rešim spam bez dodavanja Gatsby plagina?

Ne morate. Honeypot polje tiho odbacuje botove, a Cloudflare Turnstile je prekidač po formi u Formhook kontrolnoj tabli.

← Svi vodiči

Vodič

Gatsby kontakt forma (backend nije potreban)

Gatsby builduje statički HTML, pa je Gatsby kontakt forma samo čist HTML u runtimeu. Ubacite form action, ili koristite malu React komponentu sa fetch-om ako želite inline stanja uspeha i greške.

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 Gatsby

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

src/components/contact-form.tsx

// src/components/contact-form.tsx
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");

    const form = e.currentTarget;
    const data = Object.fromEntries(new FormData(form));

    const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? "ok" : "error");
    if (res.ok) form.reset();
  }

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

  return (
    <form onSubmit={onSubmit}>
      <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>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Kako radi

Snipet sa običnom formom može u svaku Gatsby stranicu ili komponentu - čist je HTML, bez Gatsbyjevog data sloja. React komponenta sa fetch-om obrađuje slanje na klijentu i šalje na formhook.app/f/YOUR_API_KEY. Bez gatsby-source-formhook plagina za instalaciju, bez serverless funkcije za deploy.

Š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) - drži vaš pravi imejl van statičkog HTML-a vašeg Gatsby sajta.

Isporučite svoju Gatsby 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.

Gatsby kontakt forma - FAQ

Da li mi za ovo treba Gatsby Function ili Netlify funkcija?: Ne. Forma šalje POST direktno na Formhook. Vaš Gatsby sajt može da ostane čist statički build - bez adaptera za serverless funkcije.
Mogu li ovo da koristim lokalno sa `gatsby develop`?: Da. Pregledač šalje POST bez obzira na to kako je Gatsby servirao HTML. Samo proverite da je http://localhost:8000 na listi dozvoljenih origina forme dok razvijate.
Kako da rešim spam bez dodavanja Gatsby plagina?: Ne morate. Honeypot polje tiho odbacuje botove, a Cloudflare Turnstile je prekidač po formi u Formhook kontrolnoj tabli.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.