前回は、GoogleフォームのフロントUIに成り代わる独自のフォームを作成するところまで紹介しました。

この記事では、独自フォームとGoogleフォームを紐づける最後の部分を紹介します。

④Googleフォームとhtmlを紐づける

このステップが今回の醍醐味です。

紐づけは、Googleフォームとhtmlの紐づけと、項目の紐づけの2つがあります。

●Googleフォームとhtmlの紐づけ

まずはフォーム編集画面からフォームを公開します。

※公開しても、回答用のリンクを知っている人しかアクセスできません。

公開中のフォームは、右上の「公開」アイコンが下記のように表示されます。

リンクのアイコンをクリック、URLをコピー、回答用ページにアクセスします。

回答用ページで”F12”キーを押して開発ツールを開き、Elementsタブで「formResponse」を検索します。

この<form action>に含まれるURL（https://**********/formResponse）をコピーし、htmlの<form action>に設定します。

これでGoogleフォームとhtmlの紐づけができたので、次は項目の紐づけをしていきます。

●項目の紐づけ

お客様が入力する項目（input）の紐づけを行います。

回答用ページの開発ツールで「entry.」を検索すると、質問数に応じた<input>が見つかります。（質問が4つあれば、inputも4つあります。）

この<input>に含まれる”entry.*******”を、htmlの各質問に含まれるnameの値として設定します。

しかし、質問の順に<input>が並んでいるとは限らないため、どのentryがどの質問に対応しているかを確認する必要があります。

【確認方法】

　①回答用のページから仮の回答を入力し、フォームを送信します。

　②送信後のページで開発ツールを開きます。

　③”Network”タブに表示されたリクエスト（formResponse）をクリックします。

　④”Payload”タブで、entryと質問の対応を確認できます。

対応が確認できたので、htmlで各nameの値を設定します。

これで紐づけも完了です。

htmlをお客様向けに公開することで、問い合わせの受付を開始できます。

問い合わせ内容の確認方法

お客様から送信された問い合わせ内容は、フォーム編集画面の「回答」タブやスプレッドシートで確認できます。

まとめ

Googleフォームの見た目をおしゃれにする方法をご紹介しました。

htmlを書いたり、紐づけをしたり、一見複雑そうに思えるかもしれませんが、フォームをイチから作成する手間を考えると、Googleフォームの手軽さと独自デザインにできる自由さのいいとこどりではないかと思います。

流行りの生成AIを使えば、htmlやcssを書いたことがなくても大丈夫です。

ぜひ、Googleフォームにひと手間加えて、おしゃれなフォーム作りにチャレンジしてみてください。

次回は、フォームの回答受付期間の設定についてご紹介します。