ども!Google大好き管理人のてつ@sdblog35です!
サイトに問い合わせフォームは設置していますか?
問い合わせフォームがあると、運営者のメールアドレスを非公開にできたり、ユーザーはメールと違って入力しやすかったり、様々なメリットがあります。
その他にも、仕事の依頼が来たりサイトの審査で必要だったりと、明らかに設置するメリットの方が大きい問い合わせフォーム。
でも、Googleフォームを使ったことない、スクリプトって難しそうでちょっとなど、分からない方や不安な方も多いでしょう。
しかし、そんな悩みを解決すべく、誰でも簡単にできるGoogleフォームを使った問い合わせフォーム&自動返信メールの作り方と設置方法をご用意しました!
そんな当サイトのお問合せフォームはコチラ↓
また、自動返信メールは、問い合わせしてくれた人に自動で返信メールも送信できちゃいます。問い合わせしたのに何も連絡が無いとユーザーは不安になってしまいますからね。設定は簡単なので是非試してみてください。
スポンサーリンク
Contents
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フォームの問い合わせフォームと自動返信メールの作り方をご紹介しました。
難しそうなスクリプトをコピペすればいいので簡単でしたね。
今回の設定内容をまとめると、
- Googleフォームの作成
- 自動返信スクリプトの作成
- WordPressにGoogleフォームを設置
です。
Gmailをメインで使っている人はGoogleフォームを使ったほうがメリットが大きいと思います。
それに、プラグインを使うと動作が重くなってしまうこともありますしね。
以上、Googleフォームの問い合わせフォーム&自動返信メールの作り方でした。
[…] たぶんこのあたりのサイトさんとかのを使ってると思いますので、習って […]
この記事の内容についての質問なのですが、スクリプトを実行しようとすると、”sendEmailが定義されていません” とのエラー表示が出てしまいます。
この場合、どのような対処をすれば宜しいでしょうか。
記載しているソースで確認したところ、エラーは発生しませんでした。
みくみく様がどの箇所をどのように修正しているか分からないので、一度ソースをそのままコピペして試してみるといいかもしれません。
それでも上手くいかない場合はソースではなく別のことが考えられるので、その際はもういちどご連絡いただければと思います。
大変助かりました!
自分で多少カスタマイズさせていていただきましたが
元がしっかりされているので、加工もとても楽でした!
ありがとうございました(o*。_。)oペコッ
[…] ☆参考にしたサイト Googleフォームの問い合わせフォーム&自動返信メールの作り方 | 適当。でも繊細。 […]
とても助かりました、ありがとうございます!
1点質問ですが、こちらのスクリプトで送信元をgmailではなく、インポートしたメールにするスクリプトを教えてください。
きむ様
コメントありがとうございます。
「インポートしたメールにする」とは具体的にどのようなことを指すのでしょうか。
私自身が素人なのでちゃんとした回答ができるか不安ですが、何かしらのアドバイスができるかもしれないのでお時間ある時に返信いただければと思います。
こんにちは、大変助かりました。
一つ質問ですが、こちらの自動返信のメールアドレスがGmeilアドレスで返信されてしまいますが、
これを任意のアドレスにする場合はどうすればいいのでしょうか?
一色様
コメントありがとうございます。
Gmailアドレス以外で返信することは技術的に可能かもしれませんが、あいにくその技術を持ち合わせておりません。
今回ご紹介した自動返信スクリプトはGmail向けに作成していることをご了承ください。
[…] 問い合わせフォームの設置方法はこちら。 >>Googleフォームの問い合わせフォーム&自動返信メールの作り方 問い合わせフォーム設置で悩んだのが、Contact Form 7かGoogleフォームでし […]
Hello everyone, it’s my first visit at this website, and post is actually fruitful foor me, keep up posting these types
of posts.
こんにちは。
フォームに日付けを設定すると、
日付けが自動返信で日本語ではなく、英語で出力されてしまいます。
どう対処したらよろしいでしょうか。
教えていただけますと幸いです。
ゆう様
コメントありがとうございます。
「自動返信メール内の『お問い合わせ日時』が英語表記になってしまう」ということでよろしいでしょうか。
もしかしたら、タイムゾーンの設定かもしれません。
以下の2つの項目について、タイムゾーンが「(GMT+09:00)東京」になっていることを確認してみてください。
<GAS側>
対象スクリプトのスクリプトエディタから、
[ファイル]-[プロジェクトのプロパティ]を選択
[情報]タブ-[タイムゾーン]
<スプレッドシート側>
対象スプレッドシートから、
[ファイル]-[スプレッドシートの設定]を選択
[全般]タブ-[タイムゾーン]
※[言語と地域]が日本になっていなければ日本にする
※上記はGASの記述が合っているのが前提
上記で違う場合は、お手数ですが再度コメントor問い合わせフォームからご返信ください。
[…] ームの作成は下記のサイトを参考にしたのでリンクを張っておきます。 ▷▷【適当。でも繊細】ブログを参考にする ▷▷【INFACT】ブログを参考にする ※フォームサイズは「幅670/高さ887 […]
[…] ームの作成は下記のサイトを参考にしたのでリンクを張っておきます。 ▷▷【適当。でも繊細】ブログを参考にする ▷▷【INFACT】ブログを参考にする ※フォームサイズは「幅670/高さ887 […]