Kako dodati kontakt obrazac na web stranicu (koji zaista dopire do vas)

Da biste dodali kontakt obrazac koji radi, napravite kratak obrazac (ime, e-mail, poruka) koji šalje podatke na serversku rutu koja provjerava unos, čuva poruku u bazi podataka i zatim vam šalje obavještenje preko provajdera e-maila koristeći tajni API ključ. Dodajte skriveno polje za zamku (honeypot) i ograničenje učestalosti da zaustavite većinu spama, prikažite jasnu poruku o uspjehu i testirajte cijeli tok na objavljenoj stranici. Čuvanje prije slanja e-maila je važan dio: ako e-mail ikad zakaže, upit ste i dalje sačuvali.

Vaše mogućnosti

Ako vaša stranica već ima pozadinski dio i bazu podataka, što aplikacije napravljene AI graditeljima često imaju, posljednja opcija je najpouzdanija i čuva upite na mjestu gdje ih možete vidjeti.

Šta dobar kontakt obrazac uključuje

• Što manje polja. Ime, e-mail, poruka. Dodajte padajući meni za temu („Prodaja”, „Podrška”, „Ostalo”) samo ako ćete po njoj usmjeravati.
• Jasne oznake iznad svakog polja, a ne samo tekst u polju koji nestane.
• Korisnu validaciju: „Unesite ispravnu e-mail adresu”, prikazanu pored polja.
• Stanje uspjeha koje kaže šta slijedi: „Hvala. Odgovaramo u roku od jednog radnog dana.”
• Napomenu o privatnosti koja kaže kako ćete koristiti podatke, s linkom na vašu politiku privatnosti.
• Rezervu poput vaše e-mail adrese ili broja telefona za ljude koji to više vole.

Primjeri upita

Osnovni obrazac:

Dodaj kontakt obrazac na stranicu Kontakt s poljima za ime, e-mail i poruku (sva obavezna, poruka do 2.000 znakova). Pošalji ga na serversku rutu koja provjerava unos, čuva ga u tabeli contact_messages s vremenom prijema, i prikaže poruku uspjeha: „Hvala, odgovorićemo u roku od jednog radnog dana.” Prikaži greške polja u redu. Neka dobro radi na telefonima.

Obavještenja e-mailom:

Kad se poruka kontakta sačuva, pošalji mi obavještenje na e-mail hello@example.com preko Resenda, s ključem u RESEND_API_KEY. Postavi reply-to na e-mail pošiljaoca da mu mogu direktno odgovoriti. Ako slanje ne uspije, zadrži sačuvanu poruku i zapiši grešku bez izlaganja ključa.

Zaštita od spama:

Dodaj zaštitu od spama u kontakt obrazac: skriveno polje za zamku koje mora ostati prazno, ograničenje od 5 slanja po IP adresi na sat na serveru, i odbaci poruke s više od 3 linka. Tiho odbaci poruke s popunjenom zamkom, ali i dalje prikaži uspjeh.

Sandučić:

Dodaj stranicu za administratora zaštićenu lozinkom koja prikazuje poruke kontakta od najnovije ka najstarijoj, s poljem „obrađeno” i filterom za neobrađene poruke.

Korak po korak

