AIサマリー
適切なツールがなければ、複数の拠点にわたる予約管理は悪夢のような作業になりかねません。特に、顧客が予約前にあなたの所在地を確認する必要がある場合にはなおさらです。
WPFormsとジオロケーションアドオンを使用すれば、インタラクティブな地図上ですべての場所を表示し、訪問者が希望の場所を選択できる、複数場所対応の予約フォームをWordPressで作成できます。
このガイドでは、複数のオフィス、サービスセンター、またはイベント会場を単一の地図上に表示する予約フォームの作成方法を説明します。これにより、お客様が最寄りの場所を簡単に見つけて予約できるようになります。
今すぐマルチロケーション対応のWordPressフォームを作成しましょう！ 🙂
複数拠点対応のWordPress予約フォーム作成方法
WordPressで複数場所の予約フォームを作成するには、実際に重労働をこなせるプラグインが必要です。私が常に推奨するのはWPFormsです。以下の手順に従って始めましょう：
ステップ1: WPForms Proプラグインをインストールする
WPFormsは、お問い合わせフォームや予約フォームなどのフォーム作成に最適なツールです。2,100種類以上のWordPress用フォームテンプレートが利用可能です。
WPFormsで最も気に入っている点は、強力なフォーム機能と組み込みの地理位置情報ツールが統合されていることです。複数のプラグインを組み合わせたり、カスタムコードを書いたりする必要はありません。
WordPressで複数場所の予約フォームを作成するには、WPForms Proが必要です。このチュートリアルで必要となるジオロケーションアドオンとマップフィールドが含まれています。
まずはProライセンスをご購入ください。その後、あなたのウェブサイトにWPFormsをインストールしてください。ヘルプが必要な場合は、WordPressにプラグインを追加する方法についての指示に従ってください。
ステップ2: 位置情報アドオンを有効化する
インタラクティブマップを予約フォームに追加するには、まずジオロケーションアドオンをインストールする必要があります。これがマップフィールドの基盤となる機能です。
まず始めに、WordPressダッシュボードの「WPForms」＞「アドオン」 に移動します。検索バーに「Geolocation」と入力すると、アドオンを素早く見つけることができます。
表示されたら「アドオンをインストール」をクリックしてください。インストールには通常数秒しかかかりません。その後、「有効化」をクリックしてサイト上で有効にしてください。
さて、ここで時々つまずく点があります：ジオロケーションアドオンは、マップフィールドが正常に機能するためにGoogle Places APIまたはMapbox APIキーを必要とします。
技術的に聞こえるかもしれませんが、WPFormsにはステップバイステップのガイドがあり、想像以上に簡単です。完全な設定手順については、ジオロケーションアドオンのドキュメントをご確認ください。
Google PlacesまたはMapboxに必要なAPIを有効化する手順を説明し、その後そのキーをWPForms » 設定 » 地理位置情報に入力します。
APIキーを追加して設定を保存したら、準備は完了です。ジオロケーションアドオンが使用可能になり、フォームにインタラクティブマップを追加できるようになります。
ステップ3：新しい予約フォームを作成する
ジオロケーションアドオンが有効化されたので、いよいよ実際の予約フォームを作成します。WordPressダッシュボードの「WPForms」→「新規追加」に移動し、フォームビルダーを開いてください。
いくつかのオプションが表示されます。時間を節約したい場合は、予約受付フォームテンプレートなど、2,100種類以上のWordPressフォームテンプレートから選択し、「テンプレートを使用」をクリックしてください。
これらのテンプレートには既に一般的な予約項目が含まれているため、一から作成する必要はありません。ただし、ゼロから構築したい場合は、代わりに「空白のフォーム」を選択してください。
すべてのフィールドを手動で設定したくないが、カスタム要件がある場合の別の選択肢は、WPForms AIフォームビルダーに処理を任せることです。
紫色の「AIで生成」ボタンにカーソルを合わせ、「フォームを生成」をクリックするだけです。AIフォームビルダー画面が表示されます。ここで、作成したいフォームの種類を指定します。
独自のプロンプトを入力するか、左側の提案から選択できます。生成ボタンを押すと、AIが数秒かけてフォームを作成します。
そこから、フォームのレイアウトを変更したり、新しいフィールドを追加・削除したり、その他のカスタマイズを行ったりできます。フォームが完成したら、保存ボタンをクリックするだけです。
ステップ4: フォームにマップフィールドを追加する
さあ、ここからが楽しい部分です。インタラクティブマップを追加すれば、訪問者はすべての場所を一目で確認し、自分に最適な場所を選ぶことができます。
フォームビルダーで、左側の「ファンシーフィールド」セクションまでスクロールダウンしてください。そこに「マップ」フィールドが表示されます。それを右側のフォームプレビューにドラッグしてください。
通常はフォームの上部に地図を配置し、ユーザーがすぐに選択肢を確認できるようにしていますが、ワークフローに合わせて任意の位置に配置しても構いません。
マップフィールドを配置したら、それをクリックして左側のフィールドオプションパネルを開きます。ロケーションセクションが表示されるまで下にスクロールします。ここにすべての事業所、サービスセンター、または予約場所を追加します。
住所欄に、最初の場所の住所を入力し始めます。入力すると、自動補完の候補が表示されます。正しい候補をクリックして選択してください。これにより、場所が地図上に正確にピン留めされます。
次に、この場所にカスタム名をつけてください。「ダウンタウンオフィス」や「メインサービスセンター」などが適しています。この名前は訪問者が地図マーカーをクリックした際に表示されるため、明確で認識しやすいものにしてください。
追加の詳細（営業時間、連絡先、特別な注意事項など）を含めたい場合は、説明欄を追加することもできます。場所によってサービスやスケジュールが異なる場合に、これは非常に役立ちます。
追加の場所を追加するには、最初の場所のすぐ下にあるプラスアイコン（+）をクリックしてください。新しい入力欄が表示されます。同じ手順を繰り返します：住所を入力し、自動補完から選択し、名前を追加し、必要に応じて説明を入力します。
地図上に表示したいすべてのオフィスやサービスセンターが追加されるまで、場所の追加を続けてください。ここには厳密な上限はありません。5か所でも15か所でも、すべて追加できます。
完了すると、マップには自動的にすべての場所が個別のマーカーで表示されます。訪問者は各マーカーをクリックして、追加した名前と説明を確認できます。
各場所ごとにマップマーカーをカスタマイズする
場所を追加したら、マップマーカーをカスタマイズして各場所を目立たせましょう。ここでマップに個性を加え、訪問者が一目で場所を見分けられるようにできます。
フィールドオプションの「場所」セクションでは、追加した各場所の横に「アイコン」ドロップダウンが表示されます。ドロップダウンをクリックすると、「アイコン」または「画像」の2つの選択肢が表示されます。
アイコンを選択すると、数百種類のFont Awesomeアイコンから選べます。私は通常、地図のピンや建物のアイコンのようなシンプルなマーカーを使いますが、より具体的なものをお探しの場合は、コーヒーカップ、病院、ブリーフケースなどの選択肢もあります。
アイコンフィールドのすぐ横にカラーピッカーが表示されます。クリックするとマーカーの色を変更できます。特に異なる種類の場所がある場合に便利です。例えば、オフィスには青、小売店には緑、イベント会場には赤といったように色分けできます。
独自のグラフィックを使用したい場合は、「画像」を選択し、カスタムマーカーをアップロードしてください。ブランドイメージに合わせたい場合や、自社を象徴するデザインを使用したい場合に最適です。
マーカーのサイズは「サイズ」ドロップダウンで調整できます。私は通常、中または大に設定しています。これにより、特に一度に多くの場所を表示する場合でも、地図上で見つけやすくなります。
すべてのマーカーをカスタマイズすると、マップは見栄えが良くなり、見やすくなります。訪問者は各場所の正確な位置と、それがどのようなサービスや施設を表しているかを把握できるようになります。
予約時の場所選択を有効にする
複数の場所を設定したマップが完成したので、次はそれらの場所を選択可能にします。これにより訪問者は実際に予約したい場所を選ぶことができます。
マップフィールドのオプションパネルで、「場所の一覧を表示」トグルを探し、オンに切り替えてください。これにより、マップの直下にすべての場所の住所が整理されたリストとして表示されます。
その下にすぐに便利な機能が表示されます：「位置情報の選択を許可」オプションです（このオプションは、マップに2つ以上の位置情報を追加した後にのみ表示されます）。こちらも有効にしておきましょう。
これらの変更を加えた後、フロントエンドでは次のように表示されます。マップの下にあるリストの各場所の横にラジオボタンが表示されるようになりました。
訪問者は任意の場所をクリックして、希望の予約スポットとして選択できます。地図は選択箇所をハイライト表示して更新されるため、目的地が明確に把握できます。
現在、誰かがフォームを送信すると、選択された場所が他の予約詳細とともに記録されます。どのオフィス、サービスセンター、または会場が選ばれたかが正確に確認できます。
マップ表示設定を構成する
それでは、マップの見た目と動作を調整しましょう。このステップでは、どのマップコントロールを表示するか、訪問者がどのように操作できるかを制御できます。
開始するには、マップフィールドオプションの「詳細」タブをクリックしてください。ここで体験を細かく調整できます。「表示設定」では、各種マップコントロールの切り替えオプションが表示されます。
よりすっきりしたインターフェースにしたい場合は、全画面表示、地図タイプ、ストリートビューなどのコントロール要素を非表示にできます。次に、インタラクティブ設定までスクロールダウンしてください。ここでは、訪問者が地図自体をどの程度操作できるかを決定します。
操作をシンプルに保ち、誤ったスクロールやドラッグを防ぐには、ドラッグ可能機能や ズームスクロールを無効にできます。ユーザーが画面を移動することに気を取られないようにしたいフォームでは、この方法が有効だと実感しています。
次に進む前に、必ず「投稿でサムネイルを表示」を有効にしてください。これにより、WordPressダッシュボードの投稿一覧に小さな地図プレビューが表示され、投稿全文を開かなくても誰がどの場所を選択したかを簡単に確認できるようになります。
ステップ5: 通知と確認の設定
複数場所予約フォームの準備が整ったら、公開前に通知と確認メールの設定を数分で完了させましょう。フォームビルダーの「設定」＞「通知」から開始してください。
デフォルトでは、WPFormsは誰かがフォームを送信するたびにWordPress管理者のメールアドレスへ通知を送信します。件名などのデフォルト通知設定を編集したり、必要に応じて受信者メールアドレスを変更したりするには、こちらから操作してください。
スマートタグを使用すれば、ユーザーがフォームを送信した際にそのメールアドレスへ通知を送信することも可能です。これにより、フォームを受信したことと、折り返し連絡する旨をユーザーに知らせることができます。
これは特にWordPressの複数場所用フォームに当てはまります。この手順に関するヘルプについては、WordPressでフォーム通知を設定する方法に関するドキュメントをご覧ください。
設定が完了したら、設定メニューの「確認」に移動し、フォーム送信成功時の応答を設定してください。ここでは3つのオプションが用意されています：
- メッセージ： 同じページ上に簡潔なお礼メッセージを表示します 。手早くシンプルに済ませたい時に使います。
- 表示ページ： 訪問者をサイト内の特定のページ（次の手順や連絡先情報が記載された詳細な確認ページなど）にリダイレクトします。
- URLへ移動（リダイレクト）：外部URLへ送信します。サードパーティの予約システムやカスタムランディングページを使用する場合に便利です。
ご自身のワークフローに合った方法をお選びください。メッセージオプションを選択した場合、デフォルトのテキストを以下のように具体的な内容に編集できます：「ご予約ありがとうございます！ご登録のメールアドレス宛に、まもなく確認メールをお送りします。」
その他の確認タイプに関するヘルプについては、フォーム確認の設定に関するドキュメントを参照してください。
ステップ6: 複数拠点予約フォームを公開する
複数場所の予約フォームの準備が整ったら、次は実際に訪問者が利用できるサイト上に配置する段階です。WPFormsでは、ページやブログ投稿、サイドバーウィジェットなど、ウェブサイトの複数の場所にフォームを追加できます。
フォームビルダーの上部にある「埋め込み」ボタンをクリックしてください。ポップアップが表示され、2つのオプションが表示されます：新しいページを作成するか、既存のページにフォームを追加するかを選択できます。
専用の予約ページを作成する場合は、「新規ページを作成」をクリックしてください。ページに「予約する」や「訪問をスケジュールする」などのタイトルを付け、「さあ始めよう！」をクリックしてください。
WPFormsは、フォームが既に埋め込まれた状態でWordPressブロックエディタを開きます。ここから、フォームの上部に導入文を追加したり、ページレイアウトを調整したり、フォームのスタイルを少し変更したりできます。
ページエディタで埋め込みフォームの周りをクリックすると、右側に新しいパネルが開きます。ここには WPForms の基本的なスタイリングオプションと高度なスタイリングオプションがあります。
フォームのスタイリングを素早く行うには、フォームテーマセクションで既製のテーマを選択できます。この例では、お気に入りのテーマの一つである「Tranquil」を使用しています。
他のテーマも自由に試してみてください。直接試すのが好きなら、手動でフォームのさまざまな要素をより正確にカスタマイズすることもできます。
マップが適切に表示され、フォームフィールドが期待通りに動作していることを確認したら、ページを公開してください。複数拠点対応の予約フォームが公開され、予約受付を開始する準備が整いました。
複数拠点対応のWordPress予約フォーム作成に関するよくある質問
WordPressで複数場所の予約フォームを設定する場合、いくつか疑問点があるかもしれません。以下に最もよくある質問への回答をまとめました。すべてがスムーズに動作するようお手伝いします。
WordPressにおける複数場所予約フォームとは何ですか？
複数拠点予約フォームでは、訪問者が予約や手配の際に複数の物理的な場所から選択できます。各オフィスや会場ごとに個別のフォームを作成する代わりに、すべての拠点を一度に表示するインタラクティブマップを備えた1つのフォームを使用できます。
特に複数のサービスセンター、イベントスペース、または予約受付場所を運営するビジネスにおいて、これは非常に役立ちます。訪問者は各場所の位置を確認し、最も便利な場所を選んで、その場で直接予約できます。
マップフィールドは予約フォームにどのように役立ちますか？
WPFormsの地図フィールドは、フォーム内にインタラクティブな地図を表示し、すべての場所を表示します。訪問者はズームやパン操作ができ、マーカーをクリックすると各場所の詳細を確認できます。
場所を選択すると、その選択内容はフォーム送信時に記録されます。この情報を利用して、予約を適切な担当チームに振り分けたり、場所に応じた確認メールを送信したり、単に記録を整理したりできます。
各地点の地図マーカーをカスタマイズできますか？
はい、可能です。マップフィールドに場所を追加すると、それぞれが地図上に独自のマーカーとして表示されます。
各マーカーのタイトル、住所、説明をカスタマイズできます。これにより、訪問者は各場所の異なる点（駐車場の有無、営業時間、提供サービスなど）を理解しやすくなります。
選択した場所に基づいて異なる通知を送信できますか？
もちろんです。フォームの通知設定で条件分岐を設定すれば、訪問者が選択した場所に応じて異なるメールを送信できます。
例えば、誰かがダウンタウンのオフィスで予約した場合、通知はダウンタウンのチームに届きます。アップタウンの場所を選択した場合、代わりにそのチームに通知が送られます。
お客様は1回の予約で複数の場所を選択できますか？
単一のマップフィールドでは不可能です。マップフィールドは、訪問者が1回の送信につき1つの場所を選択するよう設計されています。ビジネスモデルで複数の場所を同時に予約する必要がある場合は、各選択項目ごとに個別のドロップダウンフィールドまたは ラジオボタンフィールドを使用する必要があります。
マップフィールドはモバイル端末で動作しますか？
はい、モバイルでも問題なく動作します。地図は完全にレスポンシブ対応なので、訪問者はデスクトップと同じようにタップ、ズーム、操作が可能です。
スマートフォンやタブレットでテストしましたが、操作感はスムーズです。訪問者はどのデバイスを使っても、場所を選ぶのに問題はありません。
支払いフォームでマップフィールドを使用できますか？
はい、可能です。マップフィールドは、StripeやPayPal Commerceなどの決済フィールドと連携して動作します。
場所によって異なる金額を請求する場合、条件付きロジックを使用して合計額を調整できます。
例えば、ある場所での予約は、高級な施設や長いサービス時間のため、より高額になる可能性があります。
次に、知られていないWPFormsの隠れた機能
WPFormsには、ワークフローや作成するフォームを大幅に改善できる、すぐにはわからないツールやオプションが満載です。
これらの隠れた機能や特徴について、ぜひ当ガイドをご覧ください。見逃していたかもしれませんが、WordPressのフォームを次のレベルへ引き上げる可能性を秘めています。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
