# Як підключити контактну форму в Lovable

Підключіть форму в Lovable до пошти й Telegram: готовий промпт, підтвердження email і перевірка першої заявки в Formgong.

Author: Formgong
Published: 2026-10-01
Language: uk
Canonical: https://formgong.com/blog/lovable-contact-form-email-telegram?lang=uk

Щоб підключити контактну форму в Lovable до Formgong, отримайте публічний ключ форми, підтвердьте свою пошту та вставте готовий промпт у Lovable. Форма надсилатиме POST на /submit, а Formgong зберігатиме заявки й надсилатиме сповіщення на пошту та в підключений Telegram-чат. Власний бекенд для цієї форми не потрібен.

## Коли для форми потрібен окремий сервіс

У вас уже є лендинг у Lovable: поля, кнопка й повідомлення «Дякуємо». Тепер потрібно, щоб заявка справді потрапила до вас. Повідомлення про успіх на сайті саме по собі не означає, що дані збережені або лист надісланий.

Lovable має власний бекенд і конектори для пошти та Telegram. Якщо ваш застосунок уже використовує їх для авторизації, бази даних та інших сценаріїв, можна підключити форму там само. Formgong підходить для іншого випадку: вам потрібна контактна форма, заявки в пошті й Telegram та окрема скринька для їх перегляду. Дизайн форми лишається на вашому сайті.

Нижче підключимо звичайну форму з полями «Ім’я», «Email» та «Повідомлення». Вам знадобляться проєкт у Lovable, доступ до своєї пошти та, за бажанням, Telegram.

## 1. Отримайте ключ і підтвердьте пошту

Відкрийте [Formgong](/?lang=uk#top) та вкажіть свою email-адресу. Ключ форми з’явиться на екрані. Відкрийте лист від Formgong і підтвердьте адресу за посиланням. Це дає доступ до дашборду та дозволяє надсилати вам сповіщення.

Якщо ви ще не підтвердили пошту, заявки можуть залишатися в очікуванні підтвердження. Спочатку завершіть цей крок, а вже потім перевіряйте доставку. Також можна увійти через Google, якщо ця кнопка доступна.

У дашборді відкрийте потрібну форму, а потім розділ **Підключення сайту**. Тут є ключ і промпт саме для цієї форми. Використовуйте його замість зразка `fk_your_access_key`.

**Цей ключ публічний.** Він дозволяє надсилати заявки й може бути у коді сайту. Він не дає доступу до читання інбоксу або редагування налаштувань. Пароль, токен Telegram-бота чи ключ поштового сервісу у фронтенд додавати не потрібно.

## 2. Вставте промпт у Lovable

Відкрийте чат свого проєкту. Якщо форма вже є, почніть запит словами: «Підключи наявну форму до Formgong, збережи її дизайн і поля». Потім вставте промпт із розділу «Підключення сайту».

Це приклад промпту. Перед використанням замініть `fk_your_access_key` своїм ключем. Якщо у вас уже є інші поля, попросіть Lovable зберегти їхні назви.

```text
Додай на сайт контактну форму, яка надсилає заявки в Formgong. Власний бекенд, база даних і секретні ключі не потрібні.

Вимоги:
- POST на https://formgong.com/submit
- Приховане поле access_key зі значенням fk_your_access_key (ключ публічний, його можна тримати у фронтенді)
- Поля: name, email, phone (не обов'язково), message. Підписи українською
- Honeypot: текстове поле botcheck, приховане CSS-ом поза екраном (position:absolute; left:-10000px), tabindex="-1", autocomplete="off". Людина його не заповнює
- Без завантаження файлів
- Звичайна HTML-форма: method="POST" action="https://formgong.com/submit"
- Якщо використовуєш fetch: Content-Type application/json і Accept: application/json. Успіх — це json.success === true
- Після успіху покажи подяку українською
- Не створюй серверні функції і не підключай Resend
```

### Як виглядає запит у коді

```javascript
async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Formgong error");
}
```

## 3. Перевірте заявку, а не лише повідомлення «Успішно»

Коли Lovable завершить зміни, відкрийте форму в попередньому перегляді. Введіть тестове ім’я, email, до якого маєте доступ, і повідомлення, яке легко впізнати. Надішліть форму один раз.

- На сайті має з’явитися повідомлення про успішне надсилання.

- У Formgong відкрийте цю форму й розділ «Заявки». Переконайтеся, що там є ваше тестове повідомлення та всі потрібні поля.

- Перевірте лист-сповіщення, включно з папкою «Спам». За потреби відповідь на нього має адресуватися email відвідувача.

Після публікації сайту повторіть перевірку на його реальному домені. Робота в редакторі не замінює перевірку опублікованої версії.

**Якщо надсилання зроблене через fetch:** стан успіху потрібно показувати лише після відповіді Formgong з `success: true`. У разі помилки залишайте введений текст у формі, щоб людина могла спробувати ще раз.

## 4. Підключіть Telegram

У налаштуваннях цієї форми відкрийте розділ Telegram і натисніть кнопку підключення. Вона відкриває бота Formgong з посиланням для потрібної форми. Запустіть бота, щоб завершити прив’язку. Створювати власного бота або вставляти його токен у Lovable не потрібно.

Для групи скористайтеся інструкцією у цьому ж розділі: додайте бота та надішліть команду `/connect` із виданим кодом. Код прив’язки відрізняється від публічного ключа форми.

Поверніться в налаштування й перевірте, що чат підключений. Надішліть ще одну тестову заявку зі свого сайту. Вона має з’явитися у відповідному чаті та в інбоксі Formgong. Пошта й Telegram працюють як окремі канали сповіщень.

## Що перевірити, якщо заявка не доходить

**На сайті «Успішно», а в інбоксі порожньо**
Перевірте, що форма надсилає POST на `https://formgong.com/submit` зі справжнім `access_key`. Попросіть Lovable показувати успіх після відповіді API, а не одразу після натискання кнопки.

**Заявка є, але листа немає**
Перевірте підтвердження пошти, адресу отримувача в налаштуваннях та папку «Спам». Якщо заявка позначена як спам, перевірте вкладку зі спамом і поле `botcheck`: людина не повинна його заповнювати.

**Заявка є, але Telegram мовчить**
Переконайтеся, що чат прив’язаний саме до цієї форми, бот запущений і не заблокований. Для групи перевірте, що бот є її учасником і прив’язка через `/connect` завершена.

**Увімкнули Turnstile, і форма перестала надсилатися**
Оновіть промпт у розділі підключення та додайте віджет з актуальним site key. Формі потрібно передавати отриманий токен Turnstile. Для деталей відкрийте [інструкцію підключення](/docs/lovable?lang=uk).

**Потрібно приймати файли**
Наведений сценарій призначений для текстових полів. Formgong не приймає завантаження файлів; не додавайте їх у цю форму.

## Перед запуском

Перевірте форму на телефоні та на комп’ютері, на опублікованому домені. Уточніть, кому приходять сповіщення, яку подяку бачить відвідувач і що він побачить у разі помилки. Не очищайте поля, якщо надсилання не вдалося.

Коли форма працює, адреси отримувачів, Telegram, тему листа та сторінку після надсилання можна змінювати у Formgong. Для таких змін не потрібно перезбирати сайт. Якщо хочете бачити, де люди припиняють заповнювати форму, підключіть [аналітику форми](/docs/analytics?lang=uk).

Безкоштовний тариф включає 300 заявок на місяць на акаунт, пошту й Telegram. Почніть із однієї форми та перевіреної тестової заявки.

## Питання та відповіді

### Чи потрібен Supabase для контактної форми в Lovable?

Ні, для форми, підключеної до Formgong, окремий Supabase не потрібен. Форма надсилає заявки напряму на Formgong. Якщо ваш застосунок уже використовує Lovable Cloud або Supabase, можна залишити форму на наявному бекенді.

### Чи можна залишати ключ Formgong у фронтенді?

Так. access_key — публічний ключ для надсилання заявок. Він не дозволяє читати інбокс чи змінювати налаштування. Секретні ключі поштового сервісу й токен Telegram-бота додавати у код сайту не потрібно.

### Чи безкоштовні сповіщення в Telegram?

Пошта й Telegram включені в безкоштовний тариф Formgong. Ліміт цього тарифу — 300 заявок на місяць на акаунт. Перед перевіркою доставки потрібно підтвердити свою пошту та підключити чат до потрібної форми.

### Чи зміниться дизайн моєї форми?

Formgong приймає заявки, а поля та кнопки залишаються на вашому сайті. Попросіть Lovable підключити наявну форму зі збереженням її дизайну, а після змін перевірте вигляд у редакторі й на телефоні.

## Джерела та документація

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [Lovable Resend connector](https://docs.lovable.dev/integrations/resend)
- [Lovable Telegram connector](https://docs.lovable.dev/integrations/telegram)
- [Підключення Lovable](https://formgong.com/docs/lovable?lang=uk)

[Отримати ключ](https://formgong.com/?lang=uk#top)