Googleフォームを使って問い合わせフォームを作ってみる。

2016/05/26 サイト制作, 技術系 投稿者:竹内

先日、とあるメーカーからGoogleフォームを使ったアンケートが届きました。
面白そうなのでどんなことができるのか検証をとってみたいと思います。

Googleフォームとは

form00

アンケートフォームを簡単操作で作ることが出来るWebアプリケーションだそうです。
アンケート結果の集計を自動で行ってくれるほか、Excel形式でデータの出力も可能です。
社内イベントの出欠確認や簡単な小テストなどに便利そうです。集計までやってくれるのが良いですね。

アンケートフォームだけでなく問い合わせフォームに使えるとのことです。
私の仕事上アンケートを作成することはあまり無いので、今回は問い合わせフォームを作ってみたいと思います。

簡単なアンケートは作ってみたのですが、問い合わせフォームはまだなので、下調べ無しに作れるか挑戦してみます。

Googleフォームを問い合わせフォームとして使用するメリット

  • 簡単なので工数を短縮できる。
  • クライアント企業様のGoogleアカウントを使って、フォームの項目などを企業様自身で追加・変更できる。
  • スマホ対応している。
  • GoogleフォームがSSLで暗号化されている。

SSLの暗号化がされていることは大きな利点です。小規模な企業ではSSLの年間費用も負担になります。
また、フォームを入力するお客様にとってGoogleのサービスだから安心と考えていただけることも大きな利点です。

Googleフォームを作ってみよう

Googleフォームにアクセス

普段使用しているGoogleアカウントからGoogleフォームにアクセスします。

Googleフォーム

問い合わせフォームを作る

form01

画面右下の[+]マークをクリックしてフォーム作成を開始します。
次にフォームの題名と説明を記入します。

form02

問い合わせ項目を作成する

form03

まずは会社名、項目の種類を記述式に変更し、必須にチェックを入れます。
続いて右側の[質問の追加]ボタンで2つ目3つ目と作っていきます。

form04

プレビュー・テーマの変更ほか

form05

上の[目]のマークから作成したフォームをプレビューすることが出来ます。
また、[パレット]マークではテーマの変更が出来るようです。

プレビューによって、フォーム入力後のボタンは[送信]ボタンとわかりましたので説明文の修正を行います。

[歯車]マークからフォーム送信後の文章について設定が出来るようです。
お問い合わせっぽい内容に変更を行いました。

作成したフォームをWebに貼り付ける

form06

右上の[送信]ボタンをクリックすると送信方法を選択する画面になります。
GoogleMAPやYoutube等でお馴染みのマークが出ます。
今回はHTMLに埋め込みますので[<>]を選択します。

iframeタグでURLが生成されるのでこちらをHTMLに貼り付ければ完了です。
iframeにスクロールバーが出ましたのでiframeタグのスクロールバーを消す記述を追加しました。
iframeがサイズ指定されているので、HTMLに埋め込む方法でスマホ対応させるには横サイズの指定を100%表示にしたり、CSSで調整してあげる必要があります。

貼り付けたHTMLのデモページがこちら↓


iframe形式だとアドレスバーがSSLの表示になっていないため、一見してSSLでは無いと思われてしまいがちです。(iframe内部はhttps://で書かれているので実際は対応しています。)
その場合はiframeによる埋め込みではなく、リンク形式でフォームに飛ばしてしまうのが良いかもしれません。
URLは企業様のものからGoogleのものへ変わってしまうので一長一短ですね。
リンク形式のフォームであれば何も設定しなくてもスマホ対応しています。

SSL対応しているフォームページへのリンクがこちら↓
アドレスバーに鍵マークがついているのをご確認下さい。

作ってみたけど改善したいこと(デメリット)

ここまで他のブログやサイトを調べる事無く実装まで持っていけることができました。
ですが作ってみて改善したいことがいくつかあります。

  • フォームが縦長すぎる
  • 入力者にも管理者にもメールが飛ばない
  • GoogleAnalyticsの目標設定(コンバージョン設定)はできるのか?
  • Googleの注意文が気になる「Google が作成または承認したものではありません。」

改善できるか調べてみる

メールの自動返信、管理者へ通知はできる!
Googleフォームにアドオンできるツールが用意されているのでそちらを利用して簡単に実現できます。

フォームの装飾はできない(しない)
ちょっと調べた限りでは『生成されたiframe内のHTML部分を抜き出して別途HTMLとしてファイル化する』といった手法でできるとのことでした。
利用規約を読んだところGoogleの推奨する手法では無いような気がしますので、商用サイトでもあることですしやらない方向で行きたいと思います。

GoogleAnalyticsのコンバージョン設定はできない
上記理由と同様です。

Googleの注意文は消せない
上記理由と同様です。

まとめ

今回はアンケートではなく、ホームページに設置する問い合わせフォームの作成に挑戦してみました。
フォームの作成・実装まではすんなり行くことができましたが、その後のフォームの調整や運用に合わせたカスタマイズについては制限があり、ホームページ上の他のページとのデザインの調和にもなかなか苦労しそうです。
メール通知の部分はアドオンで簡単に解決しますので、Googleが用意している環境内であれば問い合わせフォームとして機能すると思います。

SSLが使えることと工数を抑えることができる部分はかなり大きなメリットだと思いますので、今までSSLの年間費用が負担で導入していなかった企業様に対して積極的に働きかけて行きたいと思いました。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)