pages

12/20/2012

簡易カスタマイズをした Google Form を Webサイトに埋め込む

Google Doc のフォームは非常に便利な上に、もちろん無料。

内々のミーティングについてやチーム内でのアンケートなどでは
フォーム作成で生成したページをそのまま利用することが多いのだけれど、
パブリックに開かれたWebサイトにそのまま掲載するのは、デザイン上少しためらわれるところ。

そこで、Webサイトのデザインに合わせて、簡単にカスタマイズしてみることに。

実は、カスタマイズの方法は、簡易的カスタマイズと、深めのカスタマイズがあるようです。
今回は、デザインよりも早くリリースすることが優先に思えたので、簡易カスタマイズをしました。

簡易カスタマイズをした Google Form を Webサイトに埋め込む


1. 通常通り、Embed用コードをコピーして貼り付け


<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=(ID)" width="760" height="4200" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

↑ こんな感じ。
これだと、フォントや背景やらがデフォルトのままで、ブログからあまりに浮いてしまうので、
簡単にカスタマイズ。

2. フォントを変更する


src要素の最後、IDの直後に、パラメータを付与。
"&f=Verdana"
を追加するだけ。

Verdana 好き。

3. 背景を透過にする


これも同じく、パラメータの付与で。

"&bc=transparent"

これでOK。

↓ 仕上がり 

<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=(ID)&f=Verdana&bc=transparent" width="760" height="4200" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Google Formの背景を変更したりcssでカスタマイズする方法 - Shinichi Nishikawa's blog にて、より詳しくパラメータの他の種類についても言及されていて参考になります。

あと、英語だけど、こちら(How do we do this?)も参考に。


深いカスタマイズってやつ(いつかやる)


深いカスタマイズはこちらを参照したものの、今回はcssをいじりたくなかったので、
参照のみでまた機会があればやってみようかと思います。

こっちだと、こんなふうに完全カスタマイズが可能な模様。


1. Google Doc のフォーム編集画面から、フッターにあるURLを右クリックし、ソースを表示させる
2. <form></form>で囲まれた部分をコピー
</form>の後からすぐはじまる、javascriptも、フィールドのバリデーションなので含めておく
3. タグやらcssやらをいじってカスタマイズ

そんな感じっぽい。次回トライ。

0 件のコメント:

コメントを投稿