Google Formの背景を変更したりcssでカスタマイズする方法

スクリーンショット 2012-05-29 6.23.14

Googleのフォームの背景色を変えて、ブログやサイトになじませる方法です。他にも、フォントのcolorなどを変更できます。

方法は簡単で、iframeのsrc要素の最後にパラメータを付けて実現できます。

もともと:
https://docs.google.com/spreadsheet/embeddedform?formkey=<ID>

カスタマイズ後:
https://docs.google.com/spreadsheet/embeddedform?formkey=<ID>&bc=f1f1f1&tc=666666&lc=0A8DC7&f=serif

ここでは、

  • 背景を#f1f1f1
  • テキストの色を#666
  • リンクの色を#0A8DC7
  • フォントをserif

にしています。

方法

  • pli=0 – なんのパラメータだか分かりません><
  • ttl=1 – “0”を指定するとタイトルが出なくなる。
  • bc=F6D478 – 背景。6桁のRGB値
  • f=Comic Sans MS – フォント指定
  • tc=c00 – テキストのcolor
  • htc=666 – 補足文の色
  • c=090 – リンクの色。リンクはフッターにある。補足文などで足したときもこの色になる
  • hl=en-gb – 言語指定

サンプルです。

もともと:(このブログは背景が白なので、こちらのほうが馴染みますが。。)

カスタマイズ後:

*外枠の薄い線は、iframeの外側です。

言語指定のパラメータなどは、こちらでご確認を!
http://www.ryenats.org.uk/test-form.htm

↓ プラグインを作る方々への本、書きました。 ↓

“Google Formの背景を変更したりcssでカスタマイズする方法” への 2 件のフィードバック

  1. とてもご参考になりました。ありがとうございました。送信後のフォントが変更できないのが残念です。。

  2. 探していたら西川さんのサイトにたどり着いてびっくりしました!Googleフォームはよく使うので、今度試してみますー。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です