Kako dodati kontakt formu na web stranicu (koja zaista dolazi do vas)

Da biste dodali kontakt formu koja radi, izradite kratku formu (ime, e-mail, poruka) i pošaljite je na serversku rutu koja provjerava unos, sprema poruku u bazu podataka i zatim vam šalje obavijest e-mailom preko pružatelja usluge, koristeći tajni API ključ. Dodajte skriveno polje za zamku (honeypot) i ograničenje broja zahtjeva kako biste zaustavili većinu spama, prikažite jasnu poruku o uspjehu i testirajte cijeli tijek na objavljenoj stranici. Važno je spremiti prije slanja e-maila: ako e-mail ikad zakaže, upit i dalje imate.

Vaše mogućnosti

Ako vaša stranica već ima backend i bazu podataka, što aplikacije izrađene AI alatima često imaju, zadnja opcija je najpouzdanija i čuva upite na mjestu gdje ih možete vidjeti.

Što dobra kontakt forma sadrži

• Što manje polja. Ime, e-mail, poruka. Padajući izbornik za temu („Prodaja“, „Podrška“, „Ostalo“) dodajte samo ako upite po njoj usmjeravate.
• Jasne oznake iznad svakog polja, a ne samo placeholder tekst koji nestaje.
• Korisna provjera unosa: „Unesite ispravnu e-mail adresu“, prikazano uz polje.
• Poruka o uspjehu koja kaže što slijedi: „Hvala, odgovorit ćemo u roku od jednog radnog dana.“
• Napomena o privatnosti koja kaže kako ćete koristiti podatke, s poveznicom na politiku privatnosti.
• Alternativni kontakt, kao što je vaša e-mail adresa ili telefon, za ljude koji to radije koriste.

Primjeri promptova

Osnovna forma:

Dodaj kontakt formu na stranicu Kontakt s poljima ime, e-mail i poruka (sva obavezna, poruka do 2.000 znakova). Neka forma šalje podatke na serversku rutu koja provjerava unos, sprema ga u tablicu contact_messages s vremenom primitka i prikazuje poruku o uspjehu: „Hvala, odgovorit ćemo u roku od jednog radnog dana.“ Greške u poljima prikaži odmah uz polje. Neka dobro radi na telefonima.

Obavijesti e-mailom:

Kad se poruka kontakt forme spremi, pošalji mi obavijest na e-mail hello@example.com preko Resenda, s ključem u RESEND_API_KEY. Postavi reply-to na e-mail pošiljatelja da mu mogu izravno odgovoriti. Ako slanje ne uspije, zadrži spremljenu poruku i zabilježi grešku bez izlaganja ključa.

Zaštita od spama:

Dodaj zaštitu od spama u kontakt formu: skriveno polje za zamku koje mora ostati prazno, ograničenje od 5 slanja po IP adresi na sat na serveru i odbij poruke s više od 3 poveznice. Poruke s popunjenim poljem za zamku tiho odbaci, ali i dalje prikaži poruku o uspjehu.

Pregled poruka:

Dodaj stranicu za admina zaštićenu lozinkom koja prikazuje poruke kontakta od najnovije prema najstarijoj, s potvrdnim okvirom „riješeno“ i filtrom za neriješene poruke.

Korak po korak

