自社サイトからスムーズにイベント申込するための申し込みシステムをGoogleフォームとスプレッドシート、GASで自作してみた。

2025年1月16日 18:09

こんにちは。文京区で工作室もくもくはりねずみの運営をしているきさいちです。
もくはりでは、ワークショップや交流イベントなどいろいろなイベントを開催しています。
申込みフォーム周りでもうずーーっと悩んでいて、昨年秋ごろ最低限の機能だけで自作し、運用してみてそこそこいい感じなので共有します。

現在の状況と、困りごと

イベント情報のカレンダーはNotionで作っているウェブサイトに載せていてテンプレート化しており、新規作成は2クリックで作成できる状態になっている。
定期的に同じ内容のワークショップを行うことが多い
決済は現地のケースが多い（当日、ワークショップ講師に直接支払いしていただくことが多い）
お客様の中にはデジタルがあまり得意でない方もいらっしゃる。
今まで使ってきたもの：Peatix, Connpass, エアリザーブ, meetup, ストアカ

既存のイベント申し込みサービスを使ってみて、かゆいところ

サインアップ・ログインが必要なのが意外に痛い！
Connpassならエンジニア向け、Peatixならビジネス向け、meetupならインバウンド、ストアカは教える系のみなど、サービスの色にあっていないと使いづらい。イベントごとに申し込みサービスを変える羽目に。
イベントページをいちいち作るのが面倒くさい
Connpass以外、広告への課金やアカウントそのものを育てないと見つけてもらえない。
手数料とか利用料とかかかったりするものもある

公式LINEでつながっているお客さまがメインの場合、申込みのためにアカウントを新たに作らないといけないのは割と高いハードルで、得意でない方はやり方がわからずに離脱してしまいます。

公式LINEとNotion（ウェブサイト）と申込フォームで完結させたい。

紙での申し込みができないかというご相談もいただいており、これはこれで対応していかないとなーと思いつつ、まずはLINE→Notion→申込みフォームで完了できるように組み立ててみました。

これだけは、できるようにしたい要件

Googleフォームを複製せずに申し込みができる
申し込みできるイベントはスプレッドシートで管理する
申し込むとお客さまに完了メールが飛ぶ
申し込み枠がゼロになったら、選択肢から消す

キャンセル対応は申し込みシステム上では対応せず、申込み完了メールへの返信でもらうことにします。

スプシにイベント情報を追加すると

予約されると、スプレッドシートの「予約済みリスト」に申込者の情報が入る。

つかったツール

Googleフォーム
スプレッドシート
GAS

つくりかた

① Googleフォームを新規作成し、申込みに必要な欄をつくる
※ 2番目は氏名、3番目はメールアドレスにしてください。

② Googleフォームの「回答」タブをクリック→「スプレッドシートを表示」をクリック

③ event_listというタブを作成し以下のようにイベント情報を入力

④ スクリプトエディタを立ち上げ、コードをコピペ、修正。

以下、コード

// フォームとスプレッドシートのIDを指定します
const FORM_ID = 'FORM_ID'; // GoogleフォームのID
const SPREADSHEET_ID = 'SPREADSHEET_ID'; // スプレッドシートのID

function updateDropdownOptions() {
  const sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName("event_list");
  const data = sheet.getDataRange().getValues();
  
  const options = [...new Set(data
    .filter(row => row[5] > row[6]) // 定員 > 現在の予約数 の場合のみ
    .map(row => `${row[0]} - ${row[1]}`))];

  const form = FormApp.openById(FORM_ID);
  const items = form.getItems(FormApp.ItemType.LIST);
  const dropdown = items.find(item => item.getTitle() === "予約するイベントと時間枠を選択してください。").asListItem();
  
  dropdown.setChoiceValues(options);
}

function onFormSubmit(e) {
  const responses = e.response.getItemResponses();
  Logger.log("フォームの回答内容: " + responses);
  const option = { 
  from: "送信元メールアドレス",
  name: "送信者の名前"
  };

  const eventTitle = responses[0].getResponse();
  const email = responses[2].getResponse(); // 3番目の回答がメールアドレスと仮定
  const userName = responses[1].getResponse(); // 2番目の回答がユーザー名と仮定

  if (typeof eventTitle === "string") {
    const eventId = eventTitle.split(" - ")[0];

    const sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName("event_list");
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === eventId) {
        sheet.getRange(i + 1, 7).setValue(data[i][6] + 1);
        break;
      }
    }

    updateDropdownOptions();

    // メール送信の設定（改行コード \n を追加）
    const subject = "工作室もくもくはりねずみ 予約確認: " + eventTitle;
    const body = `こんにちは ${userName}さん、\n\n以下の内容でご予約を受け付けました：
    \n\nイベントID: ${eventId}\nイベント名: ${eventTitle}\n氏名: ${userName}さま\n\n予約内容の変更やご質問がある場合は、ご遠慮なくお問い合わせください。\n\nよろしくお願いいたします。\n\n工作室もくもくはりねずみ\nウェブサイト：mokuhari.com`;

    GmailApp.sendEmail(email, subject, body, option);
    
  } else {
    Logger.log("eventTitleは文字列ではありません: " + eventTitle);
  }
}

書き換えが必要なところ

const FORM_ID = 'FORM_ID'; // GoogleフォームのID
const SPREADSHEET_ID = 'SPREADSHEET_ID'; // スプレッドシートのID
from: "送信元メールアドレス"
name: "送信者の名前"
「// メール送信の設定」以下にある、申込者への自動完了メールで送る文章

つかいかた

スプレッドシートのevent_listのイベント情報を更新する
AppScript のエディターを開き、「updateDropdownOptions」を選択して実行する。これによりスプレッドシートで更新されたイベント情報がフォームに反映されます。

これで、準備は完了です。
申し込みテストをしてみてください。
このように、入力したアドレス宛にメールが帰ってくればOKです。

アップデートしたい機能

申し込みがあった時、運営のDiscordに通知する
申し込み完了のメールは、内容や見た目をHTMLメールですこしきれいに整えたい。