Googleフォームの問い合わせフォーム&自動返信メールの作り方と設置。GASはコピペでOK

ども！Google大好き管理人のてつ@sdblog35です！

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

問い合わせフォームがあると、運営者のメールアドレスを非公開にできたり、ユーザーはメールと違って入力しやすかったり、様々なメリットがあります。

その他にも、仕事の依頼が来たりサイトの審査で必要だったりと、明らかに設置するメリットの方が大きい問い合わせフォーム。

でも、Googleフォームを使ったことない、スクリプトって難しそうでちょっとなど、分からない方や不安な方も多いでしょう。

しかし、そんな悩みを解決すべく、誰でも簡単にできる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に設置する方は次項も設定しましょう。

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

最後はGoogleフォームをWordpressに設置するだけです。設置先は固定ページです。

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

＜＞タブをクリックし、<iframe src=から始まるHTMLコードを全てコピーします。このHTMLコードをWordpressの固定ページに貼り付けることで、Googleフォームを設置することができます。

また、高さですがあまり低いとフォームが全て映らなくなる(下部が切れちゃう)ので注意が必要です。

今回は1200としましたが、ご自身のテーマによって変わるので色々と試してみてください。

コピーしたHTMLコードを固定ページに貼り付けます。

HTMLコードなのでテキストウィジェットに貼りましょう。

作業はこれで完了です。

実際に問い合わせフォームが表示されるか確認しましょう。

以下のように表示されていれば成功です。

お疲れ様でした。

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

今回はGoogleフォームの問い合わせフォームと自動返信メールの作り方をご紹介しました。

難しそうなスクリプトをコピペすればいいので簡単でしたね。

今回の設定内容をまとめると、

1. Googleフォームの作成
2. 自動返信スクリプトの作成
3. WordPressにGoogleフォームを設置

です。

Gmailをメインで使っている人はGoogleフォームを使ったほうがメリットが大きいと思います。

それに、プラグインを使うと動作が重くなってしまうこともありますしね。

以上、Googleフォームの問い合わせフォーム&自動返信メールの作り方でした。