[Googleフォーム]お問い合わせフォームから自動返信するHTMLを生成する方法

こんにちは！こちょすです。

今回はGoogleフォームを使ってお問い合わせフォームを実装します。

今回実装するフォームではGASを使ったスクリプトを書いてメールの自動返信機能を実装した上で、HTMLの生成方法までをイチから丁寧にご説明していきます！

GAS（Google Apps Script）を使ったことがないよーという方や、コーディングの知識が全然無いという方も、この記事にしたがって手順を実行すれば簡単に実装することができるので、ぜひやってみてくださいね！

インスタはこちら！日々のトレーニング動画や食事の記録を載せています！ぜひフォロー・応援お願いします！

instagram:@kochos05
Twitter:@kochos5

こんな方におすすめ

無料でお問い合わせフォームを実装したい
お問い合わせが来たら自動返信する仕組みを実装したい
自分のサイトにお問い合わせフォームを埋め込みたい

Googleフォームの作成

まずはGoogleフォームにアクセスをして、お問い合わせフォームを作っていきましょう。

www.google.com

Google フォーム - アンケートを作成、分析できる無料サービス

https://www.google.com/intl/ja_jp/forms/about/

自分でアンケートを作成するだけでなく、他のユーザーとも同時に共同で作成できます。また、デザイン性の高いさまざまな既製テーマから選択したり、独自のテーマを作成したりすることも可能です。しかも、Google フォーム内で結果を分析できる、Google の無料サービスです。

以下のようにパーソナルとビジネスを選ぶことができますが、今回はパーソナルで作っていきます。

次の画面ではフォームのデザインを選ぶことができます。

用途に応じて、テンプレートが用意されているので、自分のニーズにあったものを選べば楽に作成することができます！

今回はお勉強のために、ゼロから作っていきたいと思いますので、空白を選びます。

空白のデザインをクリックすると、自分でお問い合わせフォームを作っていく画面に移ります。

今回はお問い合わせフォームとして、以下のような項目を持つことにします。

ポイント

・お名前 (必須)
・メールアドレス (必須)
・題名
・メッセージ本文
・送信ボタン

項目の追加

以下のように項目名やインプットの種類などを設定していきます。
ポイントは右下の「必須」をONにしておくことです。

以下のように設定ができればOKです！

メールアドレスの入力チェック

メールアドレス欄には、メールアドレス以外の文字列が入力されないようにチェックを入れておきます。
メールアドレスの質問欄の右下にある「・・・」から、「回答の検証」を選択します。

次に入力規則に、テキスト＞メールアドレス＞「メールアドレスを入力してください」
として設定します。

テーマカラーの変更

お問い合わせフォームの色は右上のカラーパレットから変更することができます。

回答後のメッセージの変更

右上の設定ボタンから、お問い合わせフォームが送信された後に表示されるメッセージを変更することができます。

カラーパレットの2つ隣にある、歯車マークをクリックして、表示されるモーダルから、プレゼンテーションタブをクリックしてください。

フォームをスプレッドシートと連携する

次に回答を記録するためのスプレッドシートを紐付けます。
質問タブから、回答タブに移動します。

回答先を選択するので、「新しいスプレッドシートを作成」を選んで、タイトルには「お問い合わせ記録」などとしておきます。

すると、スプレッドシートが作成され、設定した項目とタイムスタンプの列が表示されていると思います。

フォームに入力してテストする

次はフォームに入力を行い、実際に先程作成したスプレッドシートに記録されることを確認します。

まずは上のプレビューボタンをクリックします。（カラーパレットと設定の間にある「目」のようなマークです）

プレビューを押すと、実際にお問い合わせの画面が表示されます。

ここに入力し、「送信」ボタンをクリックしてみましょう。
以下のように先程設定したメッセージが表示されます。

回答タブから、先程のスプレッドシートを見て、先程の入力が記録されていれば成功です。

自動返信メールの設定をする

最後に、問い合わせが来た場合に自動返信を行う仕組みを実装しておきたいと思います。

やり方は大きく2つあります。
１、スクリプトエディタからGAS（google apps script）を使って実装する
２、アドオン機能を使って実装する

２のほうが画面上で設定が完結してわかりやすいのですが、お金がかかってしまうため、今回は１のほうで実装をしていきます。
２の方法で実装したい方は以下の公式リファレンスをご参照ください

digitalinspiration.com

Email Notifications for Google Forms - Send Emails to Form Respondents

https://digitalinspiration.com/product/google-forms-notifications/

Get Google Forms responses in an email message when people submit your Google Forms. Send customized email notifications to form respondents based on their form responses

自動返信メールのスクリプトを書く

ではGASを書いていきます。
回答のタブの方で、［ツール］→［スクリプトエディタ］をクリックし、以下のようにコードを書きます。

function autoReply() {
 var sheet = SpreadsheetApp.getActiveSheet();
 var row = sheet.getLastRow();
 var name     = sheet.getRange(row, 2).getValue();
 var mail     = sheet.getRange(row, 3).getValue();
 var item     = sheet.getRange(row, 4).getValue();
 var contents = sheet.getRange(row, 5).getValue();

 var title = "お問い合わせありがとうございます。";//メールタイトル


 //メール本文を作成
 var mail_body
 = "お問い合わせありがとうございます。\n"
 +"下記のとおりお問い合わせを受け付けました。\n\n"
 + "--------------------------------------\n"
 + "○お名前\n"
 + name + "\n\n"
 + "○ご連絡先メールアドレス\n\n"
 + mail + "\n\n"
 + "○お問い合わせ項目\n\n"
 + item + "\n\n"
 + "○お問い合わせ内容\n"
 + contents + "\n\n"
 + "---------------------------------------\n\n"
 + "確認後、返信させていただきます";

//メール送信時のオプション
const options = {name: 'kochos（サイト管理者）'}; 


 GmailApp.sendEmail(mail,title,mail_body);//メール送信
}

以下のようになります。