Googleフォームの問い合わせフォーム&自動返信メールの作り方

ども、てつ@sdblog35です！

サイトに問い合わせフォームは設置していますか？

問い合わせフォームがあると、運営者のメールアドレスを非公開にできたり、ユーザーはメールと違って入力しやすかったり、様々なメリットがあります。
その他にも、仕事の依頼が来たりサイトの審査で必要だったりと、明らかに設置するメリットの方が大きい問い合わせフォーム。

WordPressでの問い合わせフォームは、GoogleフォームとContact Form 7が有名ですが、今回は当サイトでも使っているGoogleフォームを使った問い合わせフォームの作成方法を解説します。
また、自動返信メールの設定方法も記載しているので、問い合わせしてくれた人に自動で返信メールも送信できちゃいます。こちらの設定方法も簡単なので、是非参考にしてみてください。

Googleフォームの作り方

今回解説する方法で作ると、当サイトと同じ問い合わせフォームになります。こんな感じです。

Googleにログインした状態でGoogleフォームをクリック。

続いて画面中央のGoogleフォームを使うをクリック。

画面右下にある新規作成ボタンをクリックすると新規のGoogleフォームが開きます。

まずは、Googleフォームのタイトルとフォームの説明をしましょう。

続いて必要な項目を入力・設定していきます。
必須項目の場合は右下の必須にチェックを入れましょう。
今回は以下の項目にしました。

入力内容	設定項目	必須項目
お名前	記述式	必須
ご連絡先メールアドレス	記述式	必須
お問い合わせ内容	段落	必須

ここでひとつ注意があります。
上記の表の入力内容は自動返信メールで使うので文言は変えないようにしてください。
この文言を変えてしまうと自動返信メール機能が正常に動かないためです。

完成したのがこちら。

ちなみに、フォームの色を変えたい場合は画面右上のカラーパレットで変更できます。

画像をアップロードすることもできるのは嬉しい。

続いて、フォーム送信後に表示される画面の設定に移ります。
右上のギアマーク(設定)ボタンをクリック。

確認メッセージに表示させたいメッセージを入力し、保存ボタンをクリック。

フォームに戻り、回答タブから画面右側にある縦に点が3つ並んでいるボタン(この正式名称が分かりません誰か教えて)をクリック。

新しい回答についてのメール通知を受け取るにチェックを入れましょう。
このチェックを入れることで、自分のGmailに問い合わせがあったことを知らせてくれるメールが届きます。

続いて、スプレッドシートをクリック。

問い合わせフォームに入力された内容を記録するスプレッドシートを作成します。
新しいスプレッドシートを作成にチェックを入れ、作成をクリック。
ちなみに、スプレッドシート名は私はいつもデフォルトにしてます。

スプレッドシートが開きます。
これでGoogleフォームの作成は完成です。

このスプレッドシートは問い合わせの履歴が残るのと、自動返信スクリプトを記述するので誤って削除しないように注意してください。

では、続いて自動返信メール機能を実装しましょう。

Googleフォームの自動返信メールの設定方法

先ほど開いたスプレッドシートのツール　−　スクリプトエディタをクリック。

スクリプトエディタが起動するので、まずはプロジェクト名を任意の名前に変更しましょう。

今回は自動返信スクリプトにしました。

せっかくなので、スクリプト名も変更しましょう。
画面左側にあるコード.gsの右側にある▼マークをクリックし、名前を変更をクリック。

ここも任意の名前で大丈夫です。
私はAuto_Replyにしました。

では実際にスクリプトを書きます。
と言っても、ソースコードを貼り付けるだけで大丈夫です。
まずは、既に書いてあるソースコードを削除しましょう。

削除したら、以下のソースコードを貼り付けて保存してください。
また、サイト名や文言は適宜変更してくださいね。

function for_users() {

//自動返信メールの件名
 var title = "【お問い合わせありがとうございます】"; 
 
 //自動返信メールの本文　\nは改行。 
 var body
 = "この度は【適当。でも繊細。（http://sdblog.com）】にお問い合わせいただきまして、誠にありがとうございます。\n"
 + "お問合せいただいた内容は次の通りです。\n"
 + "内容を確認の上、あらためてご連絡いたしますので、今しばらくお待ちください。\n\n"
 + "------------------------------------------------------------\n\n"

var body2
 = "------------------------------------------------------------\n\n"
 + "48時間経過しても返信がない場合は、お手数ですが再度フォームからお問い合わせください。\n"
 + "本メールに心当たりが無い場合は、その旨を記載の上ご返信くださいますようお願いいたします。\n\n";
 
 //変数を設定
 var name = 'お名前'; //フォームの項目名と同じにする
 var mail = 'ご連絡先メールアドレス'; //フォームの項目名と同じにする
 var address = "";
 
 var sheet = SpreadsheetApp.getActiveSheet();
 var row = sheet.getLastRow();
 var column = sheet.getLastColumn();
 var range = sheet.getDataRange();
 var TIMESTAMP_LABEL = 'タイムスタンプ';
 
 for (var i = 1; i <= column; i++ ) {
 
 //スプレッドシートの入力項目名
 var item = range.getCell(1, i).getValue(); 
 
 //スプレッドシートの入力値
 var value = range.getCell(row, i).getValue();
 
 //タイムスタンプ→お問い合わせ日時
 if ( item === TIMESTAMP_LABEL ) {
 item = 'お問い合わせ日時';
 }

// 日付フォーマットの変換
 if ( item === 'お問い合わせ日時' ) {
 value = Utilities.formatDate(value, 'Asia/Tokyo', "YYYY'年'MM'月'dd'日'HH'時'mm'分'ss'秒'");
 }

//本文（body）にフォームの入力項目を追加 
 body += "■"+item+"\n";
 
 //本文にフォームの入力内容を追加
 body += value + "\n\n";
 
 //フォームの入力項目が「お名前」の場合は、「様」をつけて、本文の前に追加 
 if ( item === name ) {
 body = value+" 様\n\n"+body;
 }
 
 //フォームの入力項目が「ご連絡先メールアドレス」の場合は、変数addressに入れる
 if ( item === mail ) {
 address = value;
 }
 }
 
 //本文1に本文2を追加
 body += body2;
 
 //宛名＝address、件名＝title、本文=bodyで、メールを送る
 GmailApp.sendEmail(address,title,body);
}

次は、自動返信スクリプトの実行タイミングを設定します。
時計マークをクリックします。