Googleフォームを使ってみる＆カスタマイズしてみる
いつか試そう試そうと思っていたGoogleフォームを使ってWebページに埋め込むのを試してみました。
通常のGoogleフォームの使いかた
- Googleドライブでフォームを作成
「フォームを送信」→「埋め込む」→ 表示されるiframeをコピー
表示したいページのhtmlに貼付ける
お手軽ですね。
通常であればデフォルトのフォームで問題ないですが、表示のカスタマイズをしたい場合はどうするのかと思い調べてみました。
表示をカスタマイズしてみる
iframeのsrcに記述されているURLにアクセス
ソースコードを表示
formタグがあるあたりから利用規約のあたりまでのソースをコピー
<div class="ss-form"><form action="https://~
・・・
<a href="http://www.google.com/google-d-s/terms.html">追加規約</a></div></div></div></div>- 表示したいページに貼付ける
CSSが読み込まれなくなったので表示が崩れています。
- cssをカスタマイズする
<style type="text/css">
.ss-form {
color: #f00;
}
</style>すごく適当なCSSですが、このような感じでフォームに対するCSSを書いていけば表示のカスタマイズができます。
フォーム入力画面がカスタマイズできたのでフォーム完了画面もカスタマイズしてみたくなりました。
結果画面をカスタマイズしてみる
デフォルトだと以下のような固定画面になってしまいます。
できればオリジナルの投稿完了画面に遷移させたい、という場合
formのあるページにscriptタグと非表示のiframeを追加する
サンプルでは投稿完了画面URLへリダイレクトするように設定
formタグのtarget="_self"となっている部分をiframeのnameに合わせる
formタグのonsubmitを設定する
まとめると以下のようになります。
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='http://投稿完了画面URL"></iframe>
<form action="https://~" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true">投稿完了画面へ遷移した結果を非表示のiframe内に表示することでユーザからは結果画面を見えなくし、その後投稿完了画面へリダイレクトするようにしています。
- 投稿完了画面を作る
これで結果画面のカスタマイズができました。
まとめ
調べてみてGoogleフォームは色々カスタマイズすることができました。
ただ、フォームのカスタマイズはGoogleの規約的に問題ないのかという部分はきちんと調べられていないのでカスタマイズは自己責任でお願いします。
Googleフォームの制限に関して追記
公式ドキュメントには以下のように記述されています。
フォームに大量のトラフィックや多数の回答が予測される場合、スプレッドシートに保存できるのは回答値の最初の 400,000 セルのみのため、Google フォームで回答を保存することをおすすめします。フォームの概要ビューや CSV でダウンロードしたファイルには、送信されたすべてのフォーム回答が常に反映されます。
フォーム作成時に、スプレッドシートに回答を保存するか「Google フォームでのみ回答を保存する」か選べますが、大量の回答を保存する際はスプレッドシートではなく「Google フォームでのみ回答を保存する」を選択しましょう。