最新版【仕様変更対応済み】Googleフォームを好きなようにカスタマイズする方法

公開日：

最終更新日:2024/05/02

2018年11月に「Googleフォームのデザインを好きなようにカスタマイズする方法」
https://www.gorilla-web.net/google_form_custom/
という記事を書いたのですが、Googleフォームの仕様が変更となりソース自体が変わっておりましたので、最新ソースコードでのカスタマイズ方法をお知らせします。

途中までは以前と同じです。

まずはフォームを作る（以前と変わりません）

このフォームはグーグルではありません。自分の独自のフォームで構いません。項目だけはグーグルフォームと合わせるので同じように作成してください。

この時にCSSでデザインなどもしておくと良いでしょう

サンプルでこんな感じのフォームをつくっていきたいと思います。

→Googleフォームカスタマイズ デモはこちら

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>にこれをきちんと入れられればそれでOKです。
ちょっと怪しかったら<form>を丸ごと入れ替えちゃった方が安心です。

 

↓ここからが以前と変わった部分です↓

②各フォームのnameを見つける

同じCtrl+Fで今度は項目名を探します。

例えばフォームの項目がサンプルのように「お名前」「フリガナ」「電話番号」「ご質問等」という項目だったとします。この場合Ctrl+Fの文字列検索で「お名前」や「フリガナ」等を探してください。

見つけたいのは以下のような文字列

  1. [[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フォームではなくて、オリジナルで作ったフォームのソースに、メモ帳にコピーしておいた文字列を埋め込みます。

通常のフォームのソースは

  1. <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. も忘れずに入れましょう。

サンプルのこれの場合は

 

  1. <form action="https://docs.google.com/forms/u/3/d/e/1FAIpQLSeLFWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse" target="_self" method="POST" id="mG61Hd">
  2. <ul>
  3. <li> お名前 <input name="entry.1227783954" type="text" required="required" id="textfield" class="g_form" placeholder="お名前"></li>
  4. <li> <label for="textfield2">フリガナ</label> <input name="entry.725860636" type="text" required="required" class="g_form" id="textfield2" placeholder="フリガナ"> </li>
  5. <li>電話 <input name="entry.549386162" type="text" class="g_form" id="textfield3"placeholder="電話番号"> </li>
  6. <li>その他お問い合わせ等<textarea name="entry.1419996808" required class="g_form_text" id="entry.952897594" placeholder="その他お問い合わせ"></textarea> </li>
  7. <li><input type="submit" class="btbt"></li>
  8. </ul>
  9. </form>

こんな感じ。

<form> タグに　コピペしたaction を入れる。

<input >にそれぞれ該当する　name を入れてあげる。

そいう形で、自作のフォームとGoogleフォームが連動して、動作するようになります。

これだけ。

一見複雑に見えますが、自作のフォームの　form と、それぞれの項目のinput に、Googleフォームのソースを埋めてあげるだけで動作します。

どのみちフォームを入れる場合、PHPやCGIを作って（もしくは拾ってきたとしても）、そのCGI内部などを書き換えて、サーバーの任意の位置にアップして、フォームを載せたページからパスを通して、CGIのパーミッションも設定して…　と様々な工程があるので

そうしたCGIなどの準備やサーバーへのアップロード、設定などが無い分こちらの方が楽かと思います。

<form>と<input>に必要なソースを入れてあげるだけなので、デザインも好きなようにできます。

一度お試しください。

補足

  1. placeholder="お名前"

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

  1. required="required"

これを入れると必須項目になります。

どこにどんな感じで入れれば良いかは、上記のソースをご確認ください。

念のため、上記の完成したソースの

<ul>や<li>、IDやクラスなどは、このサンプルを成形するためだけにあるものなので、皆さんのフォームには必要ありません。

好きなようにデザインしていただいて結構です。

 

Categorised in:

written by 中島 泰良