Vodič

Astro kontakt forma (backend nije potreban)

Astro podrazumevano renderuje u statički HTML, što znači da je Astro kontakt forma samo obična HTML forma sa pravim action atributom. Ne treba vam serverski endpoint ni Astro integracija - nalepite snipet u .astro stranicu i gotovi ste.

Snipet

contact.Astro

---
// src/pages/contact.astro
---

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

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

Kako radi

Pošto Astro podrazumevano isporučuje statički HTML, nema ničega klijentskog za povezivanje. action forme šalje POST direktno na formhook.app/f/YOUR_API_KEY, gde YOUR_API_KEY dolazi iz podešavanja vaše forme u Formhook kontrolnoj tabli. Polje _gotcha je honeypot - botovi ga popune, ljudi ga ne vide, i sve sa sadržajem u njemu tiho se odbacuje. Polje _redirect šalje korisnike na stranicu zahvalnice posle uspešnog POST-a, a URL se proverava prema vašoj listi dozvoljenih origina.

Prikaz stranice zahvalnosti posle slanja

Statična Astro forma pri slanju napušta stranicu, pa napravite stranicu poput src/pages/thanks.astro i usmerite skriveno polje _redirect na nju. Koristite pun URL, na primer https://example.com/thanks. Vrednost mora biti apsolutni URL čiji je origin na listi dozvoljenih origina forme; u suprotnom ga Formhook ignoriše i posetilac vidi JSON odgovor. Ako ste postavili site u astro.config.mjs, vrednost možete napraviti sa new URL("/thanks", Astro.site).

Prikaz rezultata bez napuštanja stranice

Da posetilac ostane na stranici, dodajte komponenti mali <script> koji presreće submit događaj, šalje polja preko fetch kao JSON i upisuje poruku u element statusa. Astro tu skriptu šalje pregledaču onakvu kakva jeste, pa nije potreban ni framework ni island. Obrazac je prikazan u Next.js vodiču, a uz pristupačne poruke statusa objašnjen u tekstu AJAX slanje forme. JSON slanja ne koriste _redirect.

Dozvoljeni origini za razvoj, preview i produkciju

Dodajte svaki origin sa kog se forma servira u Dozvoljene origine, sa tačnom šemom, hostom i portom: http://localhost:4321 za astro dev, produkcioni domen sa https:// i preview domen vašeg hosta ako tamo testirate. Ako slanje ne uspe sa origin_not_allowed, prvo proverite tu listu.

Isto podešavanje radi na Cloudflare Pages, GitHub Pages, Netlify i Vercelu, jer pregledač šalje direktno Formhooku i vaš host nikad ne vidi slanje.

Korišćenje iz Astro endpointa

Statičnim stranicama ne treba ništa drugo. Ako vaš sajt radi u serverskom ili hibridnom režimu i želite da šaljete iz endpointa ili Astro action-a, pozovite Formhook iz serverskog koda sa X-Auth-Token zaglavljem, koje generišete u podešavanjima forme i držite u promenljivoj okruženja samo za server. Serverski zahtevi nemaju Origin zaglavlje i bez tog tokena se odbijaju. Detalji su u dokumentaciji.

Spam i privatnost

Zadržite skriveno polje _gotcha: botovi ga popunjavaju i takva slanja se tiho odbacuju. Ograničenja učestalosti važe po IP adresi i po formi, a Cloudflare Turnstile je prekidač po formi u dashboardu; ovaj vodič poredi opcije. Za posetioce iz EU dodajte kratko obaveštenje 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) bez otkrivanja svoje prave imejl adrese.

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

Astro kontakt forma - FAQ

Da li mi treba Astro integracija ili serverski adapter?

Ne. Forma šalje POST direktno na Formhook, pa radi sa podrazumevanim statičkim Astro buildom. Bez SSR moda, bez @astrojs/node adaptera.

Mogu li da imam više kontakt formi na različitim Astro stranicama?

Da. Napravite jednu Formhook formu po nameni - kontakt, posao, bilten - i nalepite action svake forme u odgovarajuću .astro stranicu. Besplatni paket pokriva pet formi.

Kako da prikažem stranicu zahvalnice posle slanja?

Dodajte skriveni _redirect input koji pokazuje na vašu Astro rutu zahvalnice. URL mora biti na listi dozvoljenih origina forme. Ili, ako biste radije prikazali uspeh bez ponovnog učitavanja stranice, koristite fetch obrazac iz Next.js ili SvelteKit vodiča.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.