kamenokoki.com

お問い合わせページは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フォームの基本操作1

ログイン後、「新しいフォームの作成」から「連絡先情報」を選んでクリックします。「連絡先情報」にはお問い合わせフォームに必要な情報がほぼ網羅されているので、作成の手間が省けます。

Googleフォームの基本操作2

新しいフォームのページが開きますので、不要な項目は削除し、必要な項目を追加していきましょう。また、入力必須項目を指定することもできます。何を入れるか迷っている方は、「お名前」「メールアドレス」「コメント」を残して後は削除してしまってもいいかもしれません。フォーム作成後にも、項目の追加や削除はいつでも簡単にできます。

  • お問い合わせページに入れたくない内容は、各項目右下のゴミ箱アイコンをクリックして削除します
  • 項目を追加したい場合は、右のツールバーから「+」をクリックして追加・編集します
  • 入力必須項目は、各項目右下の「必須」のオン・オフで切り替えます。「必須」にすると、未入力の状態では送信がてきません。
Googleフォームの基本操作3

Googleフォームをカスタマイズする

ここまでの操作で、フォームの原型が出来上がりました。ここから自分のサイトにあったデザインにカスタマイズしていきましょう。なお、自分のサイトに埋め込む際には「背景色」は表示されません。

上部の画像を削除する

まずは、上部に表示されているヘッダーを消しましょう。ページ右上の「テーマをカスタマイズ」をクリックし、「テーマオプション」の「ヘッダー」の「画像のアップロード」の「X」をクリックします。これでヘッダーの画像が消えます。

上部の画像を削除する

Googleフォームのタイトルを消す

作成したGoogleフォームでは「連絡先情報」というフォームタイトルが入っています。タイトルはご自身のサイトの小見出しなどを利用した方が統一感が出ますので、Googleフォームのタイトルは削除しましょう。

Googleフォームのタイトルを消すには、「連絡先情報」の文字を削除し、半角の空白を入力します。半角の空白を入力しないと「連絡先情報」が復活してしまうので、必ず空白を入力してください。

Googleフォームのタイトルを消す

色をサイトのテーマカラーに合わせる

Googleカスタムフォームで表示される色は、タイトルの上部にあるボーダーのみです。細い線とはいえ、ご自分のサイトとイメージカラーが異なると、サイトの印象を損なってしまいます。

色を変えるには、ページ右上の「テーマをカスタマイズ」をクリックし、「テーマの色」を変更します。

色をサイトのテーマカラーに合わせる

「テーマの色」に理想の色がない場合には、「+」をクリックして、16進法で色を指定します。「追加」をクリックすると、指定の色が反映されます。

色をサイトのテーマカラーに合わせる2

確認メッセージを変更する

お客様が「送信」を押してからページに表示されるメッセージも編集しておきましょう。

画面右上の「設定」をクリックします。

確認メッセージを変更する

設定の「プレゼンテーション」を開き、「確認メッセージ:」を修正します。「お問い合わせいただきましてありがとうございます」などの文言の他、返信の目安なども書いておくと親切ですね。

確認メッセージを変更する2

Googleフォーム見栄えの確認方法

作業してきたGoogleフォームの見栄えを確認するには、右上の「プレビュー」をクリックします。

Googleフォーム見栄えの確認方法

プレビューは別タブ(ウィンドウ)で開くので、編集画面に戻る際にはプレビュー画面を閉じてしまってかまいません。先ほどと説明が重なりますが、自分のサイトに埋め込む際には「背景色」は表示されません。プレビュー画面に表示されている背景色は気にしないようにしましょう。

誰でもお問い合わせページの入力ができるようにする

Googleフォームのデフォルトの設定では、Googleにログインしていないとフォームに解答ができません。サイトの訪問者がGoogleアカウントを持っていなくても連絡をもらいたいので、この設定を変更しましょう。

まずページ右上の設定ボタンをクリックします。

誰でもお問い合わせページの入力ができるようにする

設定の「全般」タブから、「解答を一回に制限する」のチェックを外し「保存」します。これで、誰でもフォームに回答できるようになりました。

誰でもお問い合わせページの入力ができるようにする2

お問い合わせが来たらメールで受け取れるようにする

お問い合わせフォームに入力された内容は、Googleフォームから確認できます。しかし、頻繁に見に行くのは面倒ですよね。そんな時には、メールでお問い合わせを受け取れるように設定しましょう。

Googleメールに通知をする

まずはフォームを作成したGoogleアカウントのメールで受け取る方法を紹介します。他のメールアドレスで受け取りたい方は、次の小見出しまで進んでください。

Googleフォームのアカウントに紐づいたメールアドレスでフォームの内容を受け取るには、中央上にある「回答」をクリックし、「新しい回答についてのメール通知を受け取る」をクリックします。これだけでメールが受け取れるようになります。

Googleメールに通知をする

Google以外のメールアドレスに通知をする

Googleフォームのアカウントに紐づいたメール以外のメールアドレスで通知を受け取りたいときは、「スクリプトエディタ」を使います。スクリプトもあってやや難解に感じますが、手順を追って設定をすれば簡単なので、ぜひ挑戦してみてください。

まず、右上の「その他」から「スクリプトエディタ」を開きます。

Google以外のメールアドレスに通知をする1

スクリプトエディタのページに遷移しますので、下記のスクリプトを追加します。「※メールアドレス※」は通知を受け取りたいメールアドレスに、「※メールのタイトル※」は受け取るメールのタイトルに変更してください。

function sendform(e){
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);
}

入力後はこのような画面になったと思います。

Google以外のメールアドレスに通知をする2

次に、画面左上の「編集」から「現在のプロジェクトのトリガー」をクリックします。

Google以外のメールアドレスに通知をする3

プロジェクト名の入力を求められるので、適宜入力し、OKをクリックてください。つける名前は、サイト名などが分かりやすいと思います。

Google以外のメールアドレスに通知をする4

「Google App Script」という画面に遷移しますので、「新しいトリガーを作成します」をクリックしてください。

Google以外のメールアドレスに通知をする5

入力内容を、それぞれ以下のように変更し、保存します。

  1. 実行する関数を選択「myFunction」→「sendform」
  2. イベントの種類を選択「起動時」→「フォーム送信時」
  3. 「毎日通知を受け取る」→「今すぐ通知を受け取る」
Google以外のメールアドレスに通知をする6

次の画面でログインを求められますので、Googleフォームを作成しているアカウントでログインしてください。

ログインすると、次のような画面になります。「詳細」をクリックしてください。

Google以外のメールアドレスに通知をする7

ページを下の方にスクロールすると、「「現在のプロジェクトのトリガー」で入力した名前(安全でないページ)に移動」というリンクが出てきますので、クリックします。

Google以外のメールアドレスに通知をする8

「現在のプロジェクトのトリガー」の実行を許可するか尋ねるページに遷移しますので、「許可」をクリックします。

Google以外のメールアドレスに通知をする9

もとのページに戻ると、下記のように新たなトリガーが追加されています。これでメールの設定は完了です。

Google以外のメールアドレスに通知をする10

※GoogleAppScriptの設定は自己責任で行ってください。

自分のサイトにGoogleフォームを入れる

Googleフォームの設定ができたので、作成したGoogleフォームを自分のサイトに入れていきましょう。

GoogleフォームのHTMLコードを取得してサイトに貼り付け

Googleフォームのページに戻り、画面右上の「送信」をクリックします。

GoogleフォームのHTMLコードを取得してサイトに貼り付け1

送信方法から「< >」を選択し、「コピー」をクリックします。ここで「幅」と「鷹さ」を決めることもできますが、ご自分のサイトに入れてみてから設定しても遅くありません。

GoogleフォームのHTMLコードを取得してサイトに貼り付け2

コピーした以下のようなコードを、ご自分のサイトの問い合わせを表示したいページに貼り付けます。

<iframe src="https://docs.google.com/forms/d/e/.../viewform?embedded=true" width="640" height="630" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

該当のページをブラウザで表示すると、お問い合わせフォームが表示されます。

GoogleフォームのHTMLコードを取得してサイトに貼り付け3

見栄えの微調整を行う

表示されたフォームの幅などは、上記のコードの「width="640" height="630"」を変更することで調整できます。スマホなど画面サイズの異なるデバイスで表示したときにも、Googleフォームはほとんどの場合、自動で調整をしてくれます。ただし、widthやheightの設定によっては表示がおかしくなることもあるので、色々な画面幅で確認してから公開するようにしましょう。

実際に表示した結果、フォームの色や項目の変更が必要だと感じた場合には、Googleフォームのページに戻って編集してください。Googleフォームを変更した場合にも、自分のサイトにコピペしたコードを変更する必要はありません。変更内容は自動的に反映されます。

フォーム以外の部分の見栄えは、ご自分のサイトでタイトルを入れるなどして調整してみてください。

送信テストを忘れずに!

お疲れさまでした!以上でGoogleフォームがご自身のサイトに反映されたと思います。一般に公開する前に、ご自身で一度送信テストを行っておきましょう。思い通りに動いていない場合には、手順に戻って修正をしてみてくださいね。

Googleフォームを使えば、お問い合わせページをご自身のサイトに作るのも簡単です。この記事が、サイトを自作している同志の皆様の一助になれば幸いです。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

RELATED

サイトパーツ作成方法 ・HTMLの小技集 ・全記事表示 

広告