2020年6月24日追記

Googleフォームの仕様変更に伴い、ソースコードに変更があります。
仕様変更後のソースコードに対応した最新のGoogleフォームのデザインカスタマイズ方法はこちらです

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

 

以下は仕様が変わっております。

だれでも簡単にフォームが作れるグーグルフォーム。とても便利だけど、デザインがいじれないのでサイトのイメージを壊しちゃう。デザイン的にどうしても…　という人も多々いると思います。

Googleフォームは思いのほか簡単にカスタマイズできるので、その手順をご説明します。

WEB素人の方でもそれほど難しくはないと思いますので、ぜひトライしてみてください。

まずはフォームを作る

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

この時に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から始まる文字列（アンダーラインの部分）をコピーしてメモ帳などにペーストしておく

1. <form action="https://docs.google.com/forms/u/3/d/e/一部伏せますWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse" target="_self" method="POST" id="mG61Hd">

こんな感じ　しっかり最後の　> まで取ること。

実際は、

1. action="https://docs.google.com/forms/u/3/d/e/一部伏せますWb5vQOWyIdcp6i-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse"

が必要な部分で、ご自分の作られた<form>にこれをきちんと入れられればそれでOKです。
ちょっと怪しかったら<form>を丸ごと入れ替えちゃった方が安心です。

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

同じCtrl+Fで今度は「name」と検索します。「name」と付く文字列はたくさんあるので惑わされないように。　特に、「jsname」という文字列が大量にヒットしてきますが、これではなく「name」なので、検索後色が変わったnameの文字の前にjsがついていたらそれは無視して、次へ次へと進んで「name」だけの文字列を探します。

見つけたいのは「name=”entry.1234567890“」のような文字列

nameを探していくと、name=”entry.1234567890“　のような文字列が見つかります。少し前の方を見てみると「お名前」という文字が見つかります。要するに、このname=”entry.1234567890“　がフォーム項目の「お名前」に紐づくというわけです。

これを各項目ごと、今回の場合「お名前」「フリガナ」「電話」「その他お問い合わせ」の4つの項目があるので、それぞれ探していき、再度メモ帳などにコピペしておきます。

name=”entry.1234567890“　の　1234567890　の部分は、あくまでこのサンプルですので、皆さんのフォームのものに変更してください。

form action と name を、最初に作った（デザインした）オリジナルのフォームに埋め込む

Googleフォームではなくて、オリジナルで作ったフォームのソースに、メモ帳にコピーしておいた文字列を埋め込みます。

サンプルのこれの場合は

1. <form action="https://docs.google.com/forms/u/3/d/e/一部伏せます-dIAFodUAQhT5bwoWPl_9DzsALjzoGA/formResponse" target="_self" method="POST" id="mG61Hd">
2. <ul>
3. <li> お名前 <input name="entry.77882638" type="text" required="required" id="textfield" class="g_form" placeholder="お名前"> </li>
4. <li> <label for="textfield2">フリガナ</label> <input name="entry.723652145" type="text" required="required" class="g_form" id="textfield2" placeholder="フリガナ"> </li>
5. <li>電話 <input name="entry.548523698" type="text" class="g_form" id="textfield3"placeholder="電話番号"> </li>
6. <li>その他お問い合わせ等<textarea name="entry.147412369" required class="g_form_text" id="entry.147412369" 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やクラスなどは、このサンプルを成形するためだけにあるものなので、皆さんのフォームには必要ありません。

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