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

Blog

Kako dodati kontakt formu na GitHub Pages

· 3 min čitanja

GitHub Pages služi samo statičke fajlove - bez PHP-a, bez serverskog koda, bez ikakvog načina da primi POST forme. Zato je kontakt formi potreban spoljni endpoint kome će slati podatke. Evo tri realne opcije, i one verzije koja traje minut.

Opcija 1: form backend (preporučeno)

Usmerite action vaše forme na hostovani endpoint za forme:

<form action="https://formhook.app/f/fh_your-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

Uradite commit, pa push - gotovo. Unosi stižu u kontrolnu tablu i javljaju se na telefon push obaveštenjem. Spam se filtrira honeypot poljem i ograničenjima broja zahteva pre nego što uopšte stigne do vas. Ovo radi identično i za obične HTML repozitorijume i za Jekyll sajtove (nativni generator GitHub Pages-a - pogledajte Jekyll vodič za tematski include, ili vodič za običan HTML).

Prednosti: samo jedan atribut, JavaScript nije potreban, spam je pod kontrolom, unosi se čuvaju.
Mane: ovo je usluga treće strane - proverite ograničenja besplatnog paketa i politiku čuvanja podataka za onu koju izaberete. Besplatni paket Formhooka čuva unose zauvek.

Opcija 2: mailto: link

<a href="mailto:you@example.com">Email me</a>

Iskreno, ali slabo rešenje: zavisi od toga da li posetilac ima podešen mejl klijent (na desktopu to sve ređe važi), izlaže vašu adresu skrejperima, ne pruža nikakvu zaštitu od spama i ne govori vam ništa o tome koliko ljudi odustane pre slanja. Sasvim u redu za hobi README stranicu; skupo za sve gde upiti znače novac. (Više o tom kompromisu u mailto naspram kontakt forme.)

Opcija 3: serverless funkcija negde drugde

Sajt možete zadržati na GitHub Pages i primati POST preko Cloudflare Worker-a ili sličnog rešenja. To radi - ali sada sami pišete i održavate prijemnik: validaciju, filtriranje spama, skladištenje, slanje imejlova i CORS. Time ste ponovo uveli tačno onaj backend koji vam je GitHub Pages omogućavao da izbegnete. Razumno ako vam to prija; nepotrebno ako ne.

AJAX nadogradnja (opciono)

Obična HTML forma pri slanju napušta stranicu. Da biste ostali na stranici:

<script>
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(e.target.action, {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  e.target.outerHTML = res.ok
    ? "<p>Thanks - message sent.</p>"
    : "<p>Something went wrong. Please email us directly.</p>";
});
</script>

Nema build koraka, nema zavisnosti - radi u običnom GitHub Pages repozitorijumu.

Napomena o prilagođenom domenu

Ako vaš Pages sajt radi na prilagođenom domenu, proverite da li podešavanja vaše form usluge po formi (poput CORS liste dozvoljenih domena) uključuju taj domen, a ne samo username.github.io. U Formhooku je to samo jedno polje u podešavanjima forme.

To je cela priča: GitHub Pages se brine o vašem sajtu, a form endpoint se brine o jedinoj stvari koju on ne može. Počnite besplatno i forma će biti aktivna pre nego što se završi vaš sledeći git push.

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