# AIが作ったフォームに、動くバックエンドを与える

Lovable、Bolt、v0、Cursorは送信されないフォームを生成しがちです。動く三つの経路を比較し、一つの指示でホスト型バックエンドを接続し、公開前に配信を確認します。

Author: Formgong team
Published: 2026-10-06
Updated: 2026-10-06
Language: ja
Canonical: https://formgong.com/ja/blog/form-backend-for-ai-website-builders/

Lovable、Bolt、v0、CursorのようなAIビルダーは、成功を見せつつデータを送らないフォームを作ります。動く経路は三つ — ビルダー自身のバックエンド、ホスト型のフォームバックエンド、自作のサーバーレス関数です。問い合わせフォームにはホスト型が最速で、一つの指示が公開キー付きのPOSTを/submitへ接続します。配信は公開前に受信箱・メール・Telegramで確認します。

## 生成されたフォームはなぜ何も送らないのか

Lovable、Bolt、v0、Cursorは優れたインターフェースを生成します。入力欄、バリデーション、ボタン、お礼の表示。ところが既定では、そのボタンは役に立つことを何もしません。ハンドラーはネットワークリクエストなしにすぐお礼を表示し、データはどこにも保存されません。

もう一つのよくある形は、AIが勝手にSupabaseやLovable Cloudを配線するケースです。動きますが、単純な問い合わせフォームのためにデータベースとアクセス設定、たいていはResendのような別メールサービスまで引きずります。確認は1分で済みます。開発者ツールのNetworkタブを開いて送信してください。POSTがなければ、そのフォームは装飾です。生成サイトの大半で起きているのはまさにこれです。

## 実際に使える三つの経路

**1. ビルダー自身のバックエンド。**Lovable CloudやSupabaseにメール連携を足す構成。アプリがすでに認証やデータベースなどサーバー側の処理を持っているなら妥当ですが、単独の問い合わせフォームには過剰です。

**2. ホスト型のフォームバックエンド。**フォームは公開キーと共に一つのエンドポイントへPOSTするだけ。サービスが問い合わせを保存し、メールとTelegramで通知します。ランディングやカタログサイトには最速の経路で、スキーマもエッジ関数もサーバーも要りません。

**3. 自作のサーバーレス関数。**完全な制御と完全な責任 — コード、秘密キー、迷惑送信のフィルター、配信のリトライまで自分の仕事です。フォームがより複雑なロジックの一部なら正当化されます。この記事は二つ目の経路の話です。Lovable、Bolt、v0、Cursor、その他HTMLやReactを生成するビルダーで同じように動きます。

## フォームバックエンドの選び方

**配信の証拠。**ページ上の「ありがとう」は何も証明しません。受付・配信・迷惑送信の状態を持つ保存先が必要です。Formgongでは経路ごとの配信詳細を持つ受信箱がそれにあたります。

**迷惑送信対策。**最低でもhoneypot。任意のTurnstileやキャプチャ、迷惑送信スコアリングがあり、迷惑送信が月の上限を消費しないほうがよいでしょう。**通知経路。**基本はメール、チームの素早い反応にはTelegram、連携には署名付きWebhookです。

**データの所在地。**顧客がEUにいるなら、問い合わせが物理的にどこに保存されるか確認を。FormgongはD1、キュー、ファイルまでEU管轄のCloudflareに置きます。**再構築なしの変更。**受信者、リダイレクト、自動返信は、AIに再生成させるコードではなく管理画面で変えられるべきです。

## どのビルダーでも使える一つの指示

プロジェクトのチャットを開き、デザインを保ったまま既存フォームを接続するよう依頼します。下の指示はLovable、Bolt、v0、Cursorで使えます。`fk_your_access_key`は、Formgong管理画面のそのフォームのサイト接続セクションにあるキーに置き換えてください。

この例はテキスト用です。ファイル入力、メールサービスの秘密キー、Botトークンをフロントエンドに追加してはいけません。送信用キーは公開用なのでコードに残せます。

```text
Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.
```

### 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",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}
```

## 成功表示ではなく配信をテストする

ビルダーが変更を適用したら、見分けやすいテスト送信を一つ行い、経路全体をたどります。

- **リクエスト。**Networkタブに`https://formgong.com/submit`へのPOSTがあり、応答に`success: true`が含まれること。

- **記録。**そのフォームのFormgong受信箱に、全フィールド付きで問い合わせが現れること。

- **メール。**Freeでは、アカウント所有者のタイムゾーンで翌朝08:00の日次ダイジェストとして、宛先1件に届きます。ProとBusinessでは各リードが個別のメールになります。迷惑メールも確認してください。

- **Telegram。**TelegramはFreeを含むすべてのプランで即時です。チャットを接続していれば、そのチャットに届きます。

公開後は実際のドメインでやり直してください。エディターのプレビューは挙動が違うことがあります。全手順は[「成功表示なのにメールが来ない」の記事](/ja/blog/contact-form-not-sending-email/)にあります。

この構成にファイル入力を使わないでください。例はテキスト送信向けです。添付には別のフォーム設定とTurnstileが必要です。

## 公開後：再生成なしで設定を変える

フォームが動いてしまえば、大半の変更にビルダーへ戻る必要はありません。Formgongの管理画面で、メール受信者、接続済みTelegramチャット、送信後のリダイレクト、訪問者への自動返信、保護設定を変更できます。

リニューアル後に問い合わせが途切れても、推測しないでください。Formgongのフォーム診断はページを読み込み、スニペットが正しく入っているか — 送信先、メソッド、キー、必須フィールド — を示します。フォーム分析は、訪問者がどの欄で入力をやめるかも教えてくれます。A/Bテストより安上がりで、コードの再生成も不要です。

## AI生成フォームの典型的な間違い

**成功が出るのにリクエストがない**
ビルダーが装飾のハンドラーを生成しています。「データをfetchで送り、success: trueの応答後にだけ成功を表示して」と依頼してください。

**コードにfk_your_access_keyが残っている**
それはプレースホルダーです。フォームのサイト接続セクションで本物のキーを取得して置き換えます。

**エラー後に入力が消える**
訪問者が書いた文章を失います。ハンドラーは値を残してエラーを表示すべきです。次の指示に追加してください。

**Turnstileを有効にしたら壊れた**
ウィジェットをコードに追加し、`cf-turnstile-response`を送る必要があります。保護変更後は管理画面の接続例を最新化してください。

**記録はあるのにメールが来ない**
所有者と受信者のメール確認を調べてください。未確認のアドレスは配信先になりません。詳細は[配信の切り分けガイド](/ja/blog/contact-form-not-sending-email/)へ。

## よくある質問

### AIビルダーのフォームにSupabaseは必要ですか？

単独の問い合わせフォームには不要です。ホスト型バックエンドが公開キーのPOSTを受け付け、通知を配信します。SupabaseやLovable Cloudは、アプリが他の機能で既に使っている場合に意味を持ちます。

### access_keyを生成コードに残して安全ですか？

はい。送信用の公開キーで、受信箱や設定へのアクセス権はありません。秘密キー、Botトークン、メールサービスの鍵はフロントエンドに入れてはいけません。

### この指示はどのビルダーでも使えますか？

HTMLやReactを生成しfetchを実行できるものなら使えます。Lovable、Bolt、v0、Cursorが対象です。違いは変更の適用方法だけで、確認するのはPOSTとsuccess: trueという結果です。

### 顧客の問い合わせはどこに保存されますか？

問い合わせとファイルはEU内のCloudflare D1と、EU管轄のファイルストレージに保存されます。Telegram、Slack、Discordへの通知は、その保存先の外で各サービスが処理します。サイトにはプライバシーポリシーが引き続き必要です。

## 参考資料・ドキュメント

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Formgongドキュメント](https://formgong.com/ja/docs/)

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