自前の入力フォーム画面を利用してGoogleフォームにPOSTする

Googleフォームを使ったフォームの作成があって、先輩方から有益な情報を得たので備忘録兼方法の一つとして書きとどめておきます。

作成しておいたGoogleフォームに直接POSTすることで、自分で作成したフォームからでもGoogleフォームに入力を送れる&データとして記録されるというものです。

(この実装はだいぶ強引なので、実際に利用する際には自己責任でおねがいします。)

手順

1- Googleフォームを作る

まずは適当にフォームを作りましょう。今回この記事書いてるのがGW最終日ということで、、、

form01

こんな感じになりました。

作成後、必要があればスプレッドシートに回答が集計されるようにしてください。
「回答」タブ→スプレッドシートのアイコン→「作成」 で作成できます。

fomr02

スプレッドシートが出来ました。
spreadsheet01

回答を送信すると、スプレッドシートとフォームのほうで集計がおこなわれます。

fomr04
spreadsheet02

2- name属性を取り出す

次に、フォームのプレビュー画面などを開いて、開発者ツールで<input type="hidden" name="entry.~">を探します。
基本的には各入力タイプごとにラップしてる<div>内の位置的に下の方にあります。

googleformtest

これを各項目ごとにメモっておいてください。
ついでに、URLもどこかにメモってください。

3- 自前フォームを作る

Googleフォームで作成した項目をもとに、自前でフォーム画面を作成します。

実際に作ったものがこちらになります。

See the Pen Google Form test through POST by be-into (@be-into) on CodePen.

4- nameやactionにGoogleフォームのものを入れる

この自前のフォームに、先ほどメモっておいたGoogleフォームのname属性やURLを入れていきます。

やることは主に以下のとおりです。

  • name属性: 各フォームのname属性にいれる
  • URL: <form>のaction属性に「https://docs.google.com/forms/d/<英数字の羅列>/formResponse」と置き換えて入れておく
  • <input>のvalue属性をGoogleフォームと同じものにする(違っていると送信はされるがスプレッドシート等に反映されなくなるので注意)
  • <form>のtarget属性にiframeを指定し、その<iframe>visibility:hidden;などで非表示にする
  • <form>のmethod属性をPOSTに指定

5- 動作確認

実際に送ってみる。

ちゃんと反映されています。
(テストで何回か送っているのはみなかったことに)

さいごに

Googleフォームの半ば強引な使用例でした。

セキュリティやバリデーションなどのフォームとしての機能は別途追加していく必要がありますが、サーバー側の実装がほとんど必要ないので簡単にフォームを作ることが出来そうです。

ちなみに僕のゴールデンウィークは、映画を借りて観たり同期とお酒を呑んだり高校の友達とダラダラしたりと楽しかったです。

  • BLOG
  • >
  • web
  • >
  • 自前の入力フォーム画面を利用してGoogleフォームにPOSTする