Prompt für Claude Code: Kontaktformular hinzufügen

Prompt für Claude Code kopieren

Starten Sie claude im Projektordner und fügen Sie den Prompt ein. Ist nicht klar, auf welche Seite das Formular gehört, sagen Sie es, etwa „auf die Kontaktseite in src/pages/contact“. Claude Code fragt um Erlaubnis, bevor es Dateien bearbeitet oder Befehle ausführt, also prüfen Sie jeden Schritt.

Füge der bestehenden Website in diesem Repository ein Kontaktformular hinzu, mit ihren Komponenten und Styles. Die Einsendungen nimmt Formgong entgegen. Lege keine API-Route, keine Serverfunktion, keine Umgebungsvariable und kein E-Mail-Paket an. Ändere nur die Dateien, die das Formular braucht.

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 Claude Code meist danebenliegt

Claude Code ist gründlich. Bittet man es um ein funktionierendes Kontaktformular, fügt es vielleicht eine API-Route hinzu, installiert ein E-Mail-Paket und fragt nach SMTP- oder Resend-Schlüsseln. Das ist viel Code für ein Formular. Der Prompt sagt, dass das Formular direkt aus dem Browser an Formgong sendet und nur die Dateien geändert werden, die das Formular braucht.

Außerdem fügt es gern Tests hinzu. Das ist gut, aber achten Sie darauf, dass kein Test echte Anfragen sendet. Senden Sie stattdessen eine Testanfrage von Hand.

Für Agenten: MCP-Server verbinden

Verbinden Sie den Formgong-MCP-Server mit einem Befehl. Dann erhält Claude Code list_forms, create_form und get_form_snippet und kann Ihren echten Schlüssel selbst einsetzen. Legen Sie das Token nicht in Dateien ab, die Sie committen.

claude mcp add --transport http formgong https://formgong.com/mcp \
  --header "Authorization: Bearer fgp_your_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 git diff: das Formular, vielleicht eine Style-Änderung, nichts im API-Ordner.
2. Stellen Sie sicher, dass keine neue Umgebungsvariable und kein E-Mail-Paket hinzugekommen ist.
3. Senden Sie eine Testanfrage und suchen Sie sie im Formgong-Posteingang.
4. Fügen Sie optional die Formgong-Regeln in CLAUDE.md oder AGENTS.md für spätere Sitzungen 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.