Jak dodać formularz kontaktowy do strony (który faktycznie do ciebie trafia)

Aby dodać formularz kontaktowy, który działa, zbuduj krótki formularz (imię, e-mail, wiadomość), który wysyła dane do trasy serwerowej sprawdzającej wprowadzone dane, zapisuje wiadomość w bazie danych, a potem wysyła ci powiadomienie e-mail przez dostawcę poczty, używając sekretnego klucza API. Dodaj ukryte pole-pułapkę i ograniczanie liczby zgłoszeń, żeby zatrzymać większość spamu, pokaż wyraźny komunikat o sukcesie i przetestuj całość od początku do końca na opublikowanej stronie. Najważniejsze jest zapisanie przed wysłaniem e-maila: jeśli e-mail kiedykolwiek zawiedzie, nadal masz zapytanie.

Twoje opcje

Jeśli twoja strona ma już backend i bazę danych — co aplikacje budowane w kreatorach AI często mają — ostatnia opcja jest najpewniejsza i trzyma zapytania tam, gdzie je widzisz.

Co zawiera dobry formularz kontaktowy

• Jak najmniej pól. Imię, e-mail, wiadomość. Listę wyboru tematu („Sprzedaż”, „Pomoc”, „Inne”) dodaj tylko wtedy, gdy będziesz według niej kierować zgłoszenia.
• Wyraźne etykiety nad każdym polem, a nie tylko podpowiedzi w środku, które znikają.
• Pomocna walidacja: „Wpisz poprawny adres e-mail”, pokazana przy polu.
• Stan sukcesu, który mówi, co będzie dalej: „Dziękujemy — odpowiemy w ciągu jednego dnia roboczego.”
• Informacja o prywatności, mówiąca, jak wykorzystasz dane, z linkiem do polityki prywatności.
• Alternatywa, np. adres e-mail lub telefon, dla osób, które wolą inny kanał.

Przykładowe prompty

Podstawowy formularz:

Dodaj formularz kontaktowy na stronie Kontakt z polami imię, e-mail i wiadomość (wszystkie wymagane, wiadomość do 2000 znaków). Wysyłaj dane do trasy serwerowej, która sprawdza wejście, zapisuje je w tabeli contact_messages z czasem otrzymania i pokazuje komunikat sukcesu: „Dziękujemy, odpowiemy w ciągu jednego dnia roboczego.” Pokazuj błędy pól przy polach. Dopilnuj, żeby działał dobrze na telefonach.

Powiadomienia e-mail:

Gdy wiadomość kontaktowa zostanie zapisana, wyślij mi powiadomienie na adres hello@example.com przez Resend, z kluczem w RESEND_API_KEY. Ustaw reply-to na e-mail nadawcy, żebym mógł odpisać bezpośrednio. Jeśli wysyłka się nie uda, zachowaj zapisaną wiadomość i zaloguj błąd bez ujawniania klucza.

Ochrona przed spamem:

Dodaj ochronę przed spamem do formularza kontaktowego: ukryte pole-pułapkę, które musi pozostać puste, limit 5 zgłoszeń na IP na godzinę po stronie serwera i odrzucanie wiadomości z więcej niż 3 linkami. Zgłoszenia z wypełnionym polem-pułapką odrzucaj po cichu, ale pokazuj sukces.

Skrzynka odbiorcza:

Dodaj chronioną hasłem stronę administracyjną z listą wiadomości kontaktowych od najnowszej, z polem „obsłużone” i filtrem na nieobsłużone.

Krok po kroku

1. Ustal, dokąd trafiają wiadomości: kto dostaje powiadomienia i kto odpowiada.
2. Zbuduj formularz z polami opisanymi wyżej, dostępnymi etykietami i polami przyjaznymi telefonom (użyj typu pola e-mail, żeby telefony pokazywały właściwą klawiaturę).
3. Utwórz trasę serwerową. Sprawdza wymagane pola, format e-maila i limity długości. Nigdy nie ufaj samej walidacji w przeglądarce.
4. Najpierw zapisz do bazy danych. Zobacz jak dodać bazę danych do aplikacji.
5. Skonfiguruj dostawcę poczty. Załóż konto, zweryfikuj domenę nadawcy i zapisz klucz API jako sekret. Jak wysyłać e-maile z aplikacji opisuje konfigurację domeny (SPF, DKIM) szczegółowo.
6. Wyślij powiadomienie z serwera po zapisaniu. Jako nadawcy użyj swojej zweryfikowanej domeny, a jako reply-to adresu odwiedzającego — nie wysyłaj „od” adresu odwiedzającego, bo zostanie prawdopodobnie odrzucony jako podszywanie się.
7. Opcjonalnie wyślij automatyczną odpowiedź do odwiedzającego, ale krótką; automatyczne odpowiedzi na adresy spamowe mogą zaszkodzić reputacji nadawcy.
8. Dodaj ochronę przed spamem: pułapkę, ograniczanie liczby zgłoszeń, a potem weryfikację typu CAPTCHA, jeśli trzeba.
9. Przetestuj na opublikowanej stronie: wyślij zgłoszenie, sprawdź bazę danych, sprawdź skrzynkę i folder spamu, kliknij odpowiedz.

Walka ze spamem

Formularze kontaktowe przyciągają boty w ciągu kilku dni od uruchomienia. Nakładaj zabezpieczenia od najmniej do najbardziej uciążliwych:

1. Pole-pułapka (honeypot). Pole ukryte przed ludźmi; boty je wypełniają. Nie kosztuje prawdziwych odwiedzających nic.
2. Ograniczanie liczby zgłoszeń po stronie serwera. Ogranicza, ile wiadomości jeden adres może wysłać w danym czasie.
3. Reguły treści. Odrzucaj wiadomości nafaszerowane linkami albo z pustym lub absurdalnie długim polem wiadomości.
4. Weryfikacja typu CAPTCHA, np. Cloudflare Turnstile lub Google reCAPTCHA. Token musi być sprawdzony na twoim serwerze; sprawdzenie działające tylko w przeglądarce można ominąć.

Częste błędy

• Pokazywanie „Wysłano!”, gdy nic nie wysłano. Interfejs mówi o sukcesie przed odpowiedzią serwera albo niezależnie od niej. Zawsze czekaj na odpowiedź serwera.
• Tylko e-mail, bez bazy danych. Jeden błędnie skonfigurowany klucz i zapytania znikają na tygodnie, a nikt tego nie zauważa.
• Klucz API w kodzie frontendu. Każdy może go użyć, żeby wysyłać e-maile w twoim imieniu.
• Niezweryfikowana domena nadawcy. Powiadomienia trafiają do spamu albo wcale nie docierają.
• Wysyłanie „od” e-maila odwiedzającego. Zamiast tego użyj reply-to.
• Brak limitów długości. Boty wklejają ogromne bloki tekstu.
• Nigdy niesprawdzanie działającej strony. Klucze i domeny często różnią się między podglądem a produkcją.

Lista kontrolna

• Krótki formularz z widocznymi etykietami i wyraźnymi błędami
• Walidacja po stronie serwera i limity długości
• Każda wiadomość zapisana w bazie danych
• Powiadomienie e-mail wysyłane z zweryfikowanej domeny, z ustawionym reply-to
• Klucz API do e-maila przechowywany wyłącznie w sekretach po stronie serwera
• Pułapka i ograniczanie liczby zgłoszeń wdrożone
• Komunikat sukcesu pojawia się dopiero po potwierdzeniu przez serwer
• Informacja o prywatności prowadzi do polityki prywatności
• Przetestowane od początku do końca na opublikowanej stronie, łącznie z folderem spamu

Formularze kontaktowe w Mythex

W Mythex możesz zbudować całość z czatu. Poproś o formularz i bazę danych w tym samym prompcie (albo wpisz /database), żeby zgłoszenia były zapisywane. Mythex nie ma wbudowanego produktu do wysyłki e-maili, więc do powiadomień użyj dostawcy, np. Resend, SendGrid lub Postmark, dodaj jego klucz przez /secrets albo ustawienia projektu i poproś agenta o wysyłkę z serwera — zobacz Wysyłanie e-maili z aplikacji. Zanim na tym polegasz, uruchom testy aplikacji (/test) dla formularza w podglądzie, a potem opublikuj i przetestuj na żywym adresie URL.

Formularz kontaktowy to kluczowy element większości stron dla małych firm i landing page'ów. Przed premierą sprawdź listę kontrolną bezpieczeństwa.

Pytania