【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
はじめにGoogleフォームとは、Googleが提供している無料のWebアプリケーションであり、Google Workspace*の一部で、アンケート作成・管理ソフトウェアのことを指します。
そのためお問い合わせフォームとして利用する場合は、アンケート機能の一部を汎用するような形で利用します。
*Google Workspace(以前はG Suite)は、Gmail、Googleドキュメント、Googleスプレッドシート、Googleスライド等、ビジネスを進める上で便利なグループウェアサービスを指します。
はじめに、お問い合わせフォーム制作するにあたり一般的に必要となる機能は下記になります。
そして、Googleフォームではこれらの機能はすべて無料で利用可能になります。
しかし、一部制限もあるので、このあと概要を説明していきます。
ユーザーがフォームからお問い合わせを送信した際に、指定したメールアドレス宛に、フォームが送信されたことを通知する機能を指します。
この機能により、お問い合わせがあった場合の確認漏れを防止することができます。
※Googleフォームの場合、標準機能で指定可能なメールアドレスは、gmailに限定されるようです。独自ドメインのアドレスを指定する場合は、GAS*を使って通知を設定する手順が必要になります。
今回は、標準機能にてメール通知の設定を行います。
*GASとは、Google Apps Scriptの略称であり、Googleが提供するアプリケーション開発プラットフォームです。GASを使うと、HTMLやJavaScriptのような身近なWeb言語を用いて、GmailやGoogleスプレッドシートを始めとしたGoogleサービスを自動化することが可能になります。
ユーザーがお問い合わせをした際に、問題なく送信されたことを通知するために、管理者側から自動で送られるメールを指します。
自動返信メールの内容は、送信した内容を引用するものや、お問い合わせに対する御礼を表示したりと、設定によって様々です。
※Googleフォームの場合は、デフォルトで回答の引用を行うことができますが、任意の内容を設定したい場合は、こちらもGASを使う必要があるようです。
Googleフォームにてお問い合わせフォームを制作したあと、タグを発行することで、WebサイトやLPにフォームを埋め込む機能のことを指します。
Web上で、お問い合わせの内容を確認することができる機能を指します。
お問い合わせの内容を一元管理することができるので、内容を把握しやすくなります。
それでは、実際にどのように設定をしていくのか、手順を解説していきます。
※Googleフォームのデフォルトで可能な設定に絞って、説明します。
Googleフォームは、Googleアカウントを持っている人なら誰でも無料で制作することが可能です。
はじめにGoogleアカウントを使ってGoogleフォームにログインすると、下記のようにフォームのテンプレ―を選ぶ画面が出てきます。
この中からテンプレートを選択してフォームの項目を追加・削除する方法でも、新規でフォームを一から作成する方法、どちらでも制作可能になります。
実際の編集画面は、このように直感的に操作可能になっています。「質問」タブでフォームの編集を行っていきます。
コーディングの知識は必要なく、マウスでクリックしながらパーツの種類を選んでいくことが可能です。
フォントも数は限られていますが、指定することが可能です。フォント・フォントサイズ・背景色等を変更したい場合は、編集画面の右上にあるパレット🎨マークをクリックします。
そうすると、「テーマ」というサイドバーが表示され、こちらも直感的に操作が可能になっています。
また、フォームの項目では、下記のように画像を挿入することも可能です。
メール通知機能をONにするために、「回答」タブに移動し、設定ボタンをクリックします。
ポップアップが表示されるので、「新しい回答についてのメール通知を受け取る」をクリックし、チェックをつけます。
これで設定は完了です。
自動返信機能をONにするということは、フォーム上でユーザーにメールアドレスを入力してもらう必要があります。
そこで、「設定」タブに移動し、「回答」の項目のプルダウンをひろげます。
以下の項目にチェックを付けることで、フォームで送信した内容が引用され、ユーザーに自動返信が届きます。
上記で設定したフォームを実際にWebサイトやLPに組み込みます。
組み込みの場合は、「埋め込みタグ」を発行し、Webサイトのhtmlに設置する必要があるので、そのタグを発行します。
該当のフォームの編集画面の右上に「送信」ボタンがあるのでクリックします。
送信方法を選べるので、<>マークをクリックし「HTML を埋め込む」のタブに移動します。そして、ここに記載のiframeタグをコピーしWebサイトのhtmlに貼りつけます。
最後に、お問い合わせ内容を閲覧・管理する方法です。
Googleフォーム編集画面の真ん中にある回答タブに移動します。
このページでは、フォームへの回答(送信された内容)を確認することができます。
元々アンケート機能なので、概要タブでは、項目ごとに回答が確認できるようになっています。そのため、お問い合わせフォームとして活用する場合は、「回答」タブの中の「個別」タブがおすすめです。
このタブから、お問い合わせ一件ずつの内容を確認することができます。
一連の作業を終えて、Webサイト上には以下のようにフォームを埋め込むことができました。
iframeにcssでmax-width: 100%を指定すると、画面幅に応じて横幅もレスポンシブされました。高さの指定は、お問い合わせフォームのコンテンツ量が多い場合に、スクロールが表示されてしまうので、ブレイクポイントで適宜行うのが良いかと思います。
また、管理者宛てのメール通知、自動返信ともに問題なく送信されていることを確認しました。
以上、Googleフォームを利用したフォーム制作の概要でした。久しぶりに触ったら機能も増えていて使いやすかったです。
デメリットとしてはGoogleのサーバへ情報がたまるので脆弱性などがあげられるかもしれません。
フォーム選びは、用途・工数・デザイン性など求めるものによって使い分ける必要があります。
その中でもGoogleフォームは、時間をかけずに、またコーディングの知識がない方でも制作できる最も簡単なフォームであると感じました。
フォーム選びでお悩みの方は、お気軽にご連絡ください。
Miki Kohinata
大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
PICK UP
