AI要約
適切なツールがなければ、複数の拠点の予約管理は悪夢になりかねません。特に、顧客が予約する前に場所を確認する必要がある場合はなおさらです。
WPFormsとジオロケーションアドオンを使用すると、すべての場所をインタラクティブマップに表示し、訪問者が希望の場所を選択できるWordPressの複数拠点予約フォームを作成できます。
このガイドでは、単一のマップに複数のオフィス、サービスセンター、またはイベント会場を表示する予約フォームの作成方法を説明します。これにより、顧客は最寄りの場所を見つけて予約しやすくなります。
今すぐWordPressの複数拠点フォームを作成しましょう！🙂
WordPressで複数拠点に対応した予約フォームを作成する方法
WordPressで複数拠点予約フォームを作成するには、実際に大変な作業を行えるプラグインが必要です。WPFormsは私が常に推奨しているものです。始めるには以下の手順に従ってください。
ステップ1：WPForms Proプラグインをインストールする
WPFormsは、お問い合わせフォームや予約フォームのようなフォームを作成するのに最適なツールです。2,100以上のWordPressフォームテンプレートを利用できます。
WPFormsの最も気に入っている点は、強力なフォーム機能と組み込みのジオロケーションツールが組み合わされていることです。複数のプラグインを組み合わせたり、カスタムコードを書いたりする必要はありません。
WordPressで複数拠点予約フォームを作成するには、このチュートリアルで必要となるジオロケーションアドオンとマップフィールドが含まれるWPForms Proが必要です。
開始するには、Proライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法の手順に従ってください。
ステップ2：ジオロケーションアドオンを有効化する
予約フォームにインタラクティブマップを追加する前に、ジオロケーションアドオンをインストールする必要があります。これがマップフィールドの機能を強化します。
始めるには、WordPressダッシュボードのWPForms » Addonsに移動します。検索バーに「Geolocation」と入力して、アドオンをすばやく見つけます。
表示されたら、Install Addonをクリックします。通常、インストールには数秒しかかかりません。その後、Activateをクリックしてサイトで有効化します。
さて、ここで時々人々がつまずく部分です。ジオロケーションアドオンは、マップフィールドが正しく機能するためにGoogle Places APIまたはMapbox APIキーが必要です。
技術的に聞こえるかもしれませんが、WPFormsにはステップバイステップガイドがあり、聞こえるよりもはるかに簡単になります。完全なセットアップ手順については、ジオロケーションアドオンのドキュメントを確認してください。
Google PlacesまたはMapboxに必要なAPIを有効にし、そのキーをWPForms » Settings » Geolocationに入力する手順が説明されています。
APIキーを追加して設定を保存すると、すべて完了です。ジオロケーションアドオンは使用可能になり、フォームにインタラクティブマップを追加できるようになります。
ステップ3：新しい予約フォームを作成する
ジオロケーションアドオンがアクティブになったので、実際の予約フォームを作成する時間です。フォームビルダーを開くには、WordPressダッシュボードのWPForms » Add Newに移動します。
ここにいくつかのオプションが表示されます。時間を節約したい場合は、2,100以上のWordPressフォームテンプレートの中から、予約フォームテンプレートのようなものを選んでUse Templateをクリックできます。
これらのテンプレートには一般的な予約フィールドがすでに含まれているため、最初から始める必要はありません。ただし、最初から作成したい場合は、代わりにBlank Formを選択してください。
手動で全てのフィールドを設定したくないが、カスタム要件がある場合は、WPForms AIフォームビルダーに処理を任せるという別の選択肢があります。
紫色の「AIで生成」ボタンにカーソルを合わせ、「フォームを生成」をクリックするだけです。AIフォームビルダー画面が表示されます。ここで、どのようなフォームが必要かを記述します。
独自のプロンプトを入力するか、左側の候補から選択できます。生成をクリックすると、AIが数秒かけてフォームを構築します。
そこから、フォームのレイアウトを変更したり、新しいフィールドを追加/削除したり、その他のカスタマイズを行ったりできます。フォームに満足したら、「保存」ボタンをクリックするだけです。
ステップ4：フォームにマップフィールドを追加する
次に、訪問者がすべての場所を一度に確認し、最も適した場所を選択できるように、インタラクティブマップを追加する楽しい部分です。
フォームビルダーで、左側にある「Fancy Fields」セクションまでスクロールします。「Map」フィールドがそこに表示されます。右側のフォームプレビューにドラッグしてください。
通常、マップはフォームの上部近くに配置して、オプションをすぐに確認できるようにしますが、フローに合わせてどこにでも配置できます。
マップフィールドが配置されたら、それをクリックして左側の「Field Options」パネルを開きます。「Locations」セクションが表示されるまでスクロールします。ここに、すべてのオフィス、サービスセンター、または予約場所を追加します。
「Address」フィールドに、最初の場所の住所を入力し始めます。入力すると、オートコンプリートの候補が表示されます。正しい候補をクリックして選択します。これにより、マップ上の場所が正確にピン留めされます。
次に、この場所にカスタム「Name」を付けます。「Downtown Office」や「Main Service Center」のようなものが適しています。この名前は、訪問者がマップマーカーをクリックしたときに表示されるため、明確で認識しやすいものにしてください。
オフィス時間、連絡先情報、または特別なメモなどの追加の詳細を含めたい場合は、「Description」を追加することもできます。場所ごとにサービスやスケジュールが異なる場合に役立つことがわかりました。
さらに場所を追加するには、最初の場所のすぐ下にあるプラスアイコン「(+)」をクリックします。新しいフィールドセットが表示されます。同じプロセスを繰り返します。住所を入力し、オートコンプリートから選択し、名前を追加し、必要に応じて説明を入力します。
マップに追加したいすべてのオフィスまたはサービスセンターを含めるまで、場所を追加し続けます。制限はありません。5つの場所でも15の場所でも、すべて追加できます。
完了すると、マップにすべての場所が個別のマーカーで自動的に表示されます。訪問者はそれぞれをクリックして、追加した名前と説明を確認できます。
各場所のマップマーカーをカスタマイズする
場所を追加したら、マップマーカーをカスタマイズして、それぞれを目立たせることができます。ここでマップに個性を加え、訪問者が場所を一目で区別できるように支援できます。
フィールドオプションの[場所]セクションでは、追加した各場所の横にアイコンドロップダウンが表示されます。ドロップダウンをクリックすると、[アイコン]または[画像]の2つの選択肢が表示されます。
アイコンを選択すると、何百ものFont Awesomeアイコンから選択できます。通常は地図のピンや建物のアイコンのようなシンプルなマーカーを選びますが、より具体的なものを探している場合は、コーヒーカップ、病院、ブリーフケースなどのオプションもあります。
アイコンフィールドのすぐ横には、カラーピッカーが表示されます。それをクリックしてマーカーの色を変更します。これは、さまざまな種類の場所がある場合に特に役立ちます。たとえば、オフィスには青、小売店には緑、イベント会場には赤を使用できます。
独自のグラフィックを使用したい場合は、[画像]を選択してカスタムマーカーをアップロードします。これは、ブランドに合わせたい場合や、ビジネスを本当に表すものを使用したい場合に最適です。
サイズドロップダウンを使用してマーカーサイズを調整することもできます。通常、中または大に設定すると、特に多くの場所を一度に表示している場合に、地図上で見つけやすくなります。
すべてのマーカーをカスタマイズすると、地図が見栄え良く、ナビゲートしやすくなります。訪問者は各場所がどこにあるか、どのような種類のサービスや施設を表しているかを正確に確認できるようになります。
予約のための場所選択を有効にする
複数の場所で地図を設定したので、訪問者が実際に予約したい場所を選択できるように、それらの場所を選択可能にする時が来ました。
地図のフィールドオプションパネルで、[場所のリストを表示]トグルを探してオンにします。これにより、すべての場所の住所が地図のすぐ下に整然としたリストとして表示されます。
その下に便利なものが表示されることにすぐに気づくでしょう。[場所の選択を許可]オプション。（これは、地図に2つ以上の場所を追加した場合にのみ表示されます。）これもオンにしてください。
これらの変更を行うと、フロントエンドでは次のようになります。地図の下のリストにある各場所の横にラジオボタンが表示されるようになります。
訪問者はリスト内の任意の場所をクリックして、希望の予約場所として選択できます。地図は選択内容をハイライトするように更新され、どこに向かうかが明確になります。
これで、誰かがフォームを送信すると、選択された場所が他のすべての予約詳細とともにキャプチャされます。彼らが選んだオフィス、サービスセンター、または会場が正確にわかります。
地図の表示設定を構成する
次に、地図の外観と動作を調整しましょう。このステップでは、表示される地図コントロールと、訪問者が地図とどのように対話できるかを制御できます。
開始するには、[Map] フィールドオプションの [詳細] タブをクリックします。ここで、エクスペリエンスを実際に調整できます。[表示設定] の下には、さまざまなマップコントロールのトグルが表示されます。
[全画面表示]、[マップタイプ]、または [ストリートビュー] コントロールなどの要素を非表示にすると、よりクリーンなインターフェイスになります。次に、[インタラクティブ設定] までスクロールします。ここで、訪問者がマップ自体をどの程度制御できるかを決定します。
シンプルに保ち、誤ったスクロールやドラッグを防ぎたい場合は、[ドラッグ可能] または [ズームにスクロール] を無効にすることができます。これは、人々がパンして気を散らされたくないフォームに役立つことがわかりました。
続行する前に、[エントリにサムネイルを表示] を有効にしてください。これにより、WordPressダッシュボードのフォームエントリに小さなマッププレビューが追加され、エントリ全体を開かなくても、誰かが選択した場所を簡単に確認できます。
ステップ5：通知と確認を設定する
複数の場所を予約できるフォームの準備ができたら、公開する前に、通知と確認を設定するために数分かかります。フォームビルダーの [設定 » 通知] に移動することから始めます。
デフォルトでは、誰かがフォームを送信するたびに、WPForms は WordPress 管理者のメールに通知を送信します。デフォルトの通知設定（件名など）を編集したり、必要に応じて受信者のメールを変更したりできます。
[スマートタグを使用する]場合、フォームを送信したときにユーザーのメールアドレスに通知することもできます。これにより、受信したことと、すぐに連絡することを知らせることができます。
これは、WordPress の複数の場所を予約できるフォームでは特に当てはまります。この手順については、[WordPress でフォーム通知を設定する方法] に関するドキュメントを確認してください。
完了したら、[設定] メニューの [確認] に移動して、フォーム送信が成功した場合の応答を設定します。ここでは 3 つのオプションがあります。
- [メッセージ:] 同じページに簡単な感謝のメッセージを表示します。これは、物事を迅速かつ直接的にしたい場合に使用します。
- [ページを表示:] 訪問者をサイトの特定のページにリダイレクトします。たとえば、次のステップや連絡先情報が記載された詳細な確認ページなどです。
- [URL に移動 (リダイレクト):] 外部 URL に送信します。サードパーティの予約システムやカスタムランディングページを使用している場合に便利です。
ワークフローに合ったものを選んでください。メッセージオプションを選択した場合は、デフォルトのテキストを「ご予約ありがとうございます！確認メールは、提供されたアドレスにまもなく送信されます。」のように、より具体的なものに編集できます。
他の確認タイプについては、[フォーム確認の設定] に関するドキュメントを参照してください。
ステップ6：複数拠点予約フォームを公開する
マルチロケーション予約フォームの準備ができたら、訪問者が実際に利用できる場所にサイトに追加しましょう。WPFormsを使用すると、ページ、ブログ投稿、サイドバーウィジェットなど、ウェブサイトの複数の場所にフォームを追加できます。
フォームビルダーの上部にある埋め込みボタンをクリックします。ポップアップが表示され、2つのオプションがあります。新しいページを作成するか、既存のページにフォームを追加するかです。
専用の予約ページを作成する場合は、新しいページを作成をクリックします。「予約」や「訪問スケジュール」などのページタイトルを付け、開始！をクリックします。
WPFormsは、フォームが既に埋め込まれた状態でWordPressブロックエディターを開きます。ここから、フォームの上に紹介文を追加したり、ページレイアウトを調整したり、フォームを少しスタイル設定したりできます。
ページエディターで埋め込まれたフォームの周りの領域をクリックするだけで、右側に新しいパネルが開きます。ここでは、WPFormsの基本的なスタイリングオプションと高度なスタイリングオプションすべてを見つけることができます。
フォームのスタイル設定をすばやく行うには、フォームテーマセクションで既製のテーマを選択できます。この例では、Tranquilテーマ（私のお気に入りの1つ）を使用しています。
他のテーマも自由に試してみてください。たくさんのオプションがあります。直接実験するのが好きなら、フォームのさまざまな要素を手動でより正確にカスタマイズすることもできます。
マップが良好で、フォームフィールドが期待どおりに機能している場合は、ページを公開してください。マルチロケーション予約フォームがオンラインになり、予約の収集を開始する準備が整いました。
マルチロケーションWordPress予約フォームの作成方法に関するFAQ
WordPressでマルチロケーション予約フォームを設定する場合、おそらくいくつかの質問があるでしょう。すべてがスムーズに機能するように、最も一般的な質問に以下で回答しました。
WordPressのマルチロケーション予約フォームとは何ですか？
マルチロケーション予約フォームを使用すると、訪問者は予約や予約時に複数の物理的な場所から選択できます。各オフィスまたは会場ごとに個別のフォームを作成する代わりに、すべての場所を一度に表示するインタラクティブマップを備えた1つのフォームを使用できます。
これは、複数のサービスセンター、イベントスペース、または予約場所を運営しているビジネスにとって特に役立ちます。訪問者は各場所がどこにあるかを確認し、最も便利な場所を選択して、その場で予約できます。
マップフィールドは予約フォームでどのように役立ちますか？
WPFormsマップフィールドは、フォーム内のインタラクティブマップにすべての場所を表示します。訪問者はズーム、パン、マーカーをクリックして各場所の詳細を確認できます。
場所を選択すると、その選択がフォーム送信にキャプチャされます。これを使用して、予約を適切なチームにルーティングしたり、場所固有の確認メールを送信したり、記録を整理したりできます。
各場所のマップマーカーをカスタマイズできますか？
はい、できます。マップフィールドに場所を追加すると、各場所に独自のマーカーがマップ上に表示されます。
各マーカーのタイトル、住所、説明をカスタマイズできます。これにより、訪問者は各場所の違い（駐車場の空き状況、営業時間、提供されるサービスなど）を理解するのに役立ちます。
選択された場所に基づいて異なる通知を送信できますか？
もちろんです。フォームの通知設定で条件付きロジックを設定して、訪問者が選択した場所に応じて異なるメールを送信できます。
たとえば、ダウンタウンのオフィスで予約した場合、通知はダウンタウンのチームに送信されます。アップタウンの場所を選択した場合、代わりにそのチームにルーティングされます。
顧客は1回の予約で複数の場所を選択できますか？
単一のマップフィールドではできません。マップフィールドは、訪問者が提出ごとに1つの場所を選択できるように設計されています。ビジネスモデルで一度に複数の場所を予約する必要がある場合は、各選択肢に個別の ドロップダウン または ラジオボタン フィールドを使用する必要があります。
マップフィールドはモバイルデバイスでも機能しますか？
はい、モバイルでも問題なく動作します。マップは完全にレスポンシブなので、訪問者はデスクトップと同じようにタップ、ズーム、操作できます。
スマートフォンやタブレットでテストしましたが、エクスペリエンスはスムーズなままです。訪問者は、どのデバイスを使用していても、場所の選択に問題はありません。
マップフィールドを支払いフォームで使用できますか？
はい、できます。マップフィールドは、StripeやPayPal Commerceなどの支払いフィールドと連携します。
場所に基づいて異なる金額を請求する場合、条件付きロジックを使用して合計金額を調整できます。
たとえば、ある場所での予約は、プレミアム設備や長いサービス時間のため、より高価になる場合があります。
次に、あなたが知らなかったWPFormsの隠し機能
WPFormsには、すぐに明らかではないが、ワークフローと作成するフォームを大幅に改善できるツールとオプションが満載です。
私たちのガイドをチェックして、これらの隠し機能や、見逃している可能性のある機能について学び、WordPressフォームを次のレベルに引き上げましょう。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
