ch
chachat.page/ヘルプ

回答データの連携

FormMailerに回答を送る

FormMailerの管理画面からコピーしたフォームHTMLをビルダーに貼り付けるだけで、姓・名・メールアドレスなどの質問ブロックと、FormMailer連携（送信先の設定）をまとめて自動生成できます。

FormMailerは通常、送信後に確認画面→完了画面へ遷移する2段階の仕組みです。chachat.pageからの送信はサーバー側から直接1回だけPOSTするため、訪問者はこの確認画面を経由しません。FormMailerの管理画面でフォームの「確認画面を表示しない」設定を有効にしてください。有効にしないと、送信が確認画面止まりとなり、通知メールの送信などの完了処理が行われない場合があります。

  1. 1. FormMailerで確認画面を無効にする

    FormMailerの管理画面でフォームの設定を開き、「確認画面を表示しない」（確認画面を使わない）設定を有効にしてください。この設定がFormMailer側で有効になっていることが、以降の手順が機能するための前提です。

  2. 2. フォームのHTMLコードをコピーする

    FormMailerの管理画面から、フォームの埋め込み用HTMLコード一式をコピーします。keyのhiddenフィールドを含む、フォーム全体（<form>〜</form>）をそのままコピーしてください。

  3. 3. ビルダーでHTMLを貼り付ける

    ビルダー左側の「ブロックを追加」パネルにある「FormMailerのHTMLから作成」ボタンを押し、コピーしたHTMLを貼り付けて「解析する」を押します。

    姓・名・メールアドレス・性別・生年月日・住所・電話番号などの項目ごとに質問ブロックが生成され、それぞれにFormMailer側の項目名（field_XXXXXXX_seiのような固定のname）が「外部送信用name」として自動で設定されます。プレビューを確認し、「この内容で追加」を押すと、ブロックの追加とFormMailer連携（keyの登録）が同時に行われます。

  4. 4. ラベルや項目名を必要に応じて調整する

    自動生成されたラベルや選択肢は目安です。質問文はブロックの「ラベル」欄から自由に編集できます。「外部送信用name」欄は、FormMailer側のフィールド名と完全に一致している必要があるため、通常は変更不要です。FormMailer側でフォームを修正した場合は、変更後の項目に対応する箇所だけ手動で「外部送信用name」を修正してください。

  5. 5. 連携設定を確認する

    ビルダーの「設定」タブ →「外部サービス連携」→「FormMailer」カードに、手順3で読み取った連携キー（key）が自動入力され、有効になっていることを確認してください。「テスト送信」でFormMailer側に疎通確認用の送信が届くことも確認できます。

  6. 6. 実際にチャットを最後まで回答して確認する

    公開ページで実際にチャットに回答し、FormMailer側に通知メールや回答一覧が届くことを確認してください。届かない場合は、手順1の「確認画面を表示しない」設定が有効になっているか、あらためて確認してください。

FormMailer側でフォームを後から修正した場合

HTMLの貼り付けはその時点のフォーム内容をもとにブロックを新規追加する一回限りの操作です。既存のブロックを自動で更新・削除することはありません。FormMailer側で項目を追加・変更した場合は、更新後のHTMLをあらためて貼り付けて新しいブロックを追加し、不要になった古いブロックは手動で削除してください。

送信しているのにFormMailerに届かない場合の調べ方

回答の送信は、訪問者のブラウザからではなく、公開ページ→form-relayWorker（workers/form-relay）→FormMailerという経路でサーバー側から中継されます。「chachat.page上では送信できたように見えるのにFormMailer側に届かない」場合は、この中継経路のどこで止まっているかをログで特定するのが最も確実です。

  1. 1. 連携設定そのものを確認する

    ビルダーの「設定」→「外部サービス連携」→「FormMailer」カードで、フォームキー・送信先URL・有効化(enabled)が正しいことを確認してください。JSONインポートで作成したページは連携設定を含まない（ブロックの「外部送信用name」とは別のテーブルで管理している）ため、インポート直後は連携が未設定のことがあります。

  2. 2. Workerのログを見ながら実際に送信する

    workers/form-relayディレクトリで下記コマンドを実行し、ログを表示させた状態で、実際に公開ページの診断フローを最後まで回答して送信します（本番と個人のローカル開発環境では見るログが異なります）。

    # 本番Worker（relay.chachat.page）のログを見る場合
npx wrangler tail --env production

# ローカルのwrangler devを起動している場合は、
# そのターミナルにログがそのまま出力されます

  3. 3. ログの内容から止まっている箇所を切り分ける

    ログに出る内容によって、原因の見当がつきます。

    • form-relay: failed to load integrationsが出る → SupabaseのURLやサービスロールキーの設定ミスで、連携情報そのものを読み込めていません。
    • 連携のdispatchログ自体が出ない → 該当ページの連携がenabled=falseになっているか、ページIDの不一致でSupabase側に連携行が見つかっていません。
    • form-relay: form_mailer submission did not receive the expected 302 redirect（status: 400など）が出る → FormMailer自体がリクエストを拒否しています。このログにはbodyとしてFormMailerが返した実際のエラーページ本文（最大2000文字）が含まれるので、そこに書かれている具体的な理由を確認してください。
    • form-relay: integration delivery failedが出る → ネットワークレベルの通信失敗です。
実例：あるページでは他の連携（スプレッドシート等）は正常に届いているのにFormMailerだけ400で拒否されていました。上記のログに含まれる本文から、FormMailer側の必須項目に対応する回答の値が不足・不一致であることが判明し、該当ブロックの選択肢や「外部送信用name」を修正して解決しました。