Studioで条件付き表示を活用した予約フォームを作る方法：Jotformで観光農園の複雑な予約を管理

Studioを使ってWebサイトを構築する際、フォーム機能が簡易的で、もう少し高度な予約フォームや見積フォームを実装したいという相談をよくいただきます。以前の記事では、STUDIOで簡単に見積・予約フォームを作る方法：JotformとHubSpot連携で案件管理も自動化というタイトルで、比較的シンプルなフォーム作成方法を紹介しました。

今回はさらに進んだステップとして、Jotformを活用し、条件付き表示や台数制限など、より複雑なロジックを備えた予約フォームの作成方法をご紹介します。特に、観光農園やぶどう狩りのような、一日滞在型のイベントに適した予約管理の仕組みを詳しく解説していきます。

観光農園の運営において、効率的な予約システムは非常に重要です。特に、駐車場の台数制限や、平日・週末で異なるアクティビティの提供など、複雑な条件が絡む場合、手作業での管理は非常に手間がかかります。そんなときに役立つのが、オンラインで予約を簡単に受け付けられるフォームビルダーサービスJotformです。

この記事では、Jotformを使って一日滞在型の観光農園（例: ぶどう）向け予約フォームを作成する方法を詳しくご紹介します。特に今回は駐車場の台数制限、アクティビティの人数管理、予約完了時の自動通知など、複雑な予約フォームの作成に必要な設定手順をステップバイステップで解説しています。

観光ぶどう園や類似の施設では、日帰り滞在型の予約システムが必要になることがあります。特に、時間帯に制限がなく、1日の予約枠が車の台数で決まっている場合、さらに、アクティビティや人数の入力が必要な場合は、予約フォームの構築に悩む方も多いでしょう。

作成には少し手間がかかりますが、お客様にとってシンプルで使いやすいフォームを作り、お客様の予約体験を向上させるために、この記事を参考にしてみてください。

1. フォームの構成を考える

まず、フォームの基本的な構成を考えることが重要です。今回の予約フォームでは、次の流れでお客様に情報を入力してもらう想定で作成していきます。

1. カレンダーから希望日を選択

2. 平日・週末に応じた車の台数の選択（休日は台数制限が必要なため）

3. ぶどう狩りやピザ作り、その他のアクティビティのメニューを選択し、人数を入力（大人・子供・未就学児）

4. オプション（魚つかみ取り）や焼肉セットの選択

5. 顧客の連絡情報を入力し、予約完了

これに基づいて、Jotformで具体的なフィールドとロジックを設定していきます。

2. 日付フィールドの作成

まずは、予約する日付を選ぶ「カレンダーフィールド」を追加します。

2.1 カレンダーフィールド（日付選択）を追加

1. 左のメニューから「要素の追加」をクリックし、「日付選択」を選択してフォームに追加します。

2. 「日付選択」フィールドで、予約可能な日付をお客様に選んでいただくことができます。この日付に基づいて後に設定するロジックが動作するので、最初に日付を設定することが重要です。

3. メニュー（アクティビティ）を追加する手順

次に、ぶどう狩りのメニューと、人数（大人・子供）を入力するフィールドを作成します。ここでは入力テーブルを使用して、人数を簡単に入力できるようにします。

3.1 入力テーブルの設定方法

1. 「入力テーブル」フィールドを追加

   左メニューから「要素の追加」をクリックし、「入力テーブル」を選択してフォームに追加します。

2. メニューごとの行を設定

   メニューに対応する行を追加します。
   例えば：巨峰狩り、巨峰狩り&シャインマスカット狩り

3. 列を「人数」に設定

   列は「大人」と「小学生 / 65歳以上」とします。
   単に人数を入力してもらうのでも良いのですが、やはり選択できた方が入力が楽なので歯車マークをクリックしてプロパティを開き、「フィールド」にて入力タイプとして「ドロップダウン」を選択します。下の方に「ドロップダウンオプション」という欄がありますので、そこに一行ずつ、1〜10くらいまでを記載します。これにより、メニューごとに大人と小学生 / 65歳以上の人数を選択できるようになります。

4. 未就学児フィールドの追加

   未就学児（無料）に対しても、同様に人数を入力できるように「入力テーブル」を追加します。

5. 条件付きロジックの設定（オプション）

   特定のメニューが選択された場合にのみ、特定の入力テーブルを表示したい場合は、「設定」の「条件」を使用して、メニュー選択に応じた表示制御を行います。
   ※次の章にて説明します

4. 日付に基づくロジックの設定

ここで、日付選択に基づいて、アクティビティが自動的に表示・非表示される設定を行います。平日と週末で表示される内容が異なる場合、この設定が重要です。

4.1 条件付きロジックの設定

シンプルなものの設定例です。

1. 上部の「設定」タブをクリック。

2. 左メニューから「条件」を選択。

3. 「条件を追加」をクリックし、「フィールドを表示/非表示」を選択。

4. 以下のように設定：
   もし: 「日付」フィールド
   ステート: 「が以下に等しい（曜日）」
   TARGET: 「入力値」
   入力値: 「土曜日」