1. Odlučite kamo idu poruke: tko prima obavijesti i tko odgovara.
2. Izradite formu s gore navedenim poljima, pristupačnim oznakama i unosom prilagođenim mobitelu (koristite tip polja email da se na telefonu prikaže ispravna tipkovnica).
3. Napravite serversku rutu. Ona provjerava obavezna polja, format e-maila i ograničenja duljine. Nikad ne vjerujte samo provjeri u pregledniku.
4. Spremite u bazu podataka prvo. Pogledajte kako dodati bazu podataka u aplikaciju.
5. Postavite pružatelja e-maila. Otvorite račun, provjerite domenu za slanje i API ključ spremite kao tajnu vrijednost. Kako slati e-mailove iz aplikacije detaljno objašnjava postavljanje domene (SPF, DKIM).
6. Pošaljite obavijest s poslužitelja nakon spremanja. Kao pošiljatelja koristite svoju provjerenu domenu, a kao reply-to adresu posjetitelja. Nemojte slati „od“ adrese posjetitelja, jer će je vjerojatno odbiti kao krivotvorenje.
7. Opcionalno pošaljite automatski odgovor posjetitelju, ali neka bude kratak. Automatski odgovori na lažne adrese mogu oštetiti ugled vaše domene za slanje.
8. Dodajte zaštitu od spama: honeypot, ograničenje broja zahtjeva, zatim provjeru tipa CAPTCHA ako treba.
9. Testirajte na objavljenoj stranici: pošaljite poruku, provjerite bazu, provjerite inbox i spam mapu i kliknite odgovori.

Zaustavljanje spama

Kontakt forme privlače botove u roku od nekoliko dana nakon objave. Slažite obrane od najmanje do najnametljivije:

1. Honeypot polje. Polje skriveno od ljudi; botovi ga popune. Ne košta stvarne posjetitelje ništa.
2. Ograničenje broja zahtjeva na serveru. Ograničava koliko poruka jedna adresa može poslati u određenom razdoblju.
3. Pravila sadržaja. Odbijte poruke krcate poveznicama ili s praznim ili predugim tekstom poruke.
4. Provjera tipa CAPTCHA, kao što je Cloudflare Turnstile ili Google reCAPTCHA. Token mora biti provjeren na vašem serveru; provjera koja radi samo u pregledniku može se zaobići.

Česte greške

• Prikazivanje „Poslano!“ kad ništa nije poslano. Sučelje javlja uspjeh prije ili bez obzira na odgovor servera. Uvijek pričekajte odgovor servera.
• Samo e-mail, bez baze. Jedan pogrešno postavljen ključ i upiti nestaju tjednima bez da itko primijeti.
• API ključ u frontend kodu. Svatko ga može koristiti za slanje e-maila u vaše ime.
• Neprovjerena domena za slanje. Obavijesti završavaju u spamu ili uopće ne stižu.
• Slanje „od“ e-mail adrese posjetitelja. Umjesto toga koristite reply-to.
• Bez ograničenja duljine. Botovi lijepe ogromne blokove teksta.
• Nikad ne testirate živu stranicu. Ključevi i domene se često razlikuju između pregleda i produkcije.

Popis za provjeru

• Kratka forma s vidljivim oznakama i jasnim greškama
• Provjera unosa i ograničenja duljine na serveru
• Svaka poruka spremljena u bazu podataka
• Obavijest poslana s provjerene domene, s postavljenim reply-to
• E-mail API ključ pohranjen samo kao tajna vrijednost na serveru
• Honeypot i ograničenje broja zahtjeva postavljeni
• Poruka o uspjehu pojavljuje se tek nakon potvrde servera
• Napomena o privatnosti vodi na vašu politiku privatnosti
• Testirano od početka do kraja na objavljenoj stranici, uključujući spam mapu

Kontakt forme u Mythexu

U Mythexu možete sve ovo izraditi iz chata. Zatražite formu i bazu podataka u istom promptu (ili upišite /database) kako bi se poruke spremale. Mythex nema ugrađen proizvod za slanje e-maila, pa za obavijesti dovedete pružatelja poput Resenda, SendGrida ili Postmarka, dodate njegov ključ preko /secrets ili postavki projekta i zatražite od agenta da šalje s poslužitelja. Pogledajte slanje e-maila iz aplikacije. Prije nego se oslonite na to, pokrenite App Testing (/test) nad formom u pregledu, zatim objavite i testirajte na živom URL-u.

Kontakt forma ključan je dio većine web stranica malih poduzeća i landing stranica. Prije objave provjerite popis za sigurnost.

Pitanja