Prompt für Windsurf: Kontaktformular hinzufügen

Prompt für Windsurf kopieren

Öffnen Sie das Cascade-Panel in Ihrem Projekt und fügen Sie den Prompt ein. Gibt es mehrere Seiten, nennen Sie die Seite für das Formular. Cascade zeigt jede Dateiänderung; übernehmen Sie das Formular und seine Styles. Die Windsurf-Dokumentation erscheint inzwischen unter dem Namen Devin Desktop; Cascade und diese Schritte funktionieren gleich.

Füge der bestehenden Website in diesem Workspace ein Kontaktformular hinzu, mit ihren Komponenten und Styles. Die Einsendungen nimmt Formgong entgegen. Lege keine API-Route, keine Serverfunktion, keine Umgebungsvariable und keinen E-Mail-Versandcode an.

Endpoint: POST https://formgong.com/submit
Verstecktes Feld access_key (öffentlicher Schlüssel): fk_your_access_key
Felder: name, email (type="email"), message; visuell verborgenes Honeypot-Feld botcheck (position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)), tabindex="-1", autocomplete="off".
Normales HTML-Formular (method="POST") oder fetch mit Accept: application/json; Erfolg bedeutet json.success === true, dann eine Danke-Meldung zeigen und das Formular leeren.
Keine Dateien senden. Beschriftungen auf Deutsch.

Zusätzlich:
- Das Feld email mit type="email" anlegen, damit der Browser die Adresse prüft.
- Verstecktes Feld _lang mit dem Wert de (Sprache der Seite): Fehlermeldungen, Danke-Seite und automatische Antwort erscheinen dann auf Deutsch.
- Optional: verstecktes Feld _redirect mit der vollständigen https-Adresse deiner Danke-Seite. Ohne dieses Feld zeigt Formgong eine eigene Danke-Seite.
- Optional: <script src="https://formgong.com/fg.js" async></script> einmal pro Seite. Es setzt _lang aus <html lang> und zählt Formularansichten ohne Cookies.
- Turnstile nur einbauen, wenn ich dir einen Site Key gebe.

Was der Prompt vom Tool verlangt

Der Prompt gibt dem Tool eine kurze Vorgabe, deshalb ist das Ergebnis vorhersehbar:

• Adresse: Das Formular sendet an https://formgong.com/submit, als normales HTML-Formular oder per fetch.
• Zugriffsschlüssel: ein verstecktes Feld access_key mit Ihrem öffentlichen Schlüssel.
• Felder: name, email und message; das Feld email hat type="email".
• Honeypot: ein verstecktes Feld botcheck, das Menschen nicht sehen. Bots füllen es aus, und Formgong markiert solche Anfragen als Spam.
• Erfolgszustand: Mit fetch erscheint der Dank nur, wenn die Antwort success: true enthält. Beim normalen Formular die Dankeseite von Formgong oder Ihre eigene über _redirect.
• Turnstile: wird nur eingebaut, wenn Sie dem Tool einen Site Key geben.
• Keine Geheimnisse, kein Backend: keine API-Routen, Serverfunktionen, Datenbank oder E-Mail-Code.

Wo Windsurf meist danebenliegt

Cascade betrachtet den ganzen Workspace und fügt oft hinzu, was es für ein „vollständiges“ Formular hält: einen API-Endpunkt, eine E-Mail-Bibliothek und Umgebungsvariablen. Der Prompt sagt, dass das Formular nur im Frontend läuft und an Formgong sendet, sodass Sie keinen E-Mail-Code pflegen müssen.

Cascade befolgt auch Regeln. Der Abschnitt für .windsurfrules bewahrt dieselbe Adresse, den Honeypot und die Erfolgsbehandlung in späteren Sitzungen.

Für Agenten: MCP-Server verbinden

Windsurf liest MCP-Server aus ~/.codeium/windsurf/mcp_config.json. Entfernte Server nutzen das Feld serverUrl. Die Einstellungen unten nehmen das Token aus der Umgebungsvariable FORMGONG_TOKEN. Aktualisieren Sie nach dem Speichern die MCP-Liste in Cascade.

{
  "mcpServers": {
    "formgong": {
      "serverUrl": "https://formgong.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FORMGONG_TOKEN}"
      }
    }
  }
}

Prompt für einen Agenten mit MCP

Ist der MCP-Server verbunden, findet der Agent mit diesem Prompt Ihr Formular und Ihren Schlüssel selbst:

Nutze den Formgong-MCP-Server, um dieser Website ein funktionierendes Kontaktformular hinzuzufügen.
1. Rufe list_forms auf. Gibt es für diese Website kein Formular, rufe create_form mit dem Namen der Website auf.
2. Rufe get_form_snippet mit dieser form_id und framework "react" auf ("html" für eine statische Seite, "next" für Next.js App Router).
3. Füge den zurückgegebenen Code als Kontaktformular im Stil der restlichen Website ein. Lass access_key, _lang und das Honeypot-Feld botcheck genau so, wie sie in der Antwort stehen.
4. Füge kein Backend, keine API-Route, keine Datenbank und keinen E-Mail-Code hinzu und schreibe das fgp_-Token nie in Projektdateien.

Ergebnis prüfen

1. Prüfen Sie die Änderungen: ein Formular, kein neuer API-Endpunkt und keine E-Mail-Bibliothek.
2. Starten Sie die Website und senden Sie eine Testanfrage.
3. Suchen Sie die Anfrage im Formgong-Posteingang.
4. Fügen Sie optional die Formgong-Regeln in .windsurfrules ein.

Der Formular-Check liest die veröffentlichte Seite und zeigt konkrete Probleme, zum Beispiel ein Feld ohne name-Attribut oder einen Platzhalter-Schlüssel.