Промпт для Claude Code: додайте контактну форму

Скопіюйте промпт для Claude Code

Запустіть claude у папці проєкту й вставте промпт. Якщо неочевидно, на яку сторінку ставити форму, скажіть це, наприклад «на сторінку контактів у src/pages/contact». Claude Code питає дозволу, перш ніж редагувати файли чи запускати команди, тож перевіряйте кожен крок.

Додай контактну форму на наявний сайт у цьому репозиторії, з його компонентами й стилями. Заявки приймає Formgong. Не створюй API route, серверну функцію, змінну середовища чи пакет для надсилання листів. Змінюй лише файли, потрібні для форми.

Endpoint: POST https://formgong.com/submit
Приховане поле access_key (публічний ключ): fk_your_access_key
Поля: name, email (type="email"), message; візуально приховане honeypot-поле botcheck (position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)), tabindex="-1", autocomplete="off".
Звичайна HTML-форма (method="POST") або fetch з Accept: application/json; успіх — json.success === true, тоді покажи подяку й очисти форму.
Файли не відправляй. Підписи полів українською.

Додатково:
- Поле email роби з type="email", щоб браузер перевіряв адресу.
- Приховане поле _lang зі значенням uk (мова сторінки): так помилки, сторінка подяки й автовідповідь будуть українською.
- Необов'язково: приховане поле _redirect з повною https-адресою вашої сторінки подяки. Без нього Formgong покаже власну сторінку подяки.
- Необов'язково: <script src="https://formgong.com/fg.js" async></script> один раз на сторінці. Він підставляє _lang з <html lang> і рахує перегляди форми без cookies.
- Turnstile додавай лише тоді, коли я дам site key.

Що промпт змушує зробити інструмент

Промпт дає інструменту одну коротку специфікацію, тому результат передбачуваний:

• Адреса: форма надсилає дані на https://formgong.com/submit — звичайною HTML-формою або через fetch.
• Ключ доступу: приховане поле access_key з вашим публічним ключем.
• Поля: name, email і message, поле email має type="email".
• Honeypot: приховане поле botcheck, якого люди не бачать. Боти його заповнюють, і Formgong позначає такі заявки як спам.
• Стан успіху: з fetch подяка з'являється лише тоді, коли відповідь містить success: true. Зі звичайною формою — сторінка подяки Formgong або ваша власна через _redirect.
• Turnstile: додається, лише якщо ви дасте інструменту site key.
• Без секретів і бекенду: жодних API route, серверних функцій, бази даних чи коду для листів.

Де Claude Code зазвичай помиляється

Claude Code ретельний. На прохання про робочу контактну форму він може додати API route, встановити поштовий пакет і попросити ключі SMTP чи Resend. Це забагато коду для однієї форми. Промпт каже, що форма надсилає дані в Formgong просто з браузера і що змінювати треба лише потрібні для форми файли.

Ще він любить додавати тести. Це добре, але простежте, щоб жоден тест не надсилав справжніх заявок. Натомість надішліть одну тестову заявку вручну.

Для агентів: підключіть MCP-сервер

Підключіть MCP-сервер Formgong однією командою. Тоді Claude Code отримає list_forms, create_form і get_form_snippet і зможе сам підставити ваш справжній ключ. Не кладіть токен у файли, які комітите.

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

Промпт для агента з MCP

Коли MCP-сервер підключено, з цим промптом агент сам знайде вашу форму й ключ:

Використай MCP-сервер Formgong, щоб додати на цей сайт робочу контактну форму.
1. Виклич list_forms. Якщо для цього сайту форми немає, виклич create_form з назвою сайту.
2. Виклич get_form_snippet з цим form_id і framework "react" (для статичної сторінки "html", для Next.js App Router "next").
3. Додай отриманий код як контактну форму в стилі решти сайту. Залиш access_key, _lang і honeypot-поле botcheck точно такими, як у відповіді.
4. Не додавай бекенд, API route, базу даних чи код для листів і ніколи не записуй токен fgp_ у файли проєкту.

Перевірте результат

1. Перевірте git diff: форма, можливо, правка стилів, нічого в папці API.
2. Переконайтеся, що не додано нової змінної середовища чи поштового пакета.
3. Надішліть тестову заявку й знайдіть її у вхідних Formgong.
4. За бажання додайте правила Formgong у CLAUDE.md або AGENTS.md для наступних сесій.

Перевірка форми читає опубліковану сторінку й показує конкретні проблеми, наприклад поле без атрибута name або ключ-заглушку.