Pređi na sadržaj
FFormhook
← Nazad na blog

Blog

Kako dodati kontakt formu na Cloudflare Pages

· 3 min čitanja

Cloudflare Pages je brz i velikodušan static hosting - pošaljete repozitorijum, dobijete globalni deploy, gotovo. Ono što nema jeste nešto poput Netlify Forms: nikakva ugrađena usluga koja skenira vaš HTML u potrazi za <form> tagom i počinje da prikuplja unose. Deployujte običnu HTML kontakt formu takvu kakva jeste na Cloudflare Pages, i POST zahtev nema kuda da ode. Evo zašto, i dva načina da to rešite.

Zašto Cloudflare Pages nema nativni proizvod za forme

Cloudflare Pages je hosting za statičke fajlove sa opcionim slojem Functions dodatim za dinamičke rute - to nije platforma za obradu formi. Netlify-jeva funkcija za forme radi tako što analizira vaš build izlaz u trenutku deploya i dodeljuje skriveni backend svakoj pronađenoj formi; Cloudflare Pages ne radi takvu analizu. Vaši build artefakti su samo fajlovi na CDN-u. Ako formi treba mesto kome će slati podatke, to mesto morate sami napraviti ili pozajmiti. To verovatno nije praznina koju će Cloudflare popuniti - Pages je namerno ograničen na statičke resurse plus tanak serverless sloj, a ne na pipeline za parsiranje formi.

Opcija 1: napišite sopstvenu Pages Function

Cloudflare Pages podržava Functions - male handlere u stilu Workers-a koji se nalaze u direktorijumu /functions i izvršavaju se na Cloudflare-ovom edge-u. Mogli biste dodati functions/api/contact.ts koji čita telo POST zahteva, validira ga, filtrira spam, šalje imejl (preko API-ja nekog provajdera, pošto Workers ne može da uspostavlja sirove SMTP konekcije), i možda upisuje u KV ili D1 radi skladištenja. To radi, i sve ostaje unutar jednog Cloudflare projekta. Ali sada vi održavate validaciju, filtriranje spama, skladištenje i slanje imejlova - tačno onaj backend koji je static hosting trebalo da vas poštedi da pišete.

Opcija 2: usmerite formu na hostovan backend (preporučeno)

Brži put je da POST zahtev pošaljete usluzi napravljenoj tačno za ovo. Zadržite svoj markup, dodajte jedan atribut:

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

To je cela integracija. Nema Function-a, nema Worker-a, nema email API ključeva o kojima treba brinuti. Unosi se pojavljuju u dashboard-u i mogu da pokrenu web push obaveštenje - uključujući na iOS-u, čim se sajt doda na početni ekran. Zaštita od spama je podrazumevano uključena: honeypot polje i ograničavanje broja zahteva zaustavljaju većinu spama pre nego što stigne do vas, a za nešto ozbiljnije napade možete dodati i Cloudflare Turnstile - Cloudflare-ov sopstveni CAPTCHA koji čuva privatnost, sasvim prikladan par za formu koja živi na Cloudflare Pages sajtu. Unosi i otpremljeni fajlovi se čuvaju na infrastrukturi u EU. Ništa od ovoga ne zavisi od toga kako je napravljen ostatak sajta: Astro, obični HTML, Next.js static export, Hugo - šta god da generiše markup, tag forme ostaje isti, a deploy se ne menja.

Kako doći do svog endpoint-a

  1. Registrujte se i napravite formu u dashboard-u - kartica nije potrebna.
  2. Kopirajte jedinstveni URL forme (izgleda kao https://formhook.app/f/fh_xxxxxxxx).
  3. Nalepite ga u action atribut vaše postojeće <form>.
  4. Uradite commit i deploy kao i inače.

Besplatni paket pokriva 250 unosa mesečno, što je više nego dovoljno za većinu kontakt formi. Pogledajte stranicu sa cenama da vidite šta nudi Pro paket ako vam kasnije zatrebaju otpremanje fajlova ili verifikovan domen za slanje.

Funkcionalna forma u jednoj liniji

Hostovano u EU, unosi se čuvaju zauvek, push obaveštenja na svakom paketu.

Počnite besplatno

Bez kreditne kartice · pročitajte dokumentaciju

Nastavite čitanje