Zenn
📄

Google Formで作成したフォームをアレンジする（submit後のページ遷移も！）

2022/03/10に公開
HTML
JavaScript
Google
form
Google Forms
tech

はじめに

Google Formで作成したフォームをカスタマイズ（アレンジ）する方法です．
HTML，JavaScriptの知識がある程度ある人を対象にしています．
（※2020年9月現在のGoogle Formの仕様に合わせて書いています．）

デモページ

完成品はこちらから確認できます．（何かテキトーに送ってみてくださいw）

Google Formでフォームを作る

Google Formへアクセスし，フォームを作成してください．

作成したGoogle Formのソースコード確認する

作成したフォームのページへアクセスし，ソースコードを見ます. （WindowsだとCtrl + U, Macだとcommand + option + Uでそのサイトのソースコードを確認することができます．）

ソースコードはこんな感じになっています．

ここで大切なのは，ビビらないこと です．

ソースコードの中から必要な情報を拾う

① form actionを見つける

ソースコードの中から，<form action=・・・・</form>という文字列を検索します．
Ctrl + F（Windows）またはcommand + F（Mac）で<form actionと検索してください．

この中から，

<form action="https://docs.google.com/forms/u/1/d/e/**********/formResponse" target="_self" method="POST" id="******">

の部分をコピーし，メモ帳などにコピペしておきます．
ポイントは，<form actionからid="******"までとることです．

実際には，こんな感じになります．

<form action="https://docs.google.com/forms/u/1/d/e/**********/formResponse" method="POST" id="******" target="hidden_iframe" onsubmit="submitted=true;">

（※submit後のページを指定する都合上，URLの後の部分をmethod="POST" id="******" target="hidden_iframe" onsubmit="submitted=true;"に変更する必要があります．）

② 格要素のnameを見つける

ソースコードの112～113行目あたりまでスクロールします．

[1545406749,"お名前",null,0,[[1374190194,null,1]のような，[数字，"フォームの要素の名前"，null，数字，[[数字，null，数字]と並んでいる部分があるはずです．
今回必要なのは，[1545406749,"お名前",null,0,[[<font color="Orange">1374190194</font>,null,1]の<font color="Orange">オレンジ色</font>で文字に色を付けた部分の数字です．この数字が，フォームの項目（要素）に紐づいているわけです．これを各項目ごと；今回の場合「お名前」「年齢」「お問い合わせ内容」の3つの項目があるので，それぞれ探していき，メモ帳などにコピペしておきます．

実際ののフォームのソースコードは, このようになります.

<input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form" placeholder="お名前">

このように，name="*****" が無ければ入れてあげてください．

この　`name="entry.1374190194"　の部分がGoogleフォームのソースコードから拾ってきた文字列となり，オリジナルのフォームだとしてもGoogle Formの「お名前」と紐づくというわけです．

拾うのは1374190194という数字だけですが，実際に使用するフォームには
entry.1374190194"
という風にentry.も忘れずに入れましょう．

実際のソースコード

<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse"
        method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">

        <ul>
          <li>
            お名前
            <input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form"
              placeholder="お名前">
          </li>

          <li>年齢
            <input name="entry.896360449" required="required" type="number" class="g_form" id="textfield2"
              placeholder="年齢">
          </li>

          <li>お問い合わせ内容<textarea name="entry.427275093" required="required" class="g_form_text" id="textarea"
              placeholder="お問い合わせ内容"></textarea>
          </li>

          <li>
            <input type="submit" class="btbt">
          </li>
        </ul>

</form>

こんな感じです．

一見複雑に見えますが，
<form> タグに　コピペしたaction を入れる．
<input >にそれぞれ該当する　name を入れる．

これだけで，自作のフォームとGoogle Formが連動して動作するようになります．

submitした後の表示ページを指定する

submit（送信）した後に表示されるページを指定していきます．
設定しなくても正常に動作しますが（Google Form既定の「回答を送信しました」というページに飛びます），それでしたらデザインが一貫されないと思いますので，設定することをお勧めします．

必要なことはたった2つだけです．

1つ目[target="hidden_iframe" onsubmit="submitted=true;"]

<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse" method="POST" id="mG61Hd">

の後に，

target="hidden_iframe" onsubmit="submitted=true;"

を挿入します．
つまり，こんな感じ．

<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse" method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">

2つ目[JavaScriptによる制御]

フォームの終了タグ（</form>）の直前に，

 <script type="text/javascript">
          var submitted = false;
 </script>

 <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='thanks.html';}"></iframe>

を挿入します．

つまり，

<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse"
        method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">

        <ul>
          <li>
            お名前
            <input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form"
              placeholder="お名前">
          </li>

          <li>年齢
            <input name="entry.896360449" required="required" type="number" class="g_form" id="textfield2"
              placeholder="年齢">
          </li>

          <li>お問い合わせ内容<textarea name="entry.427275093" required="required" class="g_form_text" id="textarea"
              placeholder="お問い合わせ内容"></textarea>
          </li>

          <li>
            <input type="submit" class="btbt">
          </li>
        </ul>

        <script type="text/javascript">
          var submitted = false;
        </script>

        <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
          onload="if(submitted){window.location='thanks.html';}"></iframe>

      </form>

こうすれば，submitした後のページを指定できます．（※今回の場合はthanks.htmlに飛びます．）

補足

placeholder="お名前"

を入れると，フォームの枠の中に任意の文字列を表示できます．上記の場合「お名前」と表示されます．

required=""

これを入れると必須項目になります．
どこにどんな感じで入れれば良いかは，上記のソースをご確認ください．

上記の完成したソースの<ul>や<li>，idやclassなどは，このサンプルを成形するためだけにあるものなので皆さんのフォームに必ず必要であるというわけではありません．

完全版ダウンロード

完全版（ZIP）のダウンロードはこちらからできます．展開してお使いください．

GitHub

GitHubにも同様のソースコードを掲載しています．[こちら]https://github.com/sekaino-usay/Google_Form_Customize/)から確認できます．

おわりに

Google Formで作成したフォームを自分流にアレンジすることができたでしょうか？

疑問点などがあれば, 僕のTwitter（@sekaino_usay）のDM,またはDiscord（sekaino_usay#4022）に送ってください！

Discussion