1. Odlučite kuda idu poruke: ko prima obavještenja i ko odgovara.
2. Napravite obrazac s poljima iznad, oznakama dostupnim za čitanje i ulaznim poljima prilagođenim telefonu (koristite tip ulaza e-mail da telefoni prikažu ispravnu tastaturu).
3. Napravite serversku rutu. Ona provjerava obavezna polja, format e-maila i ograničenja dužine. Nikad ne vjerujte samo validaciji u pregledaču.
4. Prvo sačuvajte u bazi podataka. Pogledajte kako dodati bazu podataka u aplikaciju.
5. Postavite provajdera e-maila. Napravite nalog, provjerite domenu za slanje i sačuvajte API ključ kao tajnu. Kako slati e-mailove iz aplikacije detaljno pokriva postavljanje domene (SPF, DKIM).
6. Pošaljite obavještenje s servera nakon čuvanja. Koristite svoju provjerenu domenu kao pošiljaoca i e-mail posjetioca kao reply-to; nemojte slati „od” e-mail adrese posjetioca, jer će vjerovatno biti odbijeno kao falsifikovanje.
7. Opcionalno pošaljite automatski odgovor posjetiocu, ali neka bude kratak; automatski odgovori na spam adrese mogu naštetiti vašoj reputaciji pošiljaoca.
8. Dodajte zaštitu od spama: honeypot, ograničenje učestalosti, pa provjeru tipa CAPTCHA ako zatreba.
9. Testirajte na objavljenoj stranici: pošaljite, provjerite bazu podataka, provjerite inbox i folder za spam, kliknite odgovori.

Zaustavljanje spama

Kontakt obrasci privlače botove u roku od nekoliko dana nakon lansiranja. Slojevite odbrane od najmanje do najnametljivije:

1. Skriveno polje za zamku. Polje sakriveno od ljudi; botovi ga popune. Ne košta prave posjetioce ništa.
2. Ograničenje učestalosti na serveru. Ograničava koliko poruka jedna adresa može poslati u periodu.
3. Pravila sadržaja. Odbijte poruke krcate linkovima ili s praznim ili predugačkim poljem poruke.
4. Provjera tipa CAPTCHA, poput Cloudflare Turnstilea ili Google reCAPTCHA. Token se mora provjeriti na vašem serveru; provjera koja radi samo u pregledaču može se preskočiti.

Česte greške

• Prikazivanje „Poslato!” kad ništa nije poslato. Interfejs kaže uspjeh prije ili bez obzira na odgovor servera. Uvijek sačekajte odgovor servera.
• Samo e-mail, bez baze podataka. Jedan pogrešno podešen ključ i upiti nestanu nedeljama, a niko to ne primijeti.
• API ključ u kodu front-enda. Svako ga može koristiti da šalje e-mail u vaše ime.
• Neprovjerena domena za slanje. Obavještenja završe u spamu ili nikad ne stignu.
• Slanje „od” e-mail adrese posjetioca. Koristite reply-to.
• Bez ograničenja dužine. Botovi lijepe ogromne blokove teksta.
• Nikad ne testirate živu stranicu. Ključevi i domene se često razlikuju između pregleda i produkcije.

Kontrolna lista

• Kratak obrazac s vidljivim oznakama i jasnim greškama
• Validacija na serveru i ograničenja dužine
• Svaka poruka sačuvana u bazi podataka
• Obavještenje e-mailom poslato s provjerene domene, s postavljenim reply-to
• API ključ e-maila sačuvan samo kao tajna na serveru
• Honeypot i ograničenje učestalosti na mjestu
• Poruka o uspjehu se prikazuje tek kad server potvrdi
• Napomena o privatnosti povezuje na vašu politiku privatnosti
• Testirano od kraja do kraja na objavljenoj stranici, uključujući folder za spam

Kontakt obrasci u Mythexu

U Mythexu cijelu stvar možete napraviti iz chata. Zatražite obrazac i bazu podataka u istom upitu (ili ukucajte /database) da bi poruke ostajale sačuvane. Mythex nema ugrađen proizvod za slanje e-maila, pa za obavještenja donosite provajdera poput Resenda, SendGrida ili Postmarka, dodajte njegov ključ pomoću /secrets ili podešavanja projekta, i zatražite od agenta da šalje s servera; pogledajte Slanje e-maila iz aplikacije. Prije nego što se oslonite na to, pokrenite App Testing (/test) nad obrascem u Preview-u, pa objavite i testirajte na živom URL-u.

Kontakt obrazac je ključni dio većine malih poslovnih web stranica i landing stranica. Prije lansiranja provjerite kontrolnu listu za sigurnost.

Pitanja