Googleフォームで予約受付フォームを作ろう【連載2/5】

予約システム

連載「予約システムを自作しよう 」の3回目です。

前回に引き続き、店舗を訪れるお客様のための画面、いわゆる「表側」の機能になります。

引き続き、少しずつ開発を進めていきましょう。

Googleフォームを作ろう

Googleフォームの新規作成

まずは、Googleフォームを新規作成しましょう。

画面から右上のアイコンをクリックし、フォームを開きます。

「+」マークをクリックし、新しいGoogleフォームを作成します。

タイトルの設定

無題のフォームと記載されている箇所にフォームのタイトルを入力します。

今回は、「予約受付フォーム」と入力しています。

同様に左上の無題のフォームと記載されている箇所にもフォームのタイトルを入力していきます。

今回は、「予約受付フォーム」と入力しています。

メールアドレスの収集

「設定」タブをクリックします。

  • 「回答」の右側にある「 ^ 」をクリックします。
  • 「メールアドレスを収集する」を「回答者からの入力」にします。

筆者(kei)
筆者(kei)

「確認済み」は入力間違い等が少ないメリットがある一方で、Googleアドレスのログインが必須となるため、今回は「回答者からの入力」にしています。

フォーム送信後画面のメッセージ設定

「設定」タブをクリックした状態で

  • 「プレゼンテーション」の右側にある「 ^ 」をクリックします。
  • 「確認メッセージ」の右の「編集」をクリックします。

確認メッセージを入力します。

筆者(kei)
筆者(kei)

この予約システムでは、自動返信メールを送信させますので、ここで予約終了だと思われないようなメッセージを記載します。

「別の回答を送信するためのリンクを表示」をOFFにします。

筆者(kei)
筆者(kei)

今回の予約システムでは、自動返信メールを確認後、他の予約をしてほしいため、OFFにしています。

各項目を設定しよう

次に各質問項目を設定していきます。

予約日

  • 項目タイトルを「予約日」に変更します。
  • 回答方法を「日付」に変更します。
  • 「必須」のスイッチをONにします。
  • 「︙」から説明をクリックし、説明文言を追加するとわかりやすくなります。

予約開始時間

  • 右のサイドメニューから「+」をクリックし、項目を追加します。
  • 項目タイトルを「予約開始時間」に変更します。
  • 回答方法を「プルダウン」に変更します。
    • 10:00から17:00までの営業時間を30分単位で入れてください。
  • 「必須」のスイッチをONにします。
  • 説明を追加するとわかりやすくなります。

氏名

  • 右のサイドメニューから「+」をクリックし、項目を追加します。
  • 項目タイトルを「氏名」に変更します。
  • 回答方法を「記述式」に変更します。
  • 「必須」のスイッチをONにします。

会員番号

  • 右のサイドメニューから「+」をクリックし、項目を追加します。
  • 項目タイトルを「会員番号」に変更します。
  • 回答方法を「記述式」に変更します。
  • 説明を追加するとわかりやすくなります。
  • 「︙」から回答の検証にチェックします。

入力する文字列を制御するため、「正規表現」を選択します。

  • パターンに[0-9]{5}を貼り付けてください。
  • カスタムのエラーテキストに「半角数字5桁で入力が必要となります」と記載します。

プレビューで確認

各項目の設定が完了したら、プレビューで確認してみましょう。

画面右上にある目玉のアイコンがプレビューボタンとなります。

実際に入力することできますので、入力して動作確認をしてみましょう。

実際に送信した回答は、「回答」タブに表示されるので確認してみてください。

以上、Googleフォームの作成作業は完了となります。

その他の作業

ここでは、作成したGoogleフォームをサイト等で利用する際に必要なURLや埋め込みコードの取得方法について説明していきます。

URLの取得方法

右上の「送信」ボタンをクリックします。

真ん中のリンクタブをクリックします。

URLを短縮にチェックを入れ、上記に表示されたURLがこのGoogleフォームのURLになります。

埋め込みコードの取得方法

右上の「送信」ボタンをクリックし、右端の「<>」タブをクリックします。

幅、高さをサイト用に設定し、「HTMLを埋め込む」の下に出てきた<iframe・・から始まる文字列がサイトへの埋め込みコードになります。

まとめ

今回は、連載「予約システムを自作しよう 」の第3回目「Googleフォームで予約受付フォームを作ろう」を説明してきました。

ここまでの作業で、予約状況を表示するカレンダーと予約受付フォームが完成しました。こちらは店舗を訪れるお客様のための画面、いわゆる「表側」の機能です。

次回からはフォームで受け付けた内容を、Googleカレンダーに反映したり、Gmailで自動返信したり、「裏側」の機能について説明していきます。

次回の連載は、「Googleフォームの内容をGoogleカレンダーに反映させよう」です。

いよいよ、GAS(Google App Script)を用いてプログラムを作成する部分になります。

連載目次: 連載目次: 予約システムを自作しよう

  1. 予約システムを自作しよう
  2. Googleカレンダーをサイトに載せよう
  3. Googleフォームで予約受付フォームを作ろう
  4. Googleフォームの内容をGoogleカレンダーに反映させよう
  5. 予約内容をGmailで自動返信させよう

コメント