Lovable と Bolt のプロンプト
このプロンプトを Lovable または Bolt に貼ります。Formgong に送る問い合わせフォームを頼み、データベースやメールサービスを足さないよう指示します。
コピーする内容
このスターターは、Lovable または Bolt 向けのプロンプトです。ビルダーのチャットに貼り付けます。フォームを書くのはビルダーです。送信を受け取るのは Formgong です。
プロンプトは、エンドポイント、公開アクセスキー、_lang、ハニーポット、成功の確認を指定します。このフォームにバックエンドを足さないよう、ビルダーへ伝えます。
Resend、データベース、edge function、server action も、このフォームには足さないと書いてあります。生成されたアプリでよくある回り道です。
追加のブロックは、プロンプトと一致する素の HTML です。ビルダーに書かせるよりマークアップを貼りたいときは、こちらを使ってください。
Lovable 向けと Bolt 向けの、より長いガイドはすでにあります。このページは短いプロンプトです。それらのページが、その前後の操作を説明します。
差分で確認すること
フォームは Formgong のオリジンの /submit へ送るべきです。新しいテーブル、秘密、メールの SDK が見えたら、ビルダーに削除を頼んでください。
プロンプト内のアクセスキーは、フォームを作るまで fk_your_access_key です。置き換えるか、サインインした状態でこのページのボタンを使ってください。
フィールド名は name、email、message のままにし、phone は任意にしてください。Telegram はこれらの名前を表示します。名前を変えた欄は、一覧で読みにくくなります。
botcheck は存在し、空で、隠れていなければなりません。ビルダーが未使用として削除したら、戻してください。これがハニーポットです。
fetch は Accept: application/json を送るべきです。JSON の本文には Content-Type: application/json も必要です。FormData はそのヘッダーを設定しないでください。
プロンプトは、サイトキーを渡すまで Turnstile を省くよう述べています。ビルダーにキーを作らせないでください。
プロンプトは、フォームのために第三者のフォントを読み込まないよう述べています。アプリにすでにフォントがあれば、フォームはそれを継承できます。
ビルダーが終わったあと
公開するか、インターネットへ届くならビルダーのプレビューを使い、テストを送ってください。そのあと Formgong の受信箱を開きます。
すぐ届けるには、フォーム設定で Telegram を接続してください。無料プランではメールは日次ダイジェストです。
無料プランは、EU で 30 日のあいだ、月 300 件の送信を保持します。スパムは保存されますが配信されず、件数にも入りません。
受信者や Telegram などの設定は Formgong にあります。ビルダーにフォームを作り直させなくても変更できます。
運営者は Formgong です。製品の挙動がおかしいときは support@formgong.com へお書きください。ビルダー自身のアカウントは、別のサポート経路です。
プレビュー
フォームのコード
このプロジェクトに問い合わせフォームを追加してください。送信先は Formgong です。データベース、edge function、server action、Resend のようなメールサービスは追加しないでください。
仕様:
- 素のフォームは action="https://formgong.com/submit" と method="POST" で構いません。JavaScript では同じ項目を fetch で https://formgong.com/submit に POST します。
- 隠し項目 name="access_key" value="fk_your_access_key"。鍵は公開です。フロントエンドに置いたままにしてください。シークレットに移さないでください。
- 隠し項目 name="_lang" value="{lang}"。Formgong はサンキューページとエラー文に使います。多言語サイトではページの言語を入れてください。
- 項目は name、type="email" の email、message です。3つとも必須です。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" と、class="cf-turnstile" および data-sitekey の div。なければ入れません。
- 第三者のフォントは読み込みません。ファイル送信は追加しません。
- エンドポイントのオリジンは 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="ja"> <label>お名前 <input type="text" name="name" autocomplete="name" required></label> <label>メールアドレス <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="ja"></div> --> <button type="submit">送信</button> </form>
よくある質問
このプロンプトは Lovable と Bolt の両方で使えますか？
はい。特定のファイル配置には依存しません。ビルダーが React、Vue、素の HTML のどれを選んでも、同じエンドポイントとフィールドが適用されます。
ビルダーが Supabase や Resend を足しました。どうすればよいですか？
そのコードを削除し、Formgong への送信だけを残すよう頼んでください。リンク先の Lovable と Bolt のガイドが、同じ修正をより詳しく説明しています。
プロンプトの中のアクセスキーは安全ですか？
公開キーです。誰でも、それで送信できます。受信箱を読むことや、メールの行き先を変えることはできません。
より長いガイドはどこにありますか？
このページからリンクしている、For の Lovable と Bolt のページです。このスターターはプロンプトそのものであり、それらのガイドの代わりではありません。