Lovableのフォームを、問い合わせが届く状態にする

「送信できたように見える」を一歩先へ

入力欄とお礼の表示があっても、問い合わせが保存されたとは限りません。まず送信先を決めましょう。Lovableには独自のバックエンドや連携機能もあります。すでにアプリで使っているなら、そこで処理する選択肢もあります。

Formgongは、フォーム用の受信箱とメール・Telegram通知を別に用意したい場合に向いています。入力欄やデザインはサイト側に残ります。

接続するフォームと受信先を準備

Formgongでメールアドレスを入力し、届いたリンクで確認を済ませます。未確認のアカウントでは送信内容が保留になることがあるため、通知テストの前に完了してください。

対象フォームのサイト接続画面からaccess_keyをコピーします。これは送信用の公開キーで、受信箱の閲覧や設定変更には使えません。

変更するのは送信処理

Lovableには「既存フォームの見た目とフィールド名を維持して接続して」と伝え、以下の指示を追加します。fk_your_access_keyを実際のキーに置き換えてください。

この例はテキスト用です。ファイル入力、メールサービスの秘密キー、Botトークンをフロントエンドに追加する必要はありません。

問い合わせを Formgong に送るフォームを追加してください。バックエンド、データベース、秘密情報は作らないでください。

- POST https://formgong.com/submit
- 隠し項目 access_key の値は fk_your_access_key（キーは公開してよい）
- 項目: name, email, 任意の phone, message。ラベルは日本語
- ハニーポット: 画面外に隠した botcheck
- ファイル送信もサーバー関数もなし
- 普通の HTML フォーム、または Accept: application/json の fetch。成功は json.success === true

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");
}

同じテストをサイト・受信箱・メールで確認

識別しやすいテスト文を一度送信し、対象フォームの記録とメールを確認します。迷惑メールも見てください。追加フィールドの内容も揃っているか確認します。

fetchを使う場合、success: trueを受け取ってから成功を表示し、失敗時は入力を残します。公開後のドメインとスマートフォンでも試してください。

通知用のチャットを追加

フォームのTelegram設定から接続リンクを開き、Botを開始します。グループならBotを追加し、画面で発行されたコードを付けて/connectを送ります。フォームキーとは別のコードです。

接続先を確認して新しいテストを送りましょう。詳しくはTelegram接続ガイドを参照してください。

届かないときは受付から順に調べる

記録がなければhttps://formgong.com/submitとキーを確認します。記録があるなら、メール確認、通知設定、受信者、迷惑メールを確認します。botcheckは非表示のまま空にしてください。

Turnstileを有効にした後は、トークンを送る最新の接続例が必要です。未着の切り分けガイドも利用できます。

公開後の設定変更

受信者、チャット、件名、完了後の移動先はFormgongで変更でき、サイトの再公開は不要です。失敗時の表示も確認しましょう。Freeはアカウント単位で月300件まで、メールとTelegramを含みます。