Промпт для Lovable і Bolt
Вставте цей промпт у Lovable або Bolt. Він просить форму контакту з надсиланням у Formgong і забороняє додавати базу чи поштовий сервіс.
Що ви копіюєте
Це промпт для Lovable або Bolt. Ви вставляєте його в чат конструктора. Конструктор пише форму. Formgong приймає надсилання.
Промпт називає ендпоінт, публічний ключ доступу, _lang, пастку і перевірку успіху. Він каже конструктору не додавати бекенд.
Він також каже не додавати Resend, базу, edge function чи server action для цієї форми. Це часті обхідні шляхи в згенерованих застосунках.
Додатковий блок — звичайний HTML, який відповідає промпту. Беріть його, якщо хочете вставити розмітку, а не просити конструктора її написати.
Довші інструкції саме для Lovable і саме для Bolt уже є. Ця сторінка — короткий промпт. Ті сторінки пояснюють кліки навколо нього.
Що перевірити в змінах
Форма має надсилати на /submit походження Formgong. Якщо бачите нову таблицю, секрет або SDK пошти, попросіть конструктора це прибрати.
Ключ доступу в промпті — це fk_your_access_key, доки ви не створите форму. Замініть його або натисніть кнопку на цій сторінці, поки ви ввійшли.
Назви полів мають лишитися name, email і message, а phone — необов’язковим. Telegram друкує ці назви. Перейменоване поле важче проглянути.
botcheck має бути присутнім, порожнім і схованим. Якщо конструктор видалить його як невикористане, поверніть. Це пастка.
Fetch має надсилати Accept: application/json. Тілу JSON також потрібен Content-Type: application/json. FormData цей заголовок ставити не повинен.
Промпт каже пропустити Turnstile, доки ви не дасте ключ сайту. Не дозволяйте конструктору вигадати ключ.
Промпт каже не вантажити сторонній шрифт для форми. Якщо в застосунку шрифт уже є, форма може його успадкувати.
Після того як конструктор закінчить
Опублікуйте або скористайтеся переглядом конструктора, якщо він досягає інтернету, і надішліть тест. Потім відкрийте вхідні Formgong.
Підключіть Telegram у налаштуваннях форми для миттєвого доставлення. На безкоштовному плані пошта — це денний дайджест.
Безкоштовний план тримає 300 заявок на місяць протягом 30 днів, у ЄС. Спам зберігають і не доставляють, і він не рахується.
Одержувачі і Telegram живуть у Formgong. Їх можна змінити, не просячи конструктора згенерувати форму наново.
Оператор — Formgong. Якщо продукт поводиться не так, пишіть на support@formgong.com. Обліковий запис конструктора — це окремий шлях підтримки.
Перегляд
Код форми
Додай на цей проєкт форму контакту. Заявки приймає Formgong. Не додавай базу даних, edge function, server action і поштовий сервіс на кшталт Resend.
Вимоги:
- Звичайна форма може мати action="https://formgong.com/submit" і method="POST". З JavaScript надішли ті самі поля на https://formgong.com/submit через fetch.
- Приховане поле name="access_key" value="fk_your_access_key". Ключ публічний. Залиш його у фронтенді. Не перенось у секрет.
- Приховане поле name="_lang" value="{lang}". Formgong бере його для сторінки подяки й тексту помилки. На багатомовному сайті став мову сторінки.
- Поля: name, email з type="email" і message. Усі три обов’язкові. phone необов’язковий. Імена полів не змінюй. Telegram друкує ім’я поля жирним над відповіддю.
- Honeypot: поле type="text" name="botcheck" tabindex="-1" autocomplete="off" у блоці з aria-hidden="true". Сховай його CSS: position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%). Не заповнюй його.
- Успіх fetch: заголовок Accept: application/json. Для тіла JSON додай Content-Type: application/json. Для FormData не став Content-Type. Якщо в JSON поле success дорівнює true, покажи коротку подяку й очисти форму. Інакше покажи повідомлення з відповіді.
- Turnstile лише якщо дано ключ сайту: script src="https://challenges.cloudflare.com/turnstile/v0/api.js" і div з class="cf-turnstile" та data-sitekey. Інакше не додавай.
- Не підключай шрифт із стороннього сервісу. Не додавай завантаження файлів.
- Походження ендпоінта: https://formgong.com.Звичайний HTML, якого просить промпт
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="uk"> <label>Ім’я <input type="text" name="name" autocomplete="name" required></label> <label>Email <input type="email" name="email" autocomplete="email" required></label> <label>Телефон <input type="tel" name="phone" autocomplete="tel"></label> <label>Повідомлення <textarea name="message" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Залиште це поле порожнім <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Необов’язково. Увімкніть Turnstile для цієї форми, приберіть ці позначки коментаря і вставте ключ сайту. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="uk"></div> --> <button type="submit">Надіслати</button> </form>
Питання та відповіді
Чи цей промпт працює і в Lovable, і в Bolt?
Так. Він не залежить від одного розташування файлів. Якщо конструктор обирає React, Vue чи звичайний HTML, ендпоінт і поля лишаються тими самими.
Конструктор додав Supabase або Resend. Що далі?
Попросіть видалити цей код і лишити лише надсилання у Formgong. Пов’язані сторінки Lovable і Bolt описують те саме виправлення докладніше.
Чи безпечний ключ доступу в промпті?
Це публічний ключ. Будь-хто може надіслати ним заявку. Прочитати ваші вхідні або змінити, куди йде пошта, ним не можна.
Де довші інструкції?
На сторінках Lovable і Bolt у розділі Для, на них є посилання з цієї сторінки. Цей шаблон — сам промпт, а не заміна тих інструкцій.