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

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

Відкрийте панель Cascade у своєму проєкті й вставте промпт. Якщо сторінок кілька, назвіть ту, де має бути форма. Cascade показує кожну зміну файлу; прийміть форму та її стилі. Документація Windsurf тепер виходить під назвою Devin Desktop; Cascade і ці кроки працюють так само.

Додай контактну форму на наявний сайт у цьому workspace, з його компонентами й стилями. Заявки приймає 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, серверних функцій, бази даних чи коду для листів.

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

Cascade дивиться на весь workspace і часто додає те, що вважає потрібним для «повної» форми: API-ендпоінт, поштову бібліотеку й змінні середовища. Промпт каже, що форма працює лише на фронтенді й надсилає дані в Formgong, тож вам не доведеться підтримувати поштовий код.

Cascade також дотримується правил. Фрагмент для .windsurfrules зберігає ту саму адресу, honeypot і обробку успіху в наступних сесіях.

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

Windsurf читає MCP-сервери з ~/.codeium/windsurf/mcp_config.json. Віддалені сервери використовують поле serverUrl. Налаштування нижче беруть токен зі змінної середовища FORMGONG_TOKEN. Після збереження оновіть список MCP у Cascade.

{
  "mcpServers": {
    "formgong": {
      "serverUrl": "https://formgong.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FORMGONG_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. Перегляньте зміни: одна форма, без нового API-ендпоінта чи поштової бібліотеки.
2. Запустіть сайт і надішліть тестову заявку.
3. Знайдіть заявку у вхідних Formgong.
4. За бажання додайте правила Formgong у .windsurfrules.

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