Kako dodati kontakt obrazac na vaš sajt (koji zaista dopire do vas)

Da biste dodali kontakt obrazac koji radi, napravite kratak obrazac (ime, mejl, poruka) i pošaljite ga na serversku rutu koja proverava unos, čuva poruku u bazi podataka, a zatim vam šalje obaveštenje mejlom preko provajdera za mejl koristeći tajni API ključ. Dodajte skriveno polje „honeypot“ i ograničenje učestalosti da zaustavite većinu spama, prikažite jasnu poruku o uspehu i testirajte sve od početka do kraja na objavljenom sajtu. Važno je da se čuvanje radi pre slanja mejla: ako mejl ikada ne uspe, upit i dalje imate.

Vaše opcije

Ako vaš sajt već ima pozadinski deo i bazu podataka — što aplikacije napravljene uz AI graditelje aplikacija često imaju — poslednja opcija je najpouzdanija i čuva upite tamo gde ih možete videti.

Šta dobar kontakt obrazac sadrži

• Što manje polja. Ime, mejl, poruka. Dodajte padajući meni za temu („Prodaja“, „Podrška“, „Ostalo“) samo ako po njoj usmeravate poruke.
• Jasne oznake iznad svakog polja, a ne samo tekst u polju koji nestane.
• Korisnu proveru unosa: „Unesite ispravnu adresu mejla“, prikazano pored polja.
• Stanje uspeha koje kaže šta se dalje dešava: „Hvala — odgovaramo u roku od jednog radnog dana.“
• Napomenu o privatnosti koja kaže kako ćete koristiti podatke, sa linkom na vašu politiku privatnosti.
• Rezervu, kao što su vaša adresa mejla ili broj telefona, za ljude koji tako više vole.

Primeri upita

Osnovni obrazac:

Dodaj kontakt obrazac na stranicu Kontakt sa imenom, mejlom i porukom (sva polja obavezna, poruka do 2.000 znakova). Pošalji ga na serversku rutu koja proverava unos, čuva ga u tabeli contact_messages sa vremenom prijema i prikazuje poruku o uspehu: „Hvala, odgovorićemo u roku od jednog radnog dana.“ Prikaži greške polja direktno pored njih. Neka dobro radi na telefonima.

Obaveštenja mejlom:

Kada se poruka iz kontakta sačuva, pošalji mi obaveštenje mejlom na hello@example.com preko Resend-a, sa ključem u RESEND_API_KEY. Postavi reply-to na mejl pošiljaoca da mu mogu direktno odgovoriti. Ako slanje ne uspe, zadrži sačuvanu poruku i zabeleži grešku bez otkrivanja ključa.

Zaštita od spama:

Dodaj zaštitu od spama u kontakt obrazac: skriveno polje honeypot koje mora ostati prazno, ograničenje od 5 slanja po IP adresi na sat na serveru, i odbij poruke sa više od 3 linka. Honeypot slanja tiho odbaci, ali i dalje prikaži poruku o uspehu.

Sanduče:

Dodaj administratorsku stranicu zaštićenu lozinkom sa listom kontakt poruka, najnovije prvo, sa poljem „obrađeno“ za potvrdu i filterom za neobrađene poruke.

Korak po korak

