Googleフォームを使ってみる&カスタマイズしてみる


[まとめ] 現在開催中のKindleセール情報はこちら

いつか試そう試そうと思っていたGoogleフォームを使ってWebページに埋め込むのを試してみました。

通常のGoogleフォームの使いかた

form1

form2

  • 「フォームを送信」→「埋め込む」→ 表示されるiframeをコピー

  • 表示したいページのhtmlに貼付ける

form3

お手軽ですね。

通常であればデフォルトのフォームで問題ないですが、表示のカスタマイズをしたい場合はどうするのかと思い調べてみました。

表示をカスタマイズしてみる

  • 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>
    
  • 表示したいページに貼付ける

form5

CSSが読み込まれなくなったので表示が崩れています。

  • cssをカスタマイズする
    <style type="text/css">
      .ss-form  {
        color: #f00;
      }
    </style>
    

form6

すごく適当なCSSですが、このような感じでフォームに対するCSSを書いていけば表示のカスタマイズができます。

フォーム入力画面がカスタマイズできたのでフォーム完了画面もカスタマイズしてみたくなりました。

結果画面をカスタマイズしてみる

デフォルトだと以下のような固定画面になってしまいます。

form4

できればオリジナルの投稿完了画面に遷移させたい、という場合

  • 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 フォームでのみ回答を保存する」を選択しましょう。

参考

[まとめ] 現在開催中のKindleセール情報はこちら