今回はSTUDIOで作成したお問い合わせフォームからの問い合わせへ自動で添付ファイル付きメールを送信する方法をご紹介します。この記事では、STUDIOとGoogle App Scriptの連携により、効率的かつ迅速にお問い合わせへ対応する方法を詳しく説明していきます。このシステムを導入することで、より高い顧客満足度を実現することが可能です。

STUDIOとは？

STUDIOは、コーディング不要で直感的にウェブサイトをデザインできるツールです。ドラッグアンドドロップで簡単にページのレイアウトを設計し、リッチなビジュアル表現を実現できます。

Google App Scriptとの連携の重要性

Google App Scriptを利用することで、STUDIOのフォームからの問い合わせに対して、自動でメール応答するシステムを構築できます。これにより、即時性の高いコミュニケーションが可能になり、顧客満足度を高めることができます。

自動返信システムの実装方法
【宣伝】ココナラで出品中のサービス紹介

自動返信システムの実装方法

STUDIOでお問い合わせフォームの作成

まずは、STUDIOのデザインエディタ上で「Form」を作成します。今回は一番基礎的なフォームを使って作成していきます。

「追加」タブの中の「Form1」をクリックし、エディタ上に配置します。

配置したフォームエディタはお好みのデザインに合わせて変更することも可能です。フォームへの入力形式や、必須回答項目かなどについては、画面右側の詳細画面から設定できます。

今回は例として少しデザインを変更し、デフォルトで入力してもらう「名前」「メールアドレス」「メッセージ」「確認のためのチェック」の４項目以外に、「会社名」を追加しました。追加したデザインと詳細設定の画面については以下のようになっています。

※フォームの入力項目の詳細設定について少し解説させていただきます。

項目名：
STUDIOのダッシュボード上で項目として表示される名前になります。Googleスプレッドシートと連携する場合、スプレッドシートの１行目にもここで設定した名前で表示されます。

タイプ：
フォームに入力する形式を指定できます。「text」「email」「tel」の３パターンから設定できます。例えば「email」のタイプを選択した入力項目では、「＠」をつけない入力はメールの形式ではないということで入力規則のエラーのように表示することができます。

必須項目：
項目への入力が必須項目かどうかを指定できます。必須の項目を全て埋めた状態でなければ送信することができないように指定できます。

プレースホルダー：
入力フォームに、何も入力していない場合に表示されている例文のようなものです。今回の場合「Your name」と記載していますが、「ここに名前を入力してください。」など具体的に入力内容を指示してあげることでフォームに入力するユーザーが迷わなくなる手助けをできます。

次に今回作成したフォームの名称を識別しやすい名前に変更しておきます。ここで作成した名前はSTUDIOのダッシュボードに表示され、この後の「有効化」する際に、どのフォームを有効化するべきかを分かりやすくすることに役立ちます。(※１つのプロジェクトで１つしかフォームを使わない場合、名前はデフォルトのままでも問題ないことが多いですが、今回は説明のため変更しておきます。)

これで、STUDIOのデザインエディタ上で行う作業は完成になります。

STUDIOのフォームの有効化とAPI連携

次は、先ほど作成したフォームの有効化とGoogleスプレッドシートとの連携について設定していきます。まずはSTUDIOのダッシュボードへ戻り、「フォーム」タブを開きます。

画面の左側に先ほどデザインエディタ上で名前を変更したフォームが表示されているので、そちらをクリックします。すると、下記のように「有効化する」ボタンが表示されるので、クリックします。

「有効化する」をクリックすると下記のような画面になるので、とりあえず今回は真ん中あたりにあるスプレッドシートとの外部連携のアイコンをクリックします。（※「フォーム通知の送信先」や「通知メッセージタイトル」は今回の自動送信とは関係ないので説明を割愛します。）

するとGoogleアカウントを選択し、ログインする画面が表示されます。アカウントを選択すると、「STUDIOがGoogleアカウントへの追加アクセスを求めています」という表示が出るので、「続行」をクリックします。

下記のような表示になれば、STUDIOとGoogleスプレッドシートの連携が完了です。

スプレッドシートとGoogle App Scriptの準備

次は、先ほど作成したSTUDIOのフォームに、ユーザーが情報を入力した情報を管理するリストの作成をスプレッドシートで実施していきます。

とは言っても、リスト作成の準備は、先ほどの連携の作業で完了しているので、どのようにリストが作られるかを確認してみましょう。まずはSTUDIOのダッシュボードにて「連携済み」となったスプレッドシートのアイコンをクリックし、連携したスプレッドシートの開きます。

次に一度STUDIOのデザインエディタに戻り、ライブプレビューボタンを押して、入力フォーム画面を開きます。入力フォーム画面に必要事項を記載し、全項目埋めたらフォームを送信しましょう。

先ほど開いたGoogleスプレッドシートをを見ると、１行目に５つの項目「Name」「Email」「Company」「Message」「Confirm」が表示され、２行目以降に入力フォームで入力した情報が入っていることを確認できます。入力フォームからの入力件数が増えれば、どんどん下の行に情報が追加されるようになっています。

自動送信スクリプト作成

