お問い合わせページはGoogleフォームで簡単作成！必要な手順を全て解説！
Posted: Last Update:
サイトのお問い合わせページをどうやって作るか悩んでいますか？Googleフォームを使えば無料で簡単に作成できてしまう上に、PHPで自作するときのようにセキュリティに悩む必要もありません。この記事では、Googleフォームを使ってお問い合わせページを作成する方法を詳しく紹介します。これさえ読めば、30分で全ての設定が終ります！
この記事の目次
Googleフォームならお問い合わせページが簡単に作れる
Googleフォームは本来、アンケートを実施し分析するためのツールですが、お問い合わせフォームにも流用することができます。このサイトでもお問い合わせページはGoogleフォームで作成しています。
Googleフォームでお問い合わせページを作るメリットは「簡単」「セキュリティについて考えなくていい」「無料」の三点に集約されると思います。
お問い合わせページを自力で作成しようとすると、JavaScriptやPHPが必要になりますが、スクリプトを書くのは面倒です。Googleフォームなら自分でスクリプトを書く必要はありません。また、自分でスクリプトを書く時には頭痛の種になるセキュリティの問題も、Googleフォームを使えば考える必要はありません。Googleが代わりに考えてくれています。
無料のお問い合わせフォームを配布しているサービスは他にもありますが、ほとんどの無料サービスには広告がついてきます。GoogleフォームにもGoogleのロゴや注意書きが入りますが、他サービスの広告と比較するとかなり小さなものです。気になる人も少ないでしょう。
説明はこれくらいにして、さっそくGoogleフォームを使ったお問い合わせページを作っていきましょう。
Googleフォームの基本操作
GoogleフォームはGoogle フォームから無料で作ることができます。
Google フォームから、「パーソナル」の「Googleフォームを使ってみる」をクリックして、フォームの作成を始めます。作成にはGoogleアカウントが必要なので、お持ちでない方はまずGoogleアカウントを作成してください。
ログイン後、「新しいフォームの作成」から「連絡先情報」を選んでクリックします。「連絡先情報」にはお問い合わせフォームに必要な情報がほぼ網羅されているので、作成の手間が省けます。
新しいフォームのページが開きますので、不要な項目は削除し、必要な項目を追加していきましょう。また、入力必須項目を指定することもできます。何を入れるか迷っている方は、「お名前」「メールアドレス」「コメント」を残して後は削除してしまってもいいかもしれません。フォーム作成後にも、項目の追加や削除はいつでも簡単にできます。
- お問い合わせページに入れたくない内容は、各項目右下のゴミ箱アイコンをクリックして削除します
- 項目を追加したい場合は、右のツールバーから「＋」をクリックして追加・編集します
- 入力必須項目は、各項目右下の「必須」のオン・オフで切り替えます。「必須」にすると、未入力の状態では送信がてきません。
Googleフォームをカスタマイズする
ここまでの操作で、フォームの原型が出来上がりました。ここから自分のサイトにあったデザインにカスタマイズしていきましょう。なお、自分のサイトに埋め込む際には「背景色」は表示されません。
上部の画像を削除する
まずは、上部に表示されているヘッダーを消しましょう。ページ右上の「テーマをカスタマイズ」をクリックし、「テーマオプション」の「ヘッダー」の「画像のアップロード」の「X」をクリックします。これでヘッダーの画像が消えます。
Googleフォームのタイトルを消す
作成したGoogleフォームでは「連絡先情報」というフォームタイトルが入っています。タイトルはご自身のサイトの小見出しなどを利用した方が統一感が出ますので、Googleフォームのタイトルは削除しましょう。
Googleフォームのタイトルを消すには、「連絡先情報」の文字を削除し、半角の空白を入力します。半角の空白を入力しないと「連絡先情報」が復活してしまうので、必ず空白を入力してください。
色をサイトのテーマカラーに合わせる
Googleカスタムフォームで表示される色は、タイトルの上部にあるボーダーのみです。細い線とはいえ、ご自分のサイトとイメージカラーが異なると、サイトの印象を損なってしまいます。
色を変えるには、ページ右上の「テーマをカスタマイズ」をクリックし、「テーマの色」を変更します。
「テーマの色」に理想の色がない場合には、「＋」をクリックして、16進法で色を指定します。「追加」をクリックすると、指定の色が反映されます。
確認メッセージを変更する
お客様が「送信」を押してからページに表示されるメッセージも編集しておきましょう。
画面右上の「設定」をクリックします。
設定の「プレゼンテーション」を開き、「確認メッセージ:」を修正します。「お問い合わせいただきましてありがとうございます」などの文言の他、返信の目安なども書いておくと親切ですね。
Googleフォーム見栄えの確認方法
作業してきたGoogleフォームの見栄えを確認するには、右上の「プレビュー」をクリックします。
プレビューは別タブ（ウィンドウ）で開くので、編集画面に戻る際にはプレビュー画面を閉じてしまってかまいません。先ほどと説明が重なりますが、自分のサイトに埋め込む際には「背景色」は表示されません。プレビュー画面に表示されている背景色は気にしないようにしましょう。
誰でもお問い合わせページの入力ができるようにする
Googleフォームのデフォルトの設定では、Googleにログインしていないとフォームに解答ができません。サイトの訪問者がGoogleアカウントを持っていなくても連絡をもらいたいので、この設定を変更しましょう。
まずページ右上の設定ボタンをクリックします。
設定の「全般」タブから、「解答を一回に制限する」のチェックを外し「保存」します。これで、誰でもフォームに回答できるようになりました。
お問い合わせが来たらメールで受け取れるようにする
お問い合わせフォームに入力された内容は、Googleフォームから確認できます。しかし、頻繁に見に行くのは面倒ですよね。そんな時には、メールでお問い合わせを受け取れるように設定しましょう。
Googleメールに通知をする
まずはフォームを作成したGoogleアカウントのメールで受け取る方法を紹介します。他のメールアドレスで受け取りたい方は、次の小見出しまで進んでください。
Googleフォームのアカウントに紐づいたメールアドレスでフォームの内容を受け取るには、中央上にある「回答」をクリックし、「新しい回答についてのメール通知を受け取る」をクリックします。これだけでメールが受け取れるようになります。
Google以外のメールアドレスに通知をする
Googleフォームのアカウントに紐づいたメール以外のメールアドレスで通知を受け取りたいときは、「スクリプトエディタ」を使います。スクリプトもあってやや難解に感じますが、手順を追って設定をすれば簡単なので、ぜひ挑戦してみてください。
まず、右上の「その他」から「スクリプトエディタ」を開きます。
スクリプトエディタのページに遷移しますので、下記のスクリプトを追加します。「※メールアドレス※」は通知を受け取りたいメールアドレスに、「※メールのタイトル※」は受け取るメールのタイトルに変更してください。
var items = e.response.getItemResponses();
var msg = '';
for (var i = 0; i < items.length; i++) {
var item = items[i];
var q = item.getItem().getTitle();
var a = item.getResponse();
msg += q + ': ' + a + '\n\n';
}
GmailApp.sendEmail('※メールアドレス※', '※メールのタイトル※', msg);
}
入力後はこのような画面になったと思います。
次に、画面左上の「編集」から「現在のプロジェクトのトリガー」をクリックします。
プロジェクト名の入力を求められるので、適宜入力し、OKをクリックてください。つける名前は、サイト名などが分かりやすいと思います。
「Google App Script」という画面に遷移しますので、「新しいトリガーを作成します」をクリックしてください。
入力内容を、それぞれ以下のように変更し、保存します。
- 実行する関数を選択「myFunction」→「sendform」
- イベントの種類を選択「起動時」→「フォーム送信時」
- 「毎日通知を受け取る」→「今すぐ通知を受け取る」
次の画面でログインを求められますので、Googleフォームを作成しているアカウントでログインしてください。
ログインすると、次のような画面になります。「詳細」をクリックしてください。
ページを下の方にスクロールすると、「「現在のプロジェクトのトリガー」で入力した名前（安全でないページ）に移動」というリンクが出てきますので、クリックします。
「現在のプロジェクトのトリガー」の実行を許可するか尋ねるページに遷移しますので、「許可」をクリックします。
もとのページに戻ると、下記のように新たなトリガーが追加されています。これでメールの設定は完了です。
※GoogleAppScriptの設定は自己責任で行ってください。
自分のサイトにGoogleフォームを入れる
Googleフォームの設定ができたので、作成したGoogleフォームを自分のサイトに入れていきましょう。
GoogleフォームのHTMLコードを取得してサイトに貼り付け
Googleフォームのページに戻り、画面右上の「送信」をクリックします。
送信方法から「＜ ＞」を選択し、「コピー」をクリックします。ここで「幅」と「鷹さ」を決めることもできますが、ご自分のサイトに入れてみてから設定しても遅くありません。
コピーした以下のようなコードを、ご自分のサイトの問い合わせを表示したいページに貼り付けます。
該当のページをブラウザで表示すると、お問い合わせフォームが表示されます。
見栄えの微調整を行う
表示されたフォームの幅などは、上記のコードの「width="640" height="630"」を変更することで調整できます。スマホなど画面サイズの異なるデバイスで表示したときにも、Googleフォームはほとんどの場合、自動で調整をしてくれます。ただし、widthやheightの設定によっては表示がおかしくなることもあるので、色々な画面幅で確認してから公開するようにしましょう。
実際に表示した結果、フォームの色や項目の変更が必要だと感じた場合には、Googleフォームのページに戻って編集してください。Googleフォームを変更した場合にも、自分のサイトにコピペしたコードを変更する必要はありません。変更内容は自動的に反映されます。
フォーム以外の部分の見栄えは、ご自分のサイトでタイトルを入れるなどして調整してみてください。
送信テストを忘れずに！
お疲れさまでした！以上でGoogleフォームがご自身のサイトに反映されたと思います。一般に公開する前に、ご自身で一度送信テストを行っておきましょう。思い通りに動いていない場合には、手順に戻って修正をしてみてくださいね。
Googleフォームを使えば、お問い合わせページをご自身のサイトに作るのも簡単です。この記事が、サイトを自作している同志の皆様の一助になれば幸いです。
