MENU

料金プラン

機能一覧

デモ

ご利用の流れ

お役立ちコラム



ステップバイステップ予約フォーム

操作ガイド

ステップバイステップ予約フォーム

「ステップバイステップの予約ウィザード」を使用すると、お客様は数ステップで予約に関するすべてを選択できるようになります。

この予約フォームをウェブサイトに追加するには、ウェブサイトの1ページ(または複数ページ)にAmeliaのショートコードを追加する必要があります。ショートコードはブロックエディター、Elementor、クラシックエディターなどのページビルダーを使用して追加できます。

別のページビルダーを使用している場合、またはショートコードボタンが見つからない場合は、次のショートコードを使用できます。

[ameliastepbooking]:基本的な予約フォームを表示したい場合。

[ameliastepbooking category=1]:ID 1のカテゴリのサービスのみを表示したい場合。

[ameliastepbooking service=1]:ID 1のサービスに対する予約フォームを表示したい場合。

[ameliastepbooking employee=1]ID 1のスタッフの予約フォームを表示したい場合。

[ameliastepbooking location=1]:ID 1の場所の予約フォームを表示したい場合。

その他の必要な組み合わせもご利用いただけます。

[ameliastepbooking show=services]:コースが有効になっているが、フォームにサービスのみを表示したい場合。

[ameliastepbooking show=packages]:コースが有効になっていて、フォームにコースのみを表示したい場合。

[ameliastepbooking package=1]:コースが有効になっていて、特定のコースのみを表示したい場合。

ショートコードをページに配置し、「公開」または「更新」するだけで完了です。Ameliaで利用可能なすべてのショートコードは、ショートコード一覧に掲載されています。

クラシックエディター

引き続きクラシックエディターを使用している場合は、Ameliaのアイコンを使用して、エディターから「ステップバイステップ予約フォーム」を選択して挿入することができます。

アイコンをクリックすると、Amelia予約フォームが開きます。ドロップダウンから「ステップバイステップ予約」を選択し、「OK」をクリックしてページを公開します。

  • デフォルト表示: サービス、場所、スタッフ(複数の場合)を選択するためのすべてのオプションを含む基本的な予約フォームが表示されます。
  • 事前選択: 特定のスタッフ、場所、サービス、または特定のカテゴリのサービスだけを表示したい場合は、「予約パラメータの事前選択」をクリックします。これにより、異なる予約フォームを表示するための4つの新しいオプションが表示されます(例:スタッフごとに異なる予約フォームを設定)。
  • コース表示:フォームにサービスのみ、コースのみ、またはその両方を表示するかを選択するオプションもあります。

サイトページでのステップバイステップ予約フォーム

現在の設定によっては、予約フォームのフィールドが異なります。
複数オプションがある場合: デフォルトのショートコードを使用すると、スタッフ、サービス、場所のすべてのフィールドが表示されます。
単一オプションの場合: スタッフ、サービス、場所がそれぞれ1つしかない場合、または特定のショートコードを作成した場合、お客様にはカレンダーのみが表示され、これらのオプションを選択することはできません。

ステップバイステップ予約フォームのレイアウト

ステップバイステップ予約フォームは、2つの異なるレイアウトを用意しています。

  1. リストレイアウト (デフォルト):すべての選択項目(サービス、スタッフ、場所)が最初のステップで一緒に表示されます(以下の例全体で表示されるレイアウト)。
  2. ステップのレイアウト:最初のステップが、「サービスの選択」、「スタッフの選択」、「場所の選択」という3つの個別の画面に分かれています。

レイアウトは、「Amelia」 > 「カスタマイズ」 > 「ステップバイステップ予約フォーム 2.0」で切り替えることができます。

ステップレイアウトに関する注意事項

  • サービスはカテゴリー別にグループ化されています。「詳細はこちら」をクリックすると、担当スタッフと場所が表示されます。サービスがコースに含まれている場合は、「コースで表示」をクリックすると、お客様はすぐにコースを予約できます。
  • スタッフと場所の両方を選択してから前に戻ると、前の選択がロックされます。選択内容を変更するには、戻る前に「任意のスタッフ」または「任意の場所」を選択する必要があります。
  • 個別のステップに分割されることを除けば、予約フローの残りの部分はリストレイアウトの場合と同じです。

リストレイアウトの最初のステップ

リストレイアウトの最初のステップでは、お客様に「サービス」、「場所」、「スタッフ」を選択するよう促します。会社設定で会社のメールアドレスを設定している場合は、フォームの左下に表示され、クリックして直接連絡を取ることができます。

「サービス」ドロップダウンをクリックすると、利用可能なすべてのカテゴリーが表示され、マウスオーバーで含まれるサービスリストを確認できます。いずれかをクリックして選択してください。

カテゴリー名の横の括弧内の数字は、そのカテゴリで作成された(およびサイトページに表示されるように設定された)サービスの数を表します。

