2018年11月に「Googleフォームのデザインを好きなようにカスタマイズする方法」
https://www.gorilla-web.net/google_form_custom/
という記事を書いたのですが、Googleフォームの仕様が変更となりソース自体が変わっておりましたので、最新ソースコードでのカスタマイズ方法をお知らせします。
途中までは以前と同じです。
まずはフォームを作る（以前と変わりません）
このフォームはグーグルではありません。自分の独自のフォームで構いません。項目だけはグーグルフォームと合わせるので同じように作成してください。
この時にCSSでデザインなどもしておくと良いでしょう
サンプルでこんな感じのフォームをつくっていきたいと思います。
Googleフォームでフォームを作る（以前とかわりません）
※Googleアカウントは既に取得済みの前提で進めます。Googleアカウントは全て共通ですので、Gmail、Googleカレンダーなどを利用している人はそのままそのアカウントが利用できます。
Googleフォームへアクセス。→「Googleフォームを使う」をクリック→次の画面左上の「新しいフォームを作成」の「空白＋」をクリック
必要な項目を作っていきます。
名前やフリガナなど、1行のテキストは「記述式」。お問い合わせ内容など複数行のテキストは「段落」をクリックします。
ラジオボタンやチェックボックス、プルダウンはその名の通りです。これらも利用できますが、ここでは省きます。
ちなみに「お名前」などよくある項目を作ると自動的に「記述式」などが選択されます。
これを繰り返し、必要項目を一通り作ります。
Googleフォーム完成
とりあえずフォームは出来ました。これでもう使うことはできます。
しかし、このデザインを何とかしたいんですね
ソースを拾う
できあがったフォームの適当なところを右クリックしてソースを表示します。
サンプルはGoogle Chromeです。
ソースはこんな感じ
ビビらない。
普段ソースをいじくり倒している私でもこれを見ると”ウッ”となりますが、冷静を保ちます。
文字列検索で必要情報を探し出す
ソースが表示されたら「Ctrl」と「F」を押して文字列検索をします。探し出す文字列は2種類。
① <form action
Ctrl+Fで「 <form action」と入力 すると、この文字列のなかから「 <form action」を見つけ出してくれます。
この<form actionから始まる文字列（アンダーラインの部分）をコピーしてメモ帳などにペーストしておく
<form action="https://docs.google.com/forms/u/3/d/e/一部伏せますWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse" target="_self" method="POST" id="mG61Hd">
こんな感じ しっかり最後の > まで取ること。
実際は、
action="https://docs.google.com/forms/u/3/d/e/一部伏せますWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse"が必要な部分で、ご自分の作られた<form>にこれをきちんと入れられればそれでOKです。
ちょっと怪しかったら<form>を丸ごと入れ替えちゃった方が安心です。
↓ここからが以前と変わった部分です↓
②各フォームのnameを見つける
同じCtrl+Fで今度は項目名を探します。
例えばフォームの項目がサンプルのように「お名前」「フリガナ」「電話番号」「ご質問等」という項目だったとします。この場合Ctrl+Fの文字列検索で「お名前」や「フリガナ」等を探してください。
見つけたいのは以下のような文字列
[[267375148,"お名前",null,0,[[1227783954,null,0]項目名を探していくと、上記のような文字列が見つかります。
この[[267375148,”お名前”,null,0,[[1227783954,null,0]の中のオレンジの1227783954の部分がフォーム項目の「お名前」に紐づくというわけです。
おさらいしますと、「お名前」という項目の部分の場合
[[267375148,”お名前”,null,0,[[1227783954,null,0] の文字列の中の 1227783954 が必要になります。
これを各項目ごと、今回の場合「お名前」「フリガナ」「電話」「その他お問い合わせ」の4つの項目があるので、それぞれ探していき、メモ帳などにコピペしておきます。
form action と name を、最初に作った（デザインした）オリジナルのフォームに埋め込む
Googleフォームではなくて、オリジナルで作ったフォームのソースに、メモ帳にコピーしておいた文字列を埋め込みます。
通常のフォームのソースは
<input name="entry.1227783954" type="text" required="required" id="textfield" class="g_form" placeholder="お名前">のようになっていると思います。
name=”xxx” が無ければ入れてあげてください。
この name=”entry.1227783954“ の部分が、Googleフォームのソースコードから拾ってきた文字列となり、オリジナルのフォームだとしてもGoogleのフォームの「お名前」と紐づくというわけです。
拾うのは 1227783954 の数字だけですが、オリジナルのフォームのソースには
“entry.1227783954”
という具合に、entry. も忘れずに入れましょう。
サンプルのこれの場合は
<form action="https://docs.google.com/forms/u/3/d/e/1FAIpQLSeLFWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse" target="_self" method="POST" id="mG61Hd"> <ul> <li> お名前 <input name="entry.1227783954" type="text" required="required" id="textfield" class="g_form" placeholder="お名前"> </li> <li> <label for="textfield2">フリガナ</label> <input name="entry.725860636" type="text" required="required" class="g_form" id="textfield2" placeholder="フリガナ"> </li> <li>電話 <input name="entry.549386162" type="text" class="g_form" id="textfield3"placeholder="電話番号"> </li> <li>その他お問い合わせ等<textarea name="entry.1419996808" required class="g_form_text" id="entry.952897594" placeholder="その他お問い合わせ"></textarea> </li> <li><input type="submit" class="btbt"></li> </ul> </form>こんな感じ。
<form> タグに コピペしたaction を入れる。
<input >にそれぞれ該当する name を入れてあげる。
そいう形で、自作のフォームとGoogleフォームが連動して、動作するようになります。
これだけ。
一見複雑に見えますが、自作のフォームの form と、それぞれの項目のinput に、Googleフォームのソースを埋めてあげるだけで動作します。
どのみちフォームを入れる場合、PHPやCGIを作って（もしくは拾ってきたとしても）、そのCGI内部などを書き換えて、サーバーの任意の位置にアップして、フォームを載せたページからパスを通して、CGIのパーミッションも設定して… と様々な工程があるので
そうしたCGIなどの準備やサーバーへのアップロード、設定などが無い分こちらの方が楽かと思います。
<form>と<input>に必要なソースを入れてあげるだけなので、デザインも好きなようにできます。
一度お試しください。
補足
placeholder="お名前"を入れると、フォームの枠の中に任意の文字列を表示できます。上記の場合「お名前」と表示されます。
required="required"これを入れると必須項目になります。
どこにどんな感じで入れれば良いかは、上記のソースをご確認ください。
念のため、上記の完成したソースの
<ul>や<li>、IDやクラスなどは、このサンプルを成形するためだけにあるものなので、皆さんのフォームには必要ありません。
好きなようにデザインしていただいて結構です。
