Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

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


先日、とあるメーカーから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の年間費用が負担で導入していなかった企業様に対して積極的に働きかけて行きたいと思いました。