📄

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

2022/03/10に公開約6,200字

はじめに

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>idclassなどは,このサンプルを成形するためだけにあるものなので皆さんのフォームに必ず必要であるというわけではありません.

完全版ダウンロード

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

GitHub

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

おわりに

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

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

Discussion

ログインするとコメントできます