2020年6月24日 11:28 am

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

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