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 件のコメント:
コメントを投稿