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);
}

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

トリガーが設定されていません。今すぐ追加するにはここをクリックしてください。をクリック。

下記のように設定し保存します。

承認画面が表示されるので許可を確認をクリック。

このGoogleフォームを使うGoogleアカウントを選択します。

警告画面が表示されるので、画面左下にある詳細をクリック。

自動返信スクリプト（安全ではないページに）移動をクリック。

指定された文字を入力し、次へをクリック。

許可をクリック。

これで、自動返信スクリプトの設定は完了です。

では、ちゃんと動くかテストしてみましょう。
作成したGoogleフォームを送信し、以下のメールが届けば成功です。

残るはWordpressに問い合わせフォームを設置するのみ。

WordPressにGoogleフォームを設置する

さて、最後はGoogleフォームをWordpressに設置するだけです。

先ほど作成したGoogleフォームの送信をクリック。

＜＞タブをクリックし、<iframe src=から始まるHTMLコードをコピーします。このHTMLコードをWordpressの固定ページに貼り付けます。
また、高さですがあまり低いとフォームが全て映らなくなる(下部が切れちゃう)ので注意が必要です。
今回は1200としました。

コピーしたHTMLコードを固定ページに貼り付けます。
HTMLコードなのでテキストウィジェットに貼りましょう。

作業はこれで完了です。
実際に問い合わせフォームが表示されるか確認しましょう。
以下のように表示されていれば成功です。

お疲れ様でしたm(_ _)m

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

いかがでしたでしょうか。

意外と簡単でしたよね？
Gmailをメインで使っている人はGoogleフォームを使ったほうがメリットが大きいと思います。
それにプラグインはどうしても重くなったりしますからね。
以上、Googleフォームの問い合わせフォーム&自動返信メールの作り方でした。