Google Formを独自のHTMLで実装する

auです。

簡単にアンケートやテストができる、Google Formというサービスがあります。

しかし、フォーマットやUIはある程度決められており、自分のサイトに埋め込むにしても思い通りにできないこともあります。
そこで、Google Formを自分のHTMLに実装する方法はあるのか調べてみました。

やり方

1. Google Formの回答画面でソースを表示する。

2. form action...で始まる文をコピーする
Command + Fでページ内検索をする際に「form action」とやるとすぐに見つかります。

こんな感じの文章があります。

<form action="https://docs.google.com/forms/hoge/formResponse" target="_self" method="POST" id="fuga" jsmodel="hoge fuga" data-response="%.@.[]]" data-first-entry="0" data-last-entry="3" data-is-first-page="true">

3. 問題のIDを取得
同じソース内の下の方に行くと、問題文や選択肢と一緒にこんなものがあります。
この場合、「記述式テスト」の右にある数値(ここでいう0987654321)をそれぞれコピーします。これは各問題のIDのようなものです。

var FB_PUBLIC_LOAD_DATA_ = [null,[null,[[1234567890,"記述式テスト",null,0,[[0987654321,null,0]
]
]

// 中略

4. 自分で作成したHTMLにそれぞれ組み合わせる

<form action="https://docs.google.com/forms/hoge/formResponse" target="_self" method="POST" id="fuga" jsmodel="hoge fuga" data-response="%.@.[]]" data-first-entry="0" data-last-entry="3" data-is-first-page="true">
    <input type="text" name="entry.0987654321"> // nameに「"entry."に2番でコピーしたIDをつける 」
    <button type="submit">送信</button> // 送信ボタンを押せばGoogle Formで回答するのと同様の動作になる
</form>

form actionの部分と各問題のIDがあれば実装できるので意外と簡単ですね。