【Googleフォーム自分用メモ】GoogleフォームのCSSカスタマイズ方法

##Googleフォーム概要

• Googleフォームは、Googleが無料で提供するアンケート作成＆集計ツール。
• Googleのアカウントさえ持っていれば利用でき、ブラウザ上で簡単な操作をするだけでアンケートやコンタクトフォームを作成できる。Googleフォーム公式

デメリット

• ブラウザ上で作成したフォームではデザインに限界がある。

しかし、Googleフォームに自身のCSSを適応させる事で、最適なレイアウトで作成できデメリットも無くなる。

設定方法

1. HTMLで作成したフォームと同じ構図のフォームをGoogleフォームで作成する。
2. Googleフォーム画面でChromeの検証機能を使い、Googleフォームの「Action(formResponseで終わるURL)」と「各inputのnameの値(entry.xxxxxの箇所、リンクを展開していくとわかりやすい)」を取得し、HTMLフォームに挿入する。
3. ActionURLと各inputのnameの値をHTMLのフォーム画面に追記する。

以上で動かすことはできるが、「送信ボタン」を押すとGoogleフォームのサンクスページに遷移する為、自作のサンクスページにリンク先を変更させる。 今回はjQueryのajaxを使用した。作成したinputページに以下のjQueryを追加する。

function postToGoogle() {
//フォームの値を取得
var field1 = $('[name="entry.xxxxxxxx"]').val();
var field2 = $('[name="entry.yyyyyyyy"]').val();

$.ajax({
url: "googleフォームのactionの値",
data: {"entry.xxxxxxxx": field1,"entry.yyyyyyyy": field2
},
          type: "POST",
          dataType: "xml",
          statusCode: {
              0: function() {
                  //Success message
location.href="サンクスページのパス";
              },
              200: function() {
                  //Success Message
location.href="サンクスページのパス";
              }
          }
      });
      }

送信ボタンに関数を設定する

<input type="button" onClick="postToGoogle()" value="送信">

##あとがき
GoogleフォームのCSSカスタマイズ方法を自分用に忘れない為にまとめました。
Googleフォームはスプレッドシートと紐付けてデータの管理が容易にできるので、この方法は覚えておいて損はなさそうですね