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, 小技集

執筆者:

関連記事

さくらのVPSからXSERVERへのサーバー移転に合わせてMovableTypeからWordPressへ移行+SSL化

ご無沙汰しております、ヤガーです。 すっかり更新頻度の減ってしまったテック・ガジェットブログのCreazy!なのですが、2006年5月に開始してから10年以上MovableTypeで動作させてきました …

Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示

[追記:2009/02/08] エントリータイトルがタイポしていましたので直しました。非リンク→被リンク。 お恥ずかしい・・・。 [/追記] 先日、Delicious被ブックマーク数画像取得APIへの …

MovableTypeでカテゴリーを整理した一部始終

先日、ブログデザイン勉強会に参加したこともありますが、本格的にリニューアルを考えています。 勉強会ではブランディングとかデザインによるイメージ作りがメインになりそうなので、それとは別に機能的な部分のリ …

no image

第16回:サムネイル作成APIをサーバサイドで簡単に切り替える方法

以前に、サムネイルAPIをJavaScriptで簡単に切り替える方法をエントリーしました。 サービスが使えなくなればサムネイルを外すなり他のサービスに切り替えるなりする作業が発生します。MT等のブログ …

facebookのファンページを作る時に気をつけたい細かい話

何かと話題のfacebookですが、前回のエントリーではプロフィール画面で遊ぶ方法をとりあげました。で、今度はブロガーや企業の間でも増えてきているファンページの作り方について書いてみたいと思います。 …

スポンサードリンク

スポンサードリンク