Googleフォームをカスタマイズして、デザイン性の高いアンケートを作成する方法

こんにちは、宮本です。
今回は、デザイン性の高いアンケートLPを作成する方法について解説します。

通常、アンケートページを作成するには、高額なサービスを利用する必要があり、デザイン性もイマイチだったりします。
そこで、無料のGoogleフォームを利用することで、カンタンにデザイン性の高いアンケートページを作成でき、さらに任意のサンクスページに飛ばすことができるので、販売ページや特典配布ページに移動させることも可能です。

では、その方法について解説していきます。

目次

完成デモサイト

まずは、どのようなページができるのかご覧ください。
デモサイト>>
(アンケートは実際に動作するので、ご自由にお試しください)

 

こんなデザイン性の高いアンケートがGoogleフォームで意外とカンタンにできるんです!
さらに、サンクスページの代わりに販売LPに遷移させればスムーズに成約に繋げることができます。

また、Googleフォームはアンケート結果の集計を自動で即時に行ってくれるので、以下のようにとても見やすい集計結果をいつでも確認することができます。

アンケートフォーム実装の流れ

アンケートフォームを実装する流れ

  1. HTMLでフォームを作成する
  2. Googleフォームでアンケートを作成する
  3. Googleフォームのソースから”name”と送信先URLを取得する
  4. 取得した”name”と送信先URLをHTMLに組み込む
  5. 遷移先を非表示にし、作成したサンクスページへリダイレクトする

 

1. HTMLでフォームを作成する

まずはHTMLで普通にフォームを作成します。

See the Pen
Google-form-1
by Nobuya Miyamoto (@yotao)
on CodePen.

まず、アンケートを取りたい内容をフォームのHTMLで書いておきます。

上記はとりあえずテキスト部分だけ書いていますが、この時点で画像やCSSでデザインを固めてしまって構いません。

「form action=”●●”」と「name=”●●”」の部分は、Googleフォームから抽出した文字列を挿入するので、わかるようにしておいてください。

 

2. Googleフォームでアンケートを作成する

次に、Googleフォームで同じアンケートを作成します。
以下のリンクから作成できます。

https://www.google.com/intl/ja_jp/forms/about/

このとき、HTMLで制作した選択肢と全く同じになるようにGoogleフォームを作成して下さい。

フォームを作成してプレビューを確認すると、以下のような感じになります。

 

3. Googleフォームのソースから”name”と送信先URLを取得する

HTMLのフォームとGoogleフォームが両方完成したら、これら2つのフォームを紐づける作業を行います。

まずは、Googleフォームのソースコードを表示します。

「右クリック」→「検証」を押します。(キーボードのF12でもOKです。)

すると、下のようにデベロッパーツールが開くので、「Ctrl+F」を押して検索窓を表示します。

ここで、「entry」と入力して検索します。

Googleフォームの設問の”name”のIDは「entry.1234567890」のように、「entry.」と「数字」で構成されています。

どのIDがどの設問に該当するかを探すには、右のソースの「entry.xxxxxxxxxx」のすぐ上下にマウスオーバーすると、左のフォームの色が変わるのでわかるはずです。

チェックボックスだけは、質問と各選択肢にnameIDがついていますが、同じ番号なので一つだけ控えておけばOKです。

このように検索していった結果、全ての設問のnameIDを探した結果、以下の通りだとわかりました。

  • entry.1413618440
  • entry.2131404477
  • entry.712937057
  • entry.737209059
  • entry.966441577

これをHTMLフォームの、「name=“●●”」の部分に挿入しますので、控えておいてください。

 

続けて、Googleフォームの中のあるURLを探します。

これが、自分で作ったHTMLフォームのデータを送信する宛先になります。

先ほどと同様にデベロッパーツールの検索窓に、「formResponse」と入力して検索します。

上記の通り、今回は以下の通りになります。

https://docs.google.com/forms/u/0/d/e/1FAIpQLSeX4ggGRQ-BUpu2sGNTLHe8wDdWPqHx22vXg-W8qUiTySbEKA/formResponse

 

4. 取得した”name”と送信先URLをHTMLに組み込む

先ほど取得したnameとURLをHTMLに記載していきます。
まずはnameIDからです。

取得したname ID

  • entry.1413618440
  • entry.2131404477
  • entry.712937057
  • entry.737209059
  • entry.966441577

 

これを最初に記載したHTMLの「name=”●●”」の部分に写していきます。

See the Pen
Google-form-2
by Nobuya Miyamoto (@yotao)
on CodePen.


次に、HTMLフォームの送信先を入力します。
上のソースコード<form action=”●●”>の箇所に先ほど取得したURLを挿入します。

取得したURL

https://docs.google.com/forms/u/0/d/e/1FAIpQLSeX4ggGRQ-BUpu2sGNTLHe8wDdWPqHx22vXg-W8qUiTySbEKA/formResponse

すると、ソースコードは以下のようになります。

See the Pen
ExWYeJW
by Nobuya Miyamoto (@yotao)
on CodePen.

これだけでも、HTMLフォームは機能し、アンケートの回答は正常にGoogleフォームに送信されます。

※補足:Googleフォームの選択肢に記載した文言(例:「お肌にもっとハリが欲しい」)と、HTMLの<input>の中に記載したvalueの文言(例:value=”お肌にもっとハリが欲しい”)が一致していないと、Googleフォームに取り込まれないので注意が必要です。

ですが、このままだと下の図ように強制的にGoogleフォームの完了画面に遷移してしまいます。

 

5. 遷移先を非表示にして、オリジナルのサンクスページへリダイレクトする

そこで、自分で作成したサンクスページに強制的に遷移する方法を取ります。

方法としては、Googleの完了ページを非表示のiframeにし、代わりにjavascriptで自作のthanks.htmlへリダイレクトさせます。

まず、 <form action=”https://docs.google.com/〜〜〜/formResponse”>の部分に「target=”hidden_iframe” onsubmit=”submitted=true;”」を追記します。

つまり、上のソースコードの1行目がこのように変わります。

See the Pen
Google-form-3
by Nobuya Miyamoto (@yotao)
on CodePen.

そして、HTMLの<head></head>要素に、以下のコードを記入します。

See the Pen
Google-form-5
by Nobuya Miyamoto (@yotao)
on CodePen.

これで、Googleの完了画面の代わりに自作のthanks.htmlが表示されます。

このthanks.htmlを商品の販売LPにすれば、もっとスムーズに成約に繋げることができます。

 

まとめ

ここまでGoogleフォームをカスタマイズして、デザイン性の高いアンケート風LPを制作する方法について解説してきました。

最後におさらいとして、今回の記事で制作したHTMLファイルの全文を掲載しますと、

See the Pen
Google-form-6
by Nobuya Miyamoto (@yotao)
on CodePen.

となります。
※name IDとformResponse IDは各自で異なるので、必ず書き換えて作業してください。

これを画像やCSSなどでデザインを調整するとこのようなアンケート風LPが完成します。
デモサイト

このアンケート風LPを使用すると、こんなメリットがあります。

アンケート風LPのメリット

  • アンケート形式で購入する客層の情報が得られる
  • うまく誘導して、悩みに共感してもらい、自然に商品の魅力を伝えられる
  • 身構えられることなく、スムーズに販売につなげることができる
  • 広告もセールス色の弱いアンケートなので、クリックされやすくなる
  • 販売者も商品が売れ、お客さんも安く良い商品が手に入るWin-Winの関係を築ける

なかなか商品が売れない、広告費が高騰しているなど、商品の販売にお悩みの方は、一度試してみてはいかがでしょうか?

よかったらシェアしてね!
目次
閉じる