2022.04.10 Sun
Googleフォームの使い方とカスタマイズ学習
Googleフォームについての概要
Google フォーム(Forms)はブラウザで作成できる無料で使用可能メールフォームサービスです。 フォームから送信された情報は、Excelで取り扱いやすいスプレッドシートに自動で蓄積することも可能で、統計情報の収集にも使いやすいフォームサービスです。レジャーやイベント、サークルや会議参加者の事前アンケートやメールアドレスの集約、簡単な診断テストなどの集計にも用途は多様です。
フォームの作成もGoogleアカウントがあればすぐに作成可能で、選択式、プルダウン形式、評価スケールなど、さまざまな質問形式を自由に選択して組み合わせて制作することが可能です。設問の回答選択によっては質問スキップなどが可能で、回答内容はリアルタイムで自動集計され、回答状況やグラフでの確認も可能。
出力形態のデータはすべてスプレッドシート作成されるので、他のOffice系ソフトと組み合わせたデータ資料作成も可能なようです。Googleフォームの利点と不得意点
とても利便性や設置ハードルが低いGoogleフォームですが、機能上優れた点とそうでない点、つまりメリットとデメリットについて独自視点で分析してみました。
Googleフォームの利点
利点1：ノーコード
HTMLコードの編集やJavaScript、CGIやPHPなどの知識やコーディングが必要ありません。 とにかく集計データを収集したい場合には、すぐにHTMLの知識を必要とすることなく無料でメールフォームを作成できる点です。
利点2：データ集計
メールフォーム系専用ツールになると、おおよそ回答データ集計機能が付属していますが、Googleフォームの場合Excel互換性の高いスプレッドシートに自動収集可能です。 そのほか統計データをForms内のフォーム管理画面内で、回答データ毎のグラフデータなどを一目で確認しやすい形式で閲覧することが可能です。
利点3：設定が簡単
設問の設定から、返信自動メールの設定等、込み入った機能や設問形式は得意ではないものの、Formsのフォーム管理画面からフォーム形式のユーザーインターフェースですべて設定が可能です。
利点4：Googleツール機能
スプレッドシートはもちろん共有や限定リンク、Googleアカウントを軸にしたフォーム共有や利用制限が可能です。 Googleアカウント同士であればすぐに共有や共同編集が可能なので、利便性についてはとても高いでしょう。
Googleフォームの不得意点
不得意点1：機能カスタマイズ
GoogleフォームはノーコードSaas型フォームツールなので、付属されている基本機能は使いやすくわかりやすいのですが、オリジナルフォームなどの複雑なメールフォーム作成には適していません。 例えば郵便番号から自動で住所を入力するなどの機能は対応できません。
不得意点2：デザインカスタマイズ
Googleフォームではデザイン編集ができないため、シンプルなテンプレートからひとめでGoogleフォームとわかるメールフォームを選ぶ必要があり、商業利用にはマイナスポイントとなるかもしれません。 対処方法としては、外部オリジナルHTMLページにフォームパーツを組み込むことで外部ファイルを通じてのデザインカスタマイズが可能ですが、HTMLコードの編集や知識が必須となります。
不得意点3：URL指定
フォームのURLはGoogleで自動生成された専用のURLとなるため、ドメインの指定は勿論できず、既存ページから画面遷移であれば、転換率からはあまり良い面のない外部ページへのリンクページとなります。 URLは基本機能で短縮指定は可能なものの、サービスサイトなどで統一性を持たせたい場合はデメリットになるかもしれません。 不得意点2でも説明しましたが、独自ページに組み込むことでURLを統一することは可能ですが、やはりHTMLマークアップが必須になるので、データ集計以外のメリットはオリジナルURLやデザインカスタマイズを考慮すると目減りしてしまうかもしれません。
Googleフォームは用途に適した採用が推奨される
Googleフォームの使い方と初期設定
あえて専門的に説明するほど難解な仕組みでないので概要のみに留めます。 Googleフォームを使用作成するには、Googleアカウントが必須条件となります。各方法や手順は、経過年により仕様や設定方法が度々変更されるため、公式サイトやハウトゥを紹介している1年以内の専門ページが良いでしょう。
Googleアカウントを作成すると、GoogleメールやYoutubeをはじめ、Googleの各ツールやGoogleアプリが使用可能になります。Googleウェブツール群からFormsを選択すると、すぐにGoogleフォームが作成可能になります。
まずは公式サイトから最新の仕様を確認して、初期設定を行います。 わかりずらい場合は、やはり1年以内に公開された新しいハウトゥ紹介のブログメディア記事を参照して、初期設定を行います。以上でGoogleフォームの作成や初期設定は完了です。 あとはテスト送信を実施して、Googleフォームに付属する設定機能でご自身の望む仕様のフォームを作成します。
Googleウェブツールは経過年を待たずに仕様変更やサービス統廃合などが頻繁に行われます。Googleフォームも利用者減などの影響で、将来的に有償化されたり廃止されたりするリスクがあるので、あらかじめ注意しておきましょう。
Googleフォームを使うにはGoogleアカウントが必要
HTML/CSSカスタマイズ学習
Googleフォームは標準で利用する場合は、機能面やビジュアル面のデザイン要素などは、基本仕様以外にはカスタマイズできないと考えておいたほうがよいでしょう。 Googleウェブツールの特性上、将来的に可能になる確率も、ほぼないでしょう。Googleフォームの見た目のデザインを変更する場合は、ファイル管理可能なサーバーにHTMLページを作成して、Googleフォームのパーツを連携させることで、オリジナルデザインのメールフォームとして利用することができます。
GoogleフォームHTML/CSSカスタマイズ手順
Googleフォームを組み込んだオリジナルメールフォームを作成する手順は以下の通りです。制作要件によっては、自身のやりやすい順番で制作を進めます。
- Googleフォームを作成
- HTMLフォーム、完了ページを作成
- HTMLフォームとGoogleフォームの連携
- 送受信確認
以上のように、大きく4工程にわかれます。
1：Googleフォームを作成
まずは必要なGoogleフォームを新規作成します。
設問分や回答内容は後工程のHTMLフォームに組み込みますが、まずはフォームの設問内容を作成します。
HTMLページに組み込みをするので、条件設定などはせず、必要な項目と設問のみを一通り入力します。
2：HTMLフォーム、完了ページを作成
Googleフォームで新規作成したフォーム内容を元に、HTMLページに通常のformタグと送信フォームをマークアップします。 formタグのactionと各入力フィールドのnameの値は空にしておきます。
3：HTMLフォームとGoogleフォームの連携
できあがったHTMLページとGoogleフォームを連携させます。
連携させるにはGoogleフォームの送信先URLと各inputフィールドのname属性値が必要になります。
手順としては以下のようになります。
➊formタグaction属性値の取得作成したGoogleフォームを開き、ブラウザからデベロッパーツールでHTMLソースコードを表示して、formタグ内にあるaction属性値をそのままコピーして、オリジナルHTMLページのformタグのaction属性に貼り付けます。
- action=”https://docs.google.com/forms/…..”
デベロッパーツールで各タグまたは属性値の検索をかけると、対象箇所がすぐに見つかりました。
- Googleフォームのaction属性値 ⇒ HTMLページに設定する
次にGoogleフォームの各inputタグtype=hiddenのname属性値を探し、HTMLのform内の各name属性にコピーペーストします。
name=”entry.01234567_********”となっていたので、8桁の数字以降を削除して、以下のような属性値をHTMLページ内のフォームに設置します。
- ”entry.01234567”(番号は各項目により異なる)
設定項目の回答[メールアドレスを収集する]にしてメールアドレス必須情報にした場合だけかもしれませんが、このhiddenフィールドのname属性値のみが[emailAddress]となっていました。
これが原因でハマってしまったのですが、[設定]- [メールアドレスを収集する]で、複製自動メールを[ 回答のコピーを回答者に送信]を有効にしてしまうと、オリジナルHTMLページの連携が上手く動作しなくなります。
オリジナルHTMLページにGoogleフォームを連携させる場合は、自動複製メールは送信できないオフ設定で利用するのが必須要件となります。
inputフィールドの属性値は基本は[entry.00000000]という形式でないと独自のHTMLフォームとGoogleフォームの連携ができないようですが、メールアドレスを収集するを有効にした場合に自動で設置されるメールアドレス項目は[emailAddress]となるので注意が必要。
➌送信完了サンクスページフォームの送信ができたことを確認したら、次に送信完了画面も独自デザインのHTMLを表示させます。
方法としては、thanks.htmlなどの静的HTMLページを作成し、submit送信後に強制的にthanks.htmlページを表示させるように設定します。 検索をすると同じ設定方法がいくつか紹介されていたので、そのままの内容を反映します。ここで一連の送信が上手くいかない場合は、まずは、[設定]- [メールアドレスを収集する]で、複製自動メールを送信する[ 回答のコピーを回答者に送信]を有効にしてしまうと、オリジナルHTMLページの連携が上手く動作しなくなるので、Googleフォームの設定を確認しておきましょう。
まず、HTMLページのformタグに以下の属性を追加します。
- target=”hidden_iframe” onsubmit=”submitted=true;”
次に、formの閉じタグ下に、以下のスクリプトとifremeを追記します。
<script type="text/javascript">
let submitted = false;
</script>
<iframe style="display: none;" name="hidden_iframe" id="hidden_iframe" onload="if(submitted) {window.location='thanks.html';}"></iframe>
※letはvarの新しい宣言ルールです。
4：送受信確認
実際にHTMLページからデータ送信をテストします。
送信後に完了画面が表示され、Googleフォームに関連付けられているスプレッドシートにデータ保存が確認されていれば完了です。
Googleフォームのデザインカスタムは機能制限を受ける
Googleフォームカスタマイズ学習と考察
今回は、Googleフォームの使い方や設定方法、オリジナルのHTMLページとの連携や組み込み、オリジナルデザインページでのGoogleフォームを参照する方法などを学習しました。全体としては、わかりやすくシンプルな構造のフォームツールなので、Googleフォーム自体は慣れている人であれば、5分もあれば簡単や問合せフォームを設置することは可能でしょう。
オリジナルデザインHTMLページにGoogleフォームを組み込む場合は、ページ自体のHTMLコーディングが必要になるので、フォームシステム機能のみをGoogleフォームで補うようなイメージになるでしょう。- 統計データが必要であったり、アンケート集計など、すぐに統計データなどを取得し傾向を把握したい場合などには適しているでしょう
複雑な問合せフォームや機能カスタマイズを目的とした場合には、かなり制限事項があるので、注意が必要です。
またGoogleフォームをそのまま使用する場合は、もしかするとCVRに大きく影響する場合もあるので、利用対象者なども考慮する必要があるかもしれません。
簡単に統計データを回収したいならGoogleフォームは最適
-
3つ上行くWebクリエイトSITEs(サイツ)
顧客満足度の高いHighデザインとSEO最適化軽量ＨＴＭＬマークアップからドメインサーバー一式セット
掲載情報につきましては当社が独自に調査、検証および収集した情報です。
情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。
掲載情報の修正・変更等をご希望の場合はお知らせください。
