Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Google 小技集

Googleドライブのフォーム機能は初期値をセットできる

投稿日:


2013-06-26_google_form_default_00
とても便利なのにあまり知られていないらしいことが分かったのでエントリー。
Googleドライブのフォームは本当に便利で、アンケートやお問い合わせフォームが本当にサクッと数分でできちゃいます。以前書いたGoogleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信という記事を参考にすれば自動返信メールなんかもできちゃうしいちいちプログラムを書くこと無く、大体のことはできちゃいます。
んで、このGoogleフォームですがURLにあるパラメータを付与すると入力欄に初期値をセットした状態にできるんです。

入力欄のIDを調べる

Googleフォームで作成された入力欄には全て一意なIDが付与されているのでまずはそれを調べます。ブラウザでHTMLソースを開いてもいいですが、Google ChromeやFirefoxでFireBugを利用している場合は「要素の検証」などで調べると簡単です。
Google Chromeの場合の手順ですが、
2013-06-26_google_form_default_01
↑対象の入力欄の所で右クリック→「要素の検証」
2013-06-26_google_form_default_02
↑開発者用のデバッグツールが開いて対象のフォーム要素が選択されているので「id=”entry_*****”」の部分を探します。
例では、「entry_148468387」がIDとなります。

入力欄のIDをパラメータに追加する

さて、IDが分かったらそれをライブフォーム(公開されているフォーム)のURLに追加するだけです。

https://docs.google.com/forms/d/XXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform

↑こんなURLの場合は
↓後ろのGETパラメータとして追加します。

https://docs.google.com/forms/d/XXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?entry_148468387=URLエンコードした初期値

2013-06-26_google_form_default_03
こんな感じで初期値が入った状態で開けます。

複数選択肢の場合はパイプでつなげる

Googleフォームはラジオボタン、チェックボックス、プルダウンなどの選択肢型も作成できます。
入力ではなく選択型のフォームにも選択肢のラベルをURLエンコードして渡せば選択された状態にできます。
2013-06-26_google_form_default_04
では、上のように複数選択できる場合はどうしたらいいかというとパラメータをパイプ「|」でつなげて複数渡せます。

https://docs.google.com/forms/d/XXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?entry_1796745666=%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%201|%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%203

選択肢の1番目「オプション 1」と3番目「オプション 3」をURLエンコードしたものをパイプでつなげて渡してみました。
2013-06-26_google_form_default_05
ちゃんとチェックされた状態になりましたね!

まとめ

Googleフォームをお問い合わせフォームに使ったりしている場合が結構あると思いますが、1つのフォームで「お問い合わせの種類」を「資料請求」「ご予約」「取材申し込み」「その他のお問い合わせ」などから選択する方式を取っているケースをよく見ます。資料請求ページからお問い合わせフォームに飛ばす場合は、予め資料請求にチェックがついている状態で表示されたほうが1クリック分ユーザーが楽になりますので、小さい配慮ですがやっておきたいところですよね。

-Google, 小技集

執筆者:

関連記事

「TwitterFollowBadge」がIEで見れない件の対応方法

なんか、近くで嘆きの声が聞こえた気がするので(w)さらっと書いときます。 TwitterFollowBadgeっていう、ブログのサイド(右か左)にはれるTwitter用のブログパーツがあるんだけど、こ …

MTの管理画面にSBM被ブックマーク数画像を表示するプラグイン

以前から下記MTプラグインを入れてMTの管理画面にはてブのブクマ数を表示しています。 ・Milano::Monolog: AddHatenaBookmarkUserNum v0.2 なんですが、最近S …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第3回:自分探しの旅は一周して写真に回帰

昨日は、ネタフルのコグレマサトさん主催、視覚マーケティングのススメの著者で鬼コーチこと(w)ウジトモコさんを講師に迎えての勉強会の第3回に行ってきました。 これまで、第1回では1枚絵で、第2回ではテー …

no image

Delicious画像APIが過負荷で繋がりにくい場合のJavaScriptで対応方法

以前に、ボクが作って公開したDeliciousのブックマーク数を画像で表示するAPIですが、 ・Delicious2.0 の被ブックマーク数画像取得APIを作りました [C!] ありがたい事にものすご …

スポンサードリンク

スポンサードリンク