5. 以下のように設定：
   実行する: 「非表示にする」
   フィールド: 特定のアクティビティ（例：ぶどう狩り（休日））のフィールドを選択

これで、ユーザーが日付を選択すると、その日に応じてアクティビティが表示・非表示されるようになります。

ただし、実際には「土曜日」だけでなく「日曜日」も追加したり「祝日」の設定も必要になります。また、実行する表示・非表示フィールド（テーブル）も複数になりますので、以下の添付を参考に設定いただければと思います。ちなみに2024年10月14日は月曜日ですが祝日のため個別に追加している、という例です。

5. 駐車場の台数制限の設定

次に、車の台数を入力していただく項目を作ります。
今回は以下の条件を前提としています。

平日: 特に制限なし。ドロップダウンから台数を選択
休日: 駐車場の台数制限を設定

平日についてはシンプルです。
「要素の追加」から「ドロップダウン」を選択し、プロパティのオプションにて一行ずつ1〜10くらいの数値を入れて設定します。

休日についてはJotformのウィジェット「数量限定ギフト登録」を使用すれば、特定の日に予約できる車の台数を管理できます。

1. 左のメニューから「要素の追加」をクリックし、「ウィジェット」タブを開いて「数量限定ギフト登録」を追加。

2. 各日付ごとに台数制限（例えば200台）を設定します。
   アイテム: 「10月6日（日）{200}」
   カウンターのラベル: 「台空き」

3. 先程の「4. 日付に基づくロジックの設定」と同様に、各日付のウィジェットを個別に作成し、「条件」で選択された日付に応じて、該当するウィジェットを表示するよう設定します。

4. 仮に特定の日の台数が200に達すると、駐車場のフィールドの数値が入力できなくなります。その項目が必須に設定されていることで、結果的に予約フォームが送信できなくなります。

6. お客様情報入力項目の追加

次に、顧客の連絡情報を入力するフィールドを追加します。
氏名、メールアドレス、電話番号などのフィールドを作成します。

少し話は逸れるのですが、私はお客様情報の入力は2ページ目に遷移するように作成しました。そのため、下のキャプチャをみていただくとわかるのですが、青い「Next」というボタンがあります。そのすぐ下に「+新しいページを追加する」というが見えると思いますが、もし画面を別ページに遷移させたい場合にも簡単に設定できます。遷移させるメリットは入力項目が多い場合、次へ次へと分割したほうが入力完了率が高まる、というのがあるので単にそれを実装してみたかった、というだけです。今回のフォーム程度の入力・選択項目数であれば、1ページでも全く問題ないと思います。

6.1 連絡先情報のフィールドを作成

1. 左のメニューから「要素の追加」をクリックし、「名前」「メール」「電話番号」などのフィールドを追加します。

2. 必要に応じて各フィールドに必須マークを付け、ユーザーが必ず入力するように設定します。

7. 予約完了通知の設定

最後に、予約が完了した際に管理者とお客様に自動で通知が届くようにします。

1. 「設定」タブに移動し、左メニューから「メール」を選択。

2. 「通知1」という通知がすでに設定されていると思います。これは最初から標準で設定されている通知でフォームが送信されたら管理者にメールが届きます。基本はそのままで良いと思います。

3. お客様にも通知が届くように「メールを追加」から「オートレスポンダーメール」を設定し、メールの内容など各項目を修正、追加してください。

8. Studioへの組み込み方法

8.1 フォームの埋め込み手順

次に、作成したJotformのフォームをStudioのWebサイトに埋め込む方法を解説します。

1. Jotformから埋め込みコードを取得：フォームの公開設定から埋め込みコードをコピーします。※下にキャプチャあり

2. Studioの問い合わせページへの埋め込み：Studioのデザインエディタから設置したいページを作成し、編集画面で、埋め込みたい場所にHTMLブロックを追加し、取得したコードを貼り付けます。※下にキャプチャあり

1のJotformの設定画面にてJSコードのコピー

2のStudioへの埋め込み方法（Studioの詳細な説明は割愛させていただきます。）

9. まとめ

このように、Jotformを活用して、駐車場の台数に基づいた予約制限や、平日・週末に応じたアクティビティの表示切り替え、さらにメニューごとに大人・子供の人数を入力できる予約フォームを簡単に作成できます。加えて、顧客情報の入力と通知設定もスムーズに行うことが可能です。同様のニーズを持つ施設やイベントでも、この方法を応用して予約フォームを作成することができます。

今後のフォーム作成においては、手動での設定が必要な部分もあるため、運用時のメンテナンスも考慮しながら運用することをお勧めします。

今回の記事では、StudioとJotformを使って、条件付き表示や台数制限を含む複雑な予約フォームの作成方法を紹介しましたが、もっとシンプルなフォームをお探しの方は、STUDIOで簡単に見積・予約フォームを作る方法：JotformとHubSpot連携で案件管理も自動化の記事もぜひご覧ください。見積フォームや基本的な予約フォームの作成手順をシンプルに解説しています。初心者の方にもおすすめです。