イベントやセミナー予約フォームを作る

 これまで予約フォームはContacto Form7だけで作っていたが、今回どうしても人数制限をかけるにあたって先着順で締め切るために、コンタクトフォームでは限界があったので、他の方法を調べてみつけたのが、このプラグイン「MTS Simple Booking C」だった。

MTS Simple Booking Cを準備する。

「MTS Simple Booking C」は管理画面で検索しても出てこないので公式ページからダウンロードする。

公式サイトからダウンロードしたファイルをそのままプラグインの管理画面からアップロードする。

プラグインの新規追加

プラグインのアップロードを選択

「ファイルを選択」をクリックしてから先ほどダウンロードしたファイル
「mts-simple-booking-c-X.X.X.zip」を選んで「今すぐインストール」

インストールが完了したら「プラグインを有効化」で準備完了。
wordpressのダッシュボードに「予約品目」と「予約システム」が追加された。

ここから予約フォームを作成していく。

基本設定

まず、最初にすべき設定が「予約の受付」を有効にする。
ダッシュボードの「予約システム」から「各種設定」メニューに入って、「予約の受付」のチェックボックスにチェックを入れる。

設定変更したら必ず最後に「変更を保存」をクリック。

これで予約の受付が可能な状態になった。
次に必要事項の記載をしていく。

同じく「各種設定」の画面上部のタブから「施設情報」を入力する。

ここではイベント会場や、教室などの情報を入力する。
例)料理教室、料理教室、クリニック、学習塾、イベント名、イベント会場名など。
メールアドレスは、実際に応募が届くので受付の届くメールアドレスを入力。ここが入力されていないと、送信エラーとなる。

予約メールの欄では、お客様が入力する入力フォームに必要な項目を選択する。

今回は会社名を不要とした。メール文章は応募フォームから応募が届いた際に届くメール本文になる。最後にメールを確認しながら修正するのでいったんここで「変更を保存」で終わる。

イベントの作成

ここからいよいよ、イベントを立ち上げていく。

時刻と人数の設定

まずは、イベントと時刻の設定。日付は次の段階なのでここでは時刻と募集人数の設定を行う。
ダッシュボードの「予約品目」から「新規予約品目」をクリック。

タイトルにイベント名や、講座の名前などを入力。
本文や抜粋は空白で良い。

画面を下にスクロールしていくと時間と人数の入力欄がある。

時間は同じ日のコマ割りが設定できる。イベントや教室の開始時間を入力して「時間割追加」としていく。

人数の入力欄では、まず申込み締切りを「収容人数」にするか「予約件数」にするかを選択できる。
ここで「収容人数」にしておくと定員に達すれば自動で応募締切りにできる。

他の項目は「人数管理」の場合の「最大人数」や「件数管理」の場合の「予約人数」などを確認しながら入力。後で変更できるので、まずは1を入力して確認しても良いだろ。

すべて入力できたら画面上に戻って左側の「公開」ボタンをクリック。

スケジュールの設定

イベントと開催時間の設定ができたら、日にちを設定する。
ダッシュボードの「予約システム」から「スケジュール」を選択する。

「スケジューリングの予約品目と年月」の欄に先ほど作成したイベント名が表示されているので、そのイベントの開催日にチェックを入れる。1ヶ月単位で必ず「スケジュールの保存」を押さないと保存できないので注意。

カレンダーの日付の下には「0」の数字がある。これは日付単位で定員数を変更する場合に使用する。「0」のままなら、予約品目で設定した通りの人数になり、設定した人数より増減させる場合は、「3」や「-3」を入力する。
これにより定員+3人の受付となったり、マイナス3人の受付の設定が可能。

「0」が入った下の枠にはDIVのclass名を入れることでカレンダーのスタイルをカスタマイズが可能となるが、ここでは空白のままにする。

予約システムを公開する

ここまででイベント開催日時の設定が完了。
次はこれを公開するためのシステム画面を作成する。

イベントごとにカレンダーの表示をさせる。
まずはカレンダーを表示するために固定ページでカレンダーを作ります。

『固定ページ』⇒『新規追加』から固定ページを作成します。
任意のタイトルを入力して本文にはショートコード

[monthly_calendar id=”XXX”]

を記載する。

このとき、ショートコードの「xxx」の部分に入る数字は最初に作成した予約品目のIDになる。
Idの確認のは、予約品目の編集ページのURL部分「post=XXX」 の数字がidとなる。

この状態で固定ページを確認するとカレンダーが表示されていればOKとなる。

カレンダーが表示されずに、ショートコードがそのまま表示されたり、「予約品目が見つかりませんでした。」と表示される場合は、予約IDやショートコードが間違っている可能性がある。その場合はショートコードを手入力するなどしてみると良い。また、カレンダーはサイドバーなどにも表示させることができる。

最後に「予約フォーム」と「予約完了ページ」を作成する。この2つのページは全てのイベントで共通となる。
「予約完了ページ」は、予約フォームから送信した後に表示されるページのことである。

「固定ページ」⇒「新規追加」からイベント申込みフォーム用の固定ページを作成する。

この時タイトルは任意で良い。本文も空のままで。むしろ他のイベントと共通となるので、イベントが複数ある場合は単純に「予約フォーム」等にしたほうが良い。

そして、スラッグを必ず「booking-form」とする。パーマリンクの変更でも良いし、「表示オプション」から「スラッグ」チェックを入れてスラッグ入力欄に入力することもできる。

「予約完了画面」も同じく、「固定ページ」⇒「新規追加」から新しいページを作成して適当なタイトルをつける。

こちらは本文にはメッセージを「ありがとうございました」のようなメッセージをつける。そして同じくスラッグを変更する。今回は「booking-thanks」とすること。

ここまでの作業で、一通りのシステムが完成した。カレンダーから一連の動作確認をしてみよう。

まずは、カレンダーの申込み枠の「○」印をクリック。

すると、指定の日にちの時間枠選択画面に切り替わる。

同じく時間枠の「○」印をクリックすると、今度は予約フォームになる。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

seventeen − 11 =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください