Prompt dla Claude Code: dodaj formularz kontaktowy

Skopiuj prompt dla Claude Code

Uruchom claude w folderze projektu i wklej prompt. Jeśli nie wiadomo, na której stronie ma być formularz, powiedz to, na przykład „na stronie kontaktu w src/pages/contact”. Claude Code pyta o zgodę, zanim edytuje pliki lub uruchomi polecenia, więc sprawdzaj każdy krok.

Dodaj formularz kontaktowy do istniejącej strony w tym repozytorium, z jej komponentami i stylami. Zgłoszenia przyjmuje Formgong. Nie twórz API route, funkcji serwerowej, zmiennej środowiskowej ani pakietu do wysyłki e-maili. Zmieniaj tylko pliki potrzebne do formularza.

Endpoint: POST https://formgong.com/submit
Ukryte pole access_key (klucz publiczny): fk_your_access_key
Pola: name, email (type="email"), message; wizualnie ukryte pole honeypot botcheck (position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)), tabindex="-1", autocomplete="off".
Zwykły formularz HTML (method="POST") albo fetch z Accept: application/json; sukces to json.success === true, wtedy pokaż podziękowanie i wyczyść formularz.
Nie wysyłaj plików. Etykiety po polsku.

Dodatkowo:
- Pole email ustaw jako type="email", żeby przeglądarka sprawdzała adres.
- Ukryte pole _lang o wartości pl (język strony): komunikaty błędów, strona z podziękowaniem i autoodpowiedź będą po polsku.
- Opcjonalnie: ukryte pole _redirect z pełnym adresem https Twojej strony z podziękowaniem. Bez niego Formgong pokaże własną stronę z podziękowaniem.
- Opcjonalnie: <script src="https://formgong.com/fg.js" async></script> raz na stronie. Uzupełnia _lang z <html lang> i liczy wyświetlenia formularza bez cookies.
- Turnstile dodaj tylko wtedy, gdy podam site key.

Co prompt każe zrobić narzędziu

Prompt daje narzędziu jedną krótką specyfikację, więc wynik jest przewidywalny:

• Adres: formularz wysyła dane na https://formgong.com/submit, jako zwykły formularz HTML albo przez fetch.
• Klucz dostępu: ukryte pole access_key z Twoim publicznym kluczem.
• Pola: name, email i message, pole email ma type="email".
• Honeypot: ukryte pole botcheck, którego ludzie nie widzą. Boty je wypełniają, a Formgong oznacza takie zgłoszenia jako spam.
• Stan sukcesu: przy fetch podziękowanie pojawia się tylko wtedy, gdy odpowiedź zawiera success: true. Przy zwykłym formularzu strona z podziękowaniem Formgong albo Twoja własna przez _redirect.
• Turnstile: dodawany tylko wtedy, gdy podasz narzędziu site key.
• Bez sekretów i backendu: żadnych API route, funkcji serwerowych, bazy danych ani kodu do e-maili.

Gdzie Claude Code zwykle się myli

Claude Code jest dokładny. Poproszony o działający formularz kontaktowy, może dodać API route, zainstalować pakiet do e-maili i poprosić o klucze SMTP lub Resend. To dużo kodu jak na jeden formularz. Prompt mówi, że formularz wysyła dane do Formgong prosto z przeglądarki i że zmieniać trzeba tylko pliki potrzebne formularzowi.

Lubi też dodawać testy. To w porządku, ale upewnij się, że żaden test nie wysyła prawdziwych zgłoszeń. Zamiast tego wyślij jedno zgłoszenie testowe ręcznie.

Dla agentów: podłącz serwer MCP

Dodaj serwer MCP Formgong jednym poleceniem. Claude Code dostanie wtedy list_forms, create_form i get_form_snippet i sam wstawi Twój prawdziwy klucz. Nie umieszczaj tokenu w plikach, które commitujesz.

claude mcp add --transport http formgong https://formgong.com/mcp \
  --header "Authorization: Bearer fgp_your_token"

Prompt dla agenta z MCP

Gdy serwer MCP jest podłączony, z tym promptem agent sam znajdzie Twój formularz i klucz:

Użyj serwera MCP Formgong, żeby dodać do tej strony działający formularz kontaktowy.
1. Wywołaj list_forms. Jeśli dla tej strony nie ma formularza, wywołaj create_form z nazwą strony.
2. Wywołaj get_form_snippet z tym form_id i framework "react" (dla strony statycznej "html", dla Next.js App Router "next").
3. Dodaj zwrócony kod jako formularz kontaktowy w stylu reszty strony. Zostaw access_key, _lang i pole honeypot botcheck dokładnie tak, jak w odpowiedzi.
4. Nie dodawaj backendu, API route, bazy danych ani kodu do e-maili i nigdy nie zapisuj tokenu fgp_ w plikach projektu.

Sprawdź wynik

1. Sprawdź git diff: formularz, może zmiana stylów, nic w folderze API.
2. Upewnij się, że nie dodano nowej zmiennej środowiskowej ani pakietu do e-maili.
3. Wyślij zgłoszenie testowe i znajdź je w skrzynce Formgong.
4. Opcjonalnie dodaj reguły Formgong do CLAUDE.md lub AGENTS.md na kolejne sesje.

Sprawdzarka formularzy czyta opublikowaną stronę i pokazuje konkretne problemy, na przykład pole bez atrybutu name albo klucz-zaślepkę.