ドロップダウンの右端にある「X」アイコンをクリックすると、選択した内容が解除され、すべてのカテゴリーが再度表示されます。スタッフと場所についても同様です。

スクリーンショットの例では、スタッフと場所は必須フィールドではないように設定されています(フィールド名の横にアスタリスク * がない)。これはAmeliaの基本設定で変更できます。

フォーム内のドロップダウンはすべてフィルターとして機能するため、例えば最初にスタッフを選択すると、そのスタッフごとに場所と利用可能なサービスが絞り込まれます。

新機能:検索: ドロップダウンをクリックすると、探しているデータを入力して、サービス、スタッフ、または場所を検索できるようになりました。

選択したサービスが1つ以上のコースに含まれている場合、フォームではこれらのコースが予約オプションとしてお客様に提示されます。お客様は、一つの予約のみを行うするか、表示されているサービスを含むコースを購入するかを選択できます。

グループ予約(同伴者オプション)

選択したサービスの「最大人数」が「1」を超えており、サービスの作成時に「人数を追加オプションを表示」を有効にした場合、フォームでは、お客様が自分だけのために予約するのか、それとも誰かを同伴するのかを尋ねます。

注意: ここで選択した人数は追加人数です。お客様が自分と3人の予約をする場合は、この手順で「3」を選択する必要があります。

予約日時と追加オプションの選択

お客様が提示されたコースをスキップした場合(またはコースがない場合)、2番目のステップは、サービスに追加オプションがあるかどうかによって異なります。追加オプションがある場合、これが2番目のステップになります。

追加オプションがない場合、2番目の手順は日付と時刻の選択になります。日付を選択すると、利用可能な時間枠が下に表示されます。

繰り返しの予約の設定

選択したサービスで繰り返しの予約を提供できるように設定した場合、お客様にこの予約を繰り返すかどうかを尋ねるポップアップが表示されます。

サービスの繰り返しの実行ロジックの設定方法によって、以下の画面は異なります。ここでは、お客様が予約の繰り返し実行日と終了日を選択できます。

次の画面には、繰り返しの予約の詳細が表示され、予約できない時間帯がある場合はお客様に通知されます。お客様は必要に応じて、これらの定期的な日付をクリックして変更することができます。

お客様情報と支払い

「予約フォーム」の次のステップでは、お客様が詳細(姓、名、メールアドレス、電話番号)を入力し、カスタム項目を選択または入力します。

必須項目に関する注意: 「メールアドレス」と「電話番号」はAmeliaの基本設定から入力必須項目として設定できますが、「姓」はカスタマイズセクションから入力必須項目として設定できます。

次のステップは支払いに関するものです。サービスが無料の場合は表示されません。Ameliaの支払い設定でクーポンが有効な場合、ここでクーポンを追加できます。

お客様はここで支払い方法を選択できます。「当日払い」の場合、「支払いは当日支払います」と表示されます。「Square」や「Stripe」を選択すると、「次へ進む」ボタンを押した後に決済情報の入力画面が表示されます。

注意: WooCommerceの支払い方法は、他のオンライン決済方法と併用できません。

予約完了画面

予約フォームの最後は「おめでとうございます!」画面です。ここでお客様は予約した予約の詳細(予約 ID、日付、時間、サービス、スタッフ、場所、支払い金額、支払いタイプ、お客様の詳細)を確認できます。

また、左上にあるオプションのいずれかをクリックして、Google、Outlook、Yahoo、または Apple カレンダーに予定を追加することもできます。

下部では、「お客様マイページ」(設定済みの場合)に直接アクセスするか、「完了」をクリックしてフォームを閉じることができます。「完了」をクリックするとデフォルトでは予約ページが更新されますが、Ameliaの基本設定にある「予約後のリダイレクトURL」セクションでカスタムページを設定することもできます。

お客様が提示されたコースのいずれかを選択した場合

お客様がコースを選択すると、コースに含まれるサービスのリストと、コース内の各サービスに含まれる予約数が表示されます。

コース予約の次のステップは、予約です。

担当者の選択: 複数の担当者が割り当てられている場合は、お客様は予約前に担当者を選択できます。

予約の埋め方: 「最低予約数」と「最大予約数」の設定に応じて、お客様は必要な数の予約をする必要があります。

上のスクリーンショットでご覧いただけるように、予約対象のサービス名がフォームの上部に表示されます。

たとえば、お客様が「カット」サービスの予約をしたとします。この時点で、このサービスに予約が1件しか設定されていなくても、お客様はコース内の必要な予約(回数)がすべて埋まるまで、自動的に次のサービスへと進みます。

予約されたすべての日時は、選択するとすぐに左側のメニューのプレビューに表示されます。そして、次の画面では、予約が完了したコースの概要が確認できます。

最後の2つのステップは、サービスを予約する際の最後の2つのステップ(「お客様情報」と「お支払い」)と同じです。この2つのステップを完了すると、コースの予約が完了します。コース内に予約枠が残っている場合は、お客様はお客様マイページから予約できます。