1. Odlučite gde poruke idu: ko prima obaveštenja i ko odgovara.
2. Napravite obrazac sa poljima iznad, pristupačnim oznakama i poljima prilagođenim telefonu (koristite tip polja za mejl da telefon prikaže odgovarajuću tastaturu).
3. Napravite serversku rutu. Ona proverava obavezna polja, format mejla i ograničenja dužine. Nikada ne verujte proveri koja se radi samo u pregledaču.
4. Prvo sačuvajte u bazi podataka. Pogledajte kako dodati bazu podataka u vašu aplikaciju.
5. Podesite provajdera za mejl. Napravite nalog, proverite domen za slanje i sačuvajte API ključ kao tajnu. Kako slati mejlove iz vaše aplikacije detaljno pokriva podešavanje domena (SPF, DKIM).
6. Pošaljite obaveštenje sa servera posle čuvanja. Kao pošiljaoca koristite vaš proveren domen, a kao reply-to adresu posetioca — nemojte slati „od“ adrese posetioca, jer će je verovatno odbiti kao lažiranje.
7. Opciono automatski odgovorite posetiocu, ali neka odgovor bude kratak; automatski odgovori na spam adrese mogu da naškode reputaciji vašeg pošiljaoca.
8. Dodajte zaštitu od spama: honeypot, ograničenje učestalosti, pa proveru tipa CAPTCHA ako zatreba.
9. Testirajte na objavljenom sajtu: pošaljite poruku, proverite bazu podataka, proverite sanduče i fasciklu za spam, kliknite na odgovor.

Zaustavljanje spama

Kontakt obrasci privlače botove za nekoliko dana od kako su aktivni. Slojevite odbrane od najmanje do najnametljivije:

1. Honeypot polje. Polje skriveno od ljudi; botovi ga popune. Ne košta prave posetioce ništa.
2. Ograničenje učestalosti na serveru. Ograničava koliko poruka jedna adresa može da pošalje u nekom periodu.
3. Pravila sadržaja. Odbacujte poruke pune linkova, ili one sa praznim ili apsurdno dugim poljem za poruku.
4. Provera tipa CAPTCHA, kao što su Cloudflare Turnstile ili Google reCAPTCHA. Token mora da se proveri na vašem serveru; provera koja se radi samo u pregledaču može da se preskoči.

Česte greške

• Prikazivanje „Poslato!“ kada ništa nije poslato. Korisnički interfejs prikazuje uspeh pre ili bez obzira na odgovor servera. Uvek sačekajte server.
• Samo mejl, bez baze podataka. Jedan pogrešno podešen ključ i upiti nestanu na nedelje, a niko to ne primeti.
• API ključ u kodu na frontendu. Svako ga može koristiti da šalje mejl u vaše ime.
• Neproveren domen za slanje. Obaveštenja završe u spamu ili nikada ne stignu.
• Slanje „od“ mejla posetioca. Koristite reply-to.
• Bez ograničenja dužine. Botovi lepe ogromne blokove teksta.
• Nikada ne testirati živi sajt. Ključevi i domeni se često razlikuju između pregleda i produkcije.

Kontrolna lista

• Kratak obrazac sa vidljivim oznakama i jasnim greškama
• Provera unosa na serveru i ograničenja dužine
• Svaka poruka sačuvana u bazi podataka
• Obaveštenje mejlom poslato sa proverenog domena, sa postavljenim reply-to
• API ključ za mejl sačuvan samo kao tajna na serveru
• Honeypot i ograničenje učestalosti postavljeni
• Poruka o uspehu se pojavljuje tek kada server potvrdi
• Napomena o privatnosti vodi do vaše politike privatnosti
• Testirano od početka do kraja na objavljenom sajtu, uključujući fasciklu za spam

Kontakt obrasci na Mythexu

Na Mythexu sve ovo možete napraviti iz četa. Zatražite obrazac i bazu podataka u istom upitu (ili upišite /database) da bi poruke ostajale sačuvane. Mythex nema ugrađen proizvod za slanje mejlova, pa za obaveštenja dovodite provajdera kao što su Resend, SendGrid ili Postmark, dodajete njegov ključ preko /secrets ili podešavanja projekta i tražite od agenta da šalje sa servera — pogledajte Slanje mejla iz vaše aplikacije. Pre nego što se oslonite na to, pokrenite App Testing (/test) nad obrascem u Preview-u, pa objavite i testirajte na živom linku.

Kontakt obrazac je ključni deo većine sajtova za mala preduzeća i landing stranica. Pre lansiranja proverite kontrolnu listu bezbednosti.

Pitanja