Prompt dla Windsurf: dodaj formularz kontaktowy

Skopiuj prompt dla Windsurf

Otwórz panel Cascade w swoim projekcie i wklej prompt. Jeśli stron jest kilka, wskaż tę, na której ma być formularz. Cascade pokazuje każdą zmianę pliku; zaakceptuj formularz i jego style. Dokumentacja Windsurf ukazuje się teraz pod nazwą Devin Desktop; Cascade i te kroki działają tak samo.

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

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 Windsurf zwykle się myli

Cascade patrzy na cały workspace i często dodaje to, co uważa za potrzebne „kompletnemu” formularzowi: endpoint API, bibliotekę do e-maili i zmienne środowiskowe. Prompt mówi, że formularz działa tylko we frontendzie i wysyła dane do Formgong, więc nie musisz utrzymywać kodu pocztowego.

Cascade stosuje też reguły. Fragment do .windsurfrules zachowuje ten sam adres, honeypot i obsługę sukcesu w kolejnych sesjach.

Dla agentów: podłącz serwer MCP

Windsurf czyta serwery MCP z ~/.codeium/windsurf/mcp_config.json. Zdalne serwery używają pola serverUrl. Ustawienia poniżej biorą token ze zmiennej środowiskowej FORMGONG_TOKEN. Po zapisaniu odśwież listę MCP w Cascade.

{
  "mcpServers": {
    "formgong": {
      "serverUrl": "https://formgong.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FORMGONG_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. Przejrzyj zmiany: jeden formularz, bez nowego endpointu API i biblioteki do e-maili.
2. Uruchom stronę i wyślij zgłoszenie testowe.
3. Znajdź zgłoszenie w skrzynce Formgong.
4. Opcjonalnie dodaj reguły Formgong do .windsurfrules.

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