個人開発アプリの問い合わせ窓口をGoogleフォームで作り、外部リンクではなく自分のサービスやLPに埋め込みたい場合、貼り付けるHTMLコードを取得するだけでは動かないことがあります。Googleフォーム側の設定次第で、埋め込み自体ができなかったり、埋め込んだ枠の中でユーザーが先へ進めなくなったりするためです。Googleフォームを問い合わせ窓口として使うかどうかの判断はGoogleフォームとアプリサポートUXの違いに譲り、ここでは埋め込む前提で設定すべき項目を順に確認します。
メールアドレス収集は「回答者が入力」にする
問い合わせに返信するには、送信者のメールアドレスが必要です。フォームの設定（歯車アイコン）から「回答」タブを開き、「メールアドレスを収集」の方式を選びます。
Googleの公式ヘルプによると、この収集方式には次の2種類があります。
- 確認済み：回答者のGoogleアカウントのメールアドレスを使うため、回答者はGoogleアカウントでのログイン確認を求められる
- 回答者が入力：回答者が自分でメールアドレスを手動入力する方式で、ログインは不要
問い合わせフォームの訪問者は必ずしもGoogleアカウントでログインしているとは限らないので、「確認済み」を選ぶとログインを求められた時点で離脱するユーザーが出てきます。埋め込みで使う問い合わせフォームでは「回答者が入力」を選んでください。
埋め込み用HTMLを取得する
メールアドレスの収集方式を決めたら、埋め込みコードを取得します。Googleの公式ヘルプの手順は次のとおりです。
- Googleフォームでフォームを開く
- 右上のその他メニュー（︙）をクリックする
- 「HTML を埋め込む」を選ぶ
- 表示されたHTMLをコピーする
- 自分のサービスのHTMLに貼り付ける
生成されるコードはwidth="640" height="847"のように固定サイズになっています。自分のサービスの幅に合わせてwidth: 100%に変更し、heightは質問数や添付欄を考慮して余裕を持った値にしておくと、枠が足りず下部が見切れる事態を避けやすくなります。
ファイルアップロード質問があると埋め込めない
問い合わせに写真やスクリーンショットの添付を必須にしたい場合は注意が必要です。ファイルアップロード質問を含むフォームで「HTML を埋め込む」を選ぶと、Googleの実際の表示にあるとおり、埋め込み不可を知らせるメッセージが出て、埋め込み用のHTML自体が生成されません。
添付を必須にしたい問い合わせでは、次のどちらかを選ぶことになります。
- 埋め込みをあきらめ、フォームのURLをリンクとして案内する
- 添付は求めず、最初は文章だけで受け付け、必要なときだけ個別に送付方法を案内する
ログイン画面はiframeの中に表示できない
「確認済み」のメールアドレス収集やファイルアップロード質問を残したまま埋め込むと、回答者はフォームの記入中にGoogleへのログインを求められる場面に当たります。ところがGoogleのログインページはiframe内での表示を拒否する設定になっているため、埋め込み枠の中ではログイン画面が真っ白のまま表示されず、ユーザーはそこから先へ進めなくなります。
埋め込んだフォームを一度、ログインしていないブラウザ（シークレットウィンドウなど）で開いて最後まで送信できるか確認しておくと、この種の詰まりに気づけます。
組織のGoogle Workspaceアカウント限定でフォームを作成した場合も、回答者にログインを求める設定になっていないか合わせて確認してください。
埋め込みに向かないと分かったときの選択肢
次のいずれかに当てはまる場合は、iframeでの埋め込みにこだわらず、フォームのURLをリンクとして案内するほうが早く安定します。
- 添付を必須にしたい問い合わせがある
- 自分のサービス側にCSPやページビルダーの制約があり、
<iframe>の追加が難しい - シークレットウィンドウでの送信確認が通らない
IndieFormはこれらの制約を踏まえて埋め込みを許可している
Googleフォームを埋め込む場合、メールアドレス収集方式の選択、ファイルアップロードの制限、ログイン画面の扱いといったフォーム側の設定に気を配る必要があります。IndieFormの公開フォームURL（https://indieform.app/contact/{slug}）は、開発者が自分のサービスへ設置することを前提に埋め込み元を制限していないため、発行されたURLをそのまま<iframe>のsrcに渡すだけで、ログイン要求や埋め込み不可のメッセージを気にせず設置できます。
添付ファイルの受け取りやアプリごとの問い合わせ管理まで必要になったときは、Googleフォームの埋め込みを直しながら運用するか、専用フォームへ切り替えるかを比較検討してください。