Vodič

Next.js kontakt forma (backend nije potreban)

Next.js-u ne treba sopstveni prijemnik formi. Možete da ubacite istu običnu HTML form action u bilo koju Server komponentu, ili - ako želite klijentska stanja uspeha i greške - da koristite malu Client komponentu sa fetch-om. Obe šalju POST direktno na Formhook.

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 Next.js

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

components/contact-form.tsx

"use client";

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

Običan form action radi u svakoj Next.js stranici ili layoutu, uključujući Server komponente. Bez app/api/contact/route.ts, bez Server Actiona, bez middlewarea. Ako želite klijentski UX sa stanjima uspeha i greške, drugi snipet pokazuje kanonski obrazac: "use client", useState, onSubmit, fetch ka formhook.app/f/YOUR_API_KEY. Honeypot (_gotcha) i opcioni _redirect ista su specijalna polja iz HTML vodiča.

Običan formular ili fetch: šta izabrati?

Izaberite običan formular sa action kada želite nula JavaScript-a: radi u Server Component-u i nastavlja da radi čak i ako hidratacija ne uspe. Cena je to što pregledač napušta vašu stranicu pri slanju, pa dodajte skriveno polje _redirect sa apsolutnim URL-om na jednom od vaših dozvoljenih origina, na primer https://example.com/thanks. Bez njega posetioci dobijaju sirov JSON odgovor.

Izaberite fetch verziju kada želite da se poruka o uspehu ili grešci prikaže na licu mesta, uz onemogućeno dugme tokom slanja. Obična slanja formulara mogu da preusmere; JSON fetch slanja dobijaju JSON odgovor, pa se _redirect tu ignoriše. Šire objašnjenje je u tekstu AJAX slanje forme.

Kako ispraviti 403 origin_not_allowed u lokalnom razvoju

Formhook prihvata slanja iz pregledača samo sa origina navedenih u Dozvoljenim originima vaše forme, a poklapanje je tačno: šema, host i port. http://localhost:3000, https://example.com i https://www.example.com su tri različita origina. Dodajte svoj razvojni URL, produkcioni domen i svaki preview domen na kom testirate, bez putanje i bez kose crte na kraju. Prazna lista odbija svaki zahtev iz pregledača.

Ako slanje i dalje ne uspeva, telo odgovora kaže zašto: origin_not_allowed (403) znači da origin nedostaje na listi, form_not_found (404) da je API ključ pogrešan, a rate_limited (429) da treba sačekati sekunde navedene u Retry-After. Više u tekstu Kontakt forma ne radi?

Gde držati API ključ

Ključ u svakom slučaju završava u vašem HTML-u ili JavaScript paketu, pa ga tretirajte kao javni identifikator, a ne kao tajnu. Promenljiva okruženja NEXT_PUBLIC_FORMHOOK_KEY je ipak zgodna da u razvoju koristite jednu formu, a u produkciji drugu.

Formu štiti ono što je na Formhookovoj strani: lista dozvoljenih origina, _gotcha honeypot, ograničenja učestalosti po IP adresi i po formi, i opcioni Cloudflare Turnstile. Lista origina sprečava druge sajtove da šalju iz pregledača, ali nije autentifikacija, jer skripta može da pošalje bilo koji Origin zaglavlje. Za botove se oslonite na slojeve zaštite od spama; zaštita kontakt formi od spama ih poredi.

Slanje iz Server Action umesto iz pregledača

Ako želite da dodate podatke na serveru ili da proverite pre slanja, pozovite Formhook iz Server Action-a ili route handlera. Serverski zahtevi ne šalju Origin zaglavlje, pa moraju da nose X-Auth-Token zaglavlje koje generišete u podešavanjima forme. Držite taj token u promenljivoj okruženja samo za server, nikada u Client Component-u. Većini kontakt formi ovo nije potrebno, zato gornji snipeti to preskaču. Ceo format zahteva je u dokumentaciji.

Pre nego što krenete uživo

Dodajte produkcioni origin, sa https://, u dozvoljene origine.
Zadržite _gotcha honeypot polje i odlučite da li ćete uključiti Turnstile.
Pošaljite probni unos i proverite da se pojavljuje u dashboardu i kao push obaveštenje.
Dodajte kratko obaveštenje o privatnosti ispod forme. Vodič za GDPR kontakt formu ima formulacije koje možete da prilagodite.

Šta se dešava dalje

Unos se pojavljuje u vašoj Formhook kontrolnoj tabli 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) - zgodno za rad sa klijentima gde svaki projekat ima svoju kontakt rutu.

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

Next.js kontakt forma - FAQ

Da li moram da dodam API rutu ili Server Action?

Ne. Forma šalje POST direktno na Formhook. Preskakanje API rute znači i jednu površinu manje koju sami morate rate-limitovati, i jedan cold start manje na serverless deployima.

Mogu li ovo da koristim u Server komponenti?

Da - snipet sa običnom HTML formom radi u svakoj Server komponenti. Samo fetch verzija mora biti Client komponenta, jer koristi useState.

Kako da rešim spam bez pisanja rate-limit middlewarea?

Zaštita od spama je na Formhookovoj strani. Honeypot tiho odbacuje botove, a Cloudflare Turnstile je prekidač po formi u kontrolnoj tabli. Limiti po IP adresi i po formi takođe se sprovode na serveru.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.