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

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

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

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

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

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

Відкрийте Formgong та вкажіть свою email-адресу. Ключ форми з’явиться на екрані. Відкрийте лист від Formgong і підтвердьте адресу за посиланням. Це дає доступ до дашборду та дозволяє надсилати вам сповіщення.

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

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

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

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

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

Додай на сайт контактну форму, яка надсилає заявки в 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

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, до якого маєте доступ, і повідомлення, яке легко впізнати. Надішліть форму один раз.

1. На сайті має з’явитися повідомлення про успішне надсилання.
2. У Formgong відкрийте цю форму й розділ «Заявки». Переконайтеся, що там є ваше тестове повідомлення та всі потрібні поля.
3. Перевірте лист-сповіщення, включно з папкою «Спам». За потреби відповідь на нього має адресуватися email відвідувача.

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

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

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

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

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

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

На сайті «Успішно», а в інбоксі порожньо

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

Заявка є, але листа немає

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

Заявка є, але Telegram мовчить

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

Увімкнули Turnstile, і форма перестала надсилатися

Оновіть промпт у розділі підключення та додайте віджет з актуальним site key. Формі потрібно передавати отриманий токен Turnstile. Для деталей відкрийте інструкцію підключення.

Потрібно приймати файли

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

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

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

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

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