こんにちは。CTO の田中(巧)です。
主に社内で引きこもってその他業務や開発作業やしています。

今回は知っているとちょっと便利?で「お?」と思える程度のTips的な内容ですが
Google Formのフルカスタマイズについてご紹介します。
○前提知識
Google Drive の概要、HTML、CSS

Google Formではごく簡単に問い合わせフォームやアンケートフォームを作成できます。
まずは簡単なフォーム作成から。

1

メニューから選択すると新しいタブ(Window)が開き、
タイトルの入力とテーマの選択を求められます。
ここでは画面をフルカスタマイズするので、なるべくシンプルなデザイン
“デフォルト”を選択します。
2
Google Formの作成画面に遷移します。

3

本編とはあまり関係ありませんが、Google Formでは割と多様なUIでのフォーム作成を提供しています。
※画面はとりあえず一通りのUIをシンプルに挿入したところ。
4

これを画面上部のボタンからプレビューすると

5

のようになります。

割と便利なGoogle Formですが画面生成ではいくつか制限があります。
そのうちの1つが画面レイアウトです。
※1例として2013/09/03の執筆現在、Google Formの1つ1つの質問は必ず縦並びにしか配置できていません。

今回はそのレイアウトを次の条件カスタマイズします。
条件
・投稿は通常通り行える。
・カスタマイズの制約を最小限に抑える。

Google Form の画面カスタマイズは次の手順で行うことが可能です。

  1. プレビュー表示する
  2. HTMLソースを保存し余計な部分を削除する
  3. 保存したHTMLファイルをHTML/CSS/JavaScript等で煮るなり焼くなりする

2.から順を追っていきます。(1.は前述参照)
まず、HTMLのソースを保存します。
6
よくオプションで出ているのですがこの時保存するのは「HTMLのみ」です。
「Webページ完全」ではありません。
7

次に、余計な部分を削除します。
極論ですが、いわゆるベースのタグ(html/body)や
フォーム用のタグ(form / input / select )さえ削除しなければすべて削除可能です。

8
余談ですが、入力内容が多いと割と大変です。
この状態でHTMLを表示すると?
9

何も設定されていないことが解ります。
※1:元との紐づきが非常にわかりづらくなるので通常は設問や項目名を残した方が良いです。
※2:ブログなのでしれっとやっていますがこの作業、割と根気がいります。

最後に好きなようにレイアウト、デザインします。
今回はただ単純にCSSを当てはめてみました。

10
文字をほぼ消してしまったので分かりずらいですが、
CSSを適用して、並び順等をテキトウに変えてみました。

こういった感じで作業を進めていくと、ちゃんとした画面が出来上がります。

また、タグの名前やフォームさえ壊さないで(HTTPの通信内容の維持)ができていれば、
このHTMLから直接投稿可能です。

11

12

12

○まとめ
さらっと書きましたが、実はHTMLの編集は結構根性がいります。
ですがその腕さえあれば、SpreadSheetと連携しているという点においてのみピックアップしても
Formの利用は便利と言えます。

是非チャレンジしてみてください。