ここまでで、STUDIOの入力フォームから送信された内容を、連携されたスプレッドシートに自動で入力するということができました。

ここからはGoogle App Scriptにスクリプトを書き込んで、「スプレッドシートの新しい行に情報が入力されたら、最新のB列に記載されたメールアドレスに自動でメールを送る」ということを実装していきます。

スプレッドシートの「拡張機能」タブからApp Scriptを開きます。

すると、新しいページでスクリプトエディタが開くので、こちらに「スプレッドシートの新しい行に情報が入力されたら、最新のB列に記載されたメールアドレスに自動でメールを送る」のスクリプトを書き込んで保存します。

具体的なスクリプトはこちら

function onChange(e) {
  var spreadsheetId = 'ここにスプレッドシートのIDを入力'; // スプレッドシートのIDを設定
  var sheet = SpreadsheetApp.openById(spreadsheetId).getActiveSheet();
  var lastRow = sheet.getLastRow();
  var emailAddress = sheet.getRange(lastRow, 2).getValue(); // B列のメールアドレス

  // トリガーされた変更がスプレッドシートの行追加であることを確認
  if (e && e.changeType === 'INSERT_ROW') {
    var subject = "自動返信メール";
    var body = "こちらは自動送信メールです。必要な情報を添付いたしました。";
    var fileId = 'ここに添付ファイルのIDを入力'; // 添付するファイルのIDを設定
    var file = DriveApp.getFileById(fileId);

    // メールアドレスが有効か確認
    if (emailAddress) {
      MailApp.sendEmail({
        to: emailAddress,
        subject: subject,
        body: body,
        attachments: [file.getAs(MimeType.PDF)] // PDF形式のファイルを想定
      });
    }
  }
}

※スプレッドシートIDと、添付するファイルIDはご自身の保存先に合わせて入力ください。

スプレッドシートID
ちなみにスプレッドシートIDはスプレッドシートのURLの中にあり、「https://docs.google.com/spreadsheets/d/」と「/edit」の間にある一連の文字列になります。
※例えば、URLが「https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I0J/edit#gid=0」であれば、スプレッドシートIDは「1A2B3C4D5E6F7G8H9I0J」になります。

ファイルID
また、添付ファイルのURLは「 https://drive.google.com/file/d/ファイルID/view」という形になっています。このURLの中の /file/d/ と /view の間にある一連の文字列が、そのファイルのIDです。
※例えば、URLが「 https://drive.google.com/file/d/1A2b3C4d5E6f7G8h9I0J/view」であれば、ファイルIDは「1A2b3C4d5E6f7G8h9I0J」になります。

デプロイとトリガー設定

次に、先ほど作成したスクリプトを実行するトリガーの設定をしていきます。

まずは作成したスクリプトをウェブアプリとしてデプロイしていきます。Google App Scriptのエディタの右上あたりにある「デプロイ」ボタンをクリックし、表示されたウィンドウで「ウェブアプリ」を選択し、「デプロイ」ボタンをクリックしましょう。

すると、下記画像のようにデータへのアクセスの承認画面が表示されるので、アクセスの許可をしていきましょう。

データへのアクセスの許可が完了したら、画面左側のトリガーの管理画面に移動します。そこで右下に表示される「トリガーを追加」ボタンをクリックし、新しいトリガーを追加しましょう。

追加するトリガーの設定は下記のようにしておきます。「イベントの種類を選択」という項目については、「変更時」に設定します。こうすることで、API等によりスプレッドシートの変更があった際に、スクリプトのonChange関数が呼び出されるという設定になっています。下記のように設定し終えたら右下の保存ボタンを押します。

保存した結果、下記画像のように新しいトリガーが追加されていれば、トリガーの設定は完了です。

自動送信確認テスト

最後に、自動送信ができるかの確認テストを行います。結果として、

①STUDIOのライブプレビュー画面で入力項目を入力して送信。
②スプレッドシートの最新行に入力内容が反映される。
③フォームで入力したメールアドレスで文面と指定したファイルを受信。

という自動返信機能の確認をすることができました。

【宣伝】ココナラで出品中のサービス紹介

宣伝になりますが、今回のような自動送信メールシステムの構築まで対応可能なサービスをココナラで出品させていただいています。STUDIOの潜在能力を最大限に引き出し、あなたのウェブサイトを次のレベルへと導くお手伝いをさせていただきますので、もし興味があればご覧ください。

ココナラ[coconala]

ココナラは、あなたのできることを500円から出品できて、「誰かの役に立ちたい」「好きを仕事にしたい」「自分の力を試したい」を実現するサイトです。

まとめ

この記事では、STUDIOとGoogle App Scriptを連携させてメールの自動応答システムを構築する方法について詳しく解説しました。STUDIOでデザインした美しいウェブフォームからの問い合わせに、Google App Scriptを用いて自動で返信するシステムは、時間の節約はもちろん、顧客サービスの向上にも大きく貢献します。このシステムを利用することで、日々の運営がよりスムーズに、そしてプロフェッショナルな印象を与えることができます。

【STUDIO】GASと連携した自動応答メールシステムの構築方法