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

Lovableの既存フォームをFormgongに接続。公開キー、メール確認、Telegram設定、公開後の動作確認を解説します。

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

Formgongでフォームキーを取得してメールを確認し、接続用の指示をLovableに渡します。フォームは/submitへ送信し、Formgongが保存と通知を担当します。このフォームのために独自のバックエンドを運用する必要はありません。

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

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

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

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

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

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

## 変更するのは送信処理

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

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

```text
問い合わせを 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
```

### APIリクエストの例

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

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

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

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

## 通知用のチャットを追加

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

接続先を確認して新しいテストを送りましょう。詳しくは[Telegram接続ガイド](/blog/website-form-to-telegram?lang=ja)を参照してください。

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

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

Turnstileを有効にした後は、トークンを送る最新の接続例が必要です。[未着の切り分けガイド](/blog/contact-form-not-sending-email?lang=ja)も利用できます。

## 公開後の設定変更

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

## よくある質問

### 別途Supabaseが必要ですか？

Formgongに接続するフォームには不要です。アプリがすでにLovableやSupabaseのバックエンドを使っているなら、そこで処理しても構いません。

### キーをブラウザーに置けますか？

はい。access_keyは送信用の公開キーで、受信箱や設定へのアクセス権はありません。

### フォームの見た目は変わりますか？

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)
- [Formgongドキュメント](https://formgong.com/docs/lovable?lang=ja)

[フォームキーを取得](https://formgong.com/?lang=ja#top)