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

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

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トークンをフロントエンドに追加してはいけません。送信用キーは公開用なのでコードに残せます。

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.

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!"
}

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

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

1. リクエスト。Networkタブにhttps://formgong.com/submitへのPOSTがあり、応答にsuccess: trueが含まれること。
2. 記録。そのフォームのFormgong受信箱に、全フィールド付きで問い合わせが現れること。
3. メール。Freeでは、アカウント所有者のタイムゾーンで翌朝08:00の日次ダイジェストとして、宛先1件に届きます。ProとBusinessでは各リードが個別のメールになります。迷惑メールも確認してください。
4. Telegram。TelegramはFreeを含むすべてのプランで即時です。チャットを接続していれば、そのチャットに届きます。

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

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

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

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

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

成功が出るのにリクエストがない

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

コードにfk_your_access_keyが残っている

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

エラー後に入力が消える

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

Turnstileを有効にしたら壊れた

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

記録はあるのにメールが来ない

所有者と受信者のメール確認を調べてください。未確認のアドレスは配信先になりません。詳細は配信の切り分けガイドへ。