AIサマリー
次のような状況を想像してみてください。ある顧客があなたのサイトにアクセスし、注文フォームに2つの商品を追加して、購入手続きに進みます。ところが、配送情報の入力画面で手を止めてしまいます。その顧客は、あなたの店舗からたった3ブロック先に住んでいるのです。昼休みに歩いて行ける距離なのに、わざわざ送料を払って2日間も待つ必要があるでしょうか？
もしフォームに店頭受取のオプションがない場合、顧客はタブを閉じて、代わりに直接あなたに連絡してくるでしょう。あるいは、もっと悪いことに、店頭受取が簡単にできる競合他社から購入してしまうかもしれません。
「オンライン購入・店頭受取（BOPIS）」は、もはや大手小売業者だけのものとは限りません。地元のショップ、レストラン、ベーカリー、さらには花屋までもが、顧客の期待に応える形でこのサービスを提供しています。そして嬉しいことに、これを実現するために本格的なECプラットフォームは必要ありません。WPFormsとGeolocationアドオンを使えば、WordPressの注文フォームにインタラクティブな店頭受取選択機能を簡単に追加できます。
やり方を詳しくお教えします。さあ、始めましょう！
WordPressの注文フォームに店舗受け取り選択機能を追加する方法（手順解説）
始める前に必要なもの
本題に入る前に、簡単に確認しておきましょう：
- WPForms Pro 以上。位置情報アドオンは、Pro プラン以上に含まれています。
- 「Geolocation」アドオンがインストールされ、有効化されました。
- Google Places API キーまたは Mapbox アクセストークン。どちらでも利用可能です。ここでは、それぞれの設定方法について説明します。
- お引き取り場所の一覧（住所、店舗名、およびお客様に表示したい詳細情報（営業時間、駐車に関する注意事項、入口への案内など））。
以上です！カスタムコード？いいえ。別の店舗検索プラグイン？必要ありません。ツールを切り替えながら作業する？そんなこと、絶対にありません！
でも、それって……なぜ？
なぜ、単純なドロップダウンではなく、ピックアップセレクターを追加するのですか？
店舗の所在地を一覧表示する通常のドロップダウンフィールドを使っても構いません。それで機能はします。しかし、インタラクティブな地図には、ドロップダウンでは決して実現できない3つの利点があります：
- 「どちらが自分に一番近いか」という疑問に、視覚的に答えてくれます。これは、地名が直感的に分かりにくい場合（例えば、顧客が「リバーサイド」と「ブリッジビュー」の違いを名前だけでは分からない場合など）に特に役立ちます。
- 信頼を築きます。実際の地図上のピンは、顧客に対して、貴社が実在する住所を持つ本物の企業であることを伝えます。これは、初めて購入する顧客にとって重要なポイントです。
- これにより、受け取り場所の取り違えを減らすことができます。顧客が地図上のピンを確認して自分で選択すれば、間違った場所にやってくる可能性は大幅に低くなります。
手順 1: Geolocation アドオンをインストールして有効にする
WordPressのダッシュボードにログインし、「WPForms」→「アドオン」に移動します。「Geolocation」を検索し、「アドオンをインストール」をクリックしてください。あとはWordPressが自動的に処理します。
有効にすると、WPFormsの設定画面に「位置情報」タブが新たに表示されます。
ステップ2：Google プレイスを連携する
「マップ」フィールドは、Google Placesから地図データを取得します。無料のGoogle CloudアカウントとAPIキーが必要です。
APIキーを取得したら、WPForms » 設定 » 位置情報に移動し、キーを貼り付けて設定を保存してください。
APIキーの設定でつまずいた場合は、Geolocation Addonのドキュメントに、Google Cloud Consoleの画面を一つずつ順を追って解説した詳細な設定ガイドがあります。
これはセットアップ全体の中で唯一、少し技術的な手順です。所要時間は約10分で、一度だけ行えば済みます。
ステップ3：店舗受け取り注文フォームのテンプレートから始めましょう
一から作成することもできますが、WPFormsには作業の90%を代行してくれるテンプレートがすでに用意されています。WPFormsの「新規追加」から、「Store Pickup Order Form」を検索してください。
このテンプレートには、以下のものがあらかじめ含まれています：
- 画像による商品選択
- 数量と色の選択肢
- 顧客連絡先情報
- 場所を選択するための「Map」フィールド
- Stripeのクレジットカード入力欄
- リアルタイムで更新される計算済み合計
- 利用規約の同意チェックボックス
このテンプレートを使えば、受け取り方法の選択機能がすでに組み込まれた、実用的な注文フォームが完成します。ここから先は、一から作り上げるのではなく、カスタマイズしていくことになります。
ステップ4：地図フィールドに受け取り場所を追加します
フォームビルダーの「Fancy Fields」セクションで、「Map」フィールドを探します。クリックするか、フォームプレビューにドラッグして追加します。
次に、プレビュー内の「Map」フィールドをクリックして、フィールドオプションを開きます。「一般」タブには「場所」セクションがあり、表示したい各集荷場所に対応するフィールドが表示されます。
各拠点について：
- 「住所」欄に住所を入力してください。Google プレイスが候補を表示しますので、正しいものを選んでください。
- 名前を入力してください（「ダウンタウン旗艦店」や「イーストサイド受取カウンター」など、顧客が認識しやすいもの）。
- 必要に応じて「説明」を追加してください。ここには、カスタマーサービスへの問い合わせを減らすための詳細情報（受け取り時間、利用するドア、到着時に電話をするかどうかなど）を記載します。
- 「+」ボタンをクリックして、次の場所を追加してください。
知っておくと役立つ管理画面の設定をいくつかご紹介します：
- 「近くの場所を検索」— ビルダーでこの機能をオンにすると、ブラウザが（管理者の）現在地を問い合わせ、住所の自動補完機能では近くにある候補が優先的に表示されます。すべての受け取り場所が自分のオフィスと同じ都市にある場合に便利です。この設定は、顧客がフロントエンドで表示される内容には影響しません。
- ズームレベル— デフォルトは15で、これは通りを見渡せる適切なズームレベルです。この設定は、場所が1か所のみの場合にのみ使用されます。複数の場所を追加して選択機能を有効にすると、地図はそれらすべてを表示するように自動的に調整され、この設定は無効になります。
ステップ5：マップを選択子に変換する（これが重要なポイントです）
デフォルトでは、「マップ」フィールドは表示専用です。つまり、顧客は店舗の場所を確認することはできますが、店舗を選択することはできません。これを実際のピックアップ選択機能にするには、「一般」タブにある以下の2つのトグルを有効にしてください：
- 「場所の一覧を表示」— 地図の下に、各場所の名前と住所をテキストリストとして表示します。これはアクセシビリティの観点から重要であり、また、地図上の小さなピンが操作しにくいと感じるモバイルユーザーにとっても役立ちます。
- 「場所の選択を許可」— リスト内の各場所の横にラジオボタンを追加します。これにより、地図がフォーム入力フィールドとして機能するようになります。
ステップ6：マップマーカーと表示をカスタマイズする
地図をありきたりなものではなく、ブランドらしさを感じさせるものにするためのいくつかの工夫：
カスタムマーカー — 各場所について、「アイコン」ドロップダウンを開き、以下を選択します：
- アイコン — 2,000点以上のFont Awesomeアイコンから選択できます（アイコンピッカーで検索してください）。デフォルトは星のアイコンです。
- 画像 — 「画像をアップロード」をクリックして、メディアライブラリからロゴやカスタムピンを使用してください。
次に、サイズ（小、中、大）と色を、カラーピッカー（プリセットカラー、ドラッグ＆ドロップ式のカスタムピッカー、または16進数）を使用して設定します。ブランドロゴ入りのマーカーを大きくすることで、地図上で店舗を他店と差別化できます。
[詳細] タブの設定 — 表示および操作の制御を行うには、[フィールドオプション] の [詳細] タブをクリックします：
- 表示設定：全画面表示を非表示、地図タイプ（衛星写真／地形図）を非表示、位置情報（マーカーをクリックした際に表示されるポップアップ）を非表示、ストリートビューを非表示。見やすさを重視し、ほとんどの項目はデフォルトで非表示になっています。
- インタラクティブ：カメラ制御を非表示、ズームを非表示、ドラッグを無効化、マウスによるズームを無効化。
- その他：エントリー内に表示、エントリー内にサムネイルを表示（投稿記録での地図の表示方法）、ラベルを非表示。
ステップ7：条件分岐を使用して、店頭受取専用の詳細を表示する
多くのチュートリアルでは触れられていない重要な点があります。注文フォームには、店頭受取または配送のいずれか一方にのみ適用される入力項目が含まれている場合が多いのです。両方のオプションを提供している場合は、フォームの上部に「お受け取り方法はどちらをご希望ですか？」というラジオボタン（選択肢として「店頭受取」と「配送」を用意）を追加してください。
次に、（WPForms Proに組み込まれている）条件分岐機能を使用して、以下を表示します：
- 「ピックアップ」が選択されている場合のみ、「地図」フィールドが表示されます。
- 「配送」が選択されている場合のみ、配送先住所の入力欄が表示されます。
これにより、フォームを簡潔に保ち、顧客が実際に求めている内容に的を絞ることができます。
ステップ8：テストを行い、公開する
フォームを保存し、WPFormsブロックを使ってページに埋め込んでください。どこかに公開する前に、デスクトップとモバイルの両方で実際に動作確認を行ってください：
- 地図はすぐに読み込まれますか？
- 選択した場所は、確認メールに実際に表示されていますか？
- 送信内容を確認したとき、WPForms » エントリーに正しく表示されていますか？
[詳細] タブで、[エントリーに表示]（および必要に応じて [エントリーにサムネイルを表示]）がオンになっていることを確認してください。これにより、お客様が選択した場所が、受け取り側の注文準備担当者に表示されるようになります。
多くの店主がここからこうする
基本的なピックアップフォームが動作するようになったら、知っておくべき2つのアップグレードがあります：
- Googleカレンダーとの連携。フォームをチームの共有カレンダーに連携させると、すべての受け取り予約が自動的にイベントとして表示されます。WPFormsをご利用のお客様からは、これにより、二重予約の原因となっていたカウンターの紙のノートが不要になったという声をいただいています。
- 「保存して後で続ける」。注文フォームが長い場合、「保存して後で続ける」機能を使えば、顧客は入力内容を失うことなく、後で戻って続きを行うことができます。
ピックアップセレクターが機能するためにこれらはどちらも必須ではありませんが、準備が整った際の便利なアップグレードとなります。
これで設定は完了です！マップフィールドとGeolocationアドオン、そして数分の設定作業だけで、本格的なインタラクティブなピックアップ選択ツールが完成します。
サイトに店頭受取機能を追加する準備はできましたか？まだお持ちでない方は、WPForms Proを入手し、Geolocationアドオンをインストールして、「Store Pickup Order Form」テンプレートから始めてみてください。あっという間に実用的なフォームを公開できます！
「店舗受け取り」選択機能の追加に関するよくある質問
「マップ」フィールドを使用するには、WPForms Proが必要ですか？
はい。「Map」フィールドは「Geolocation」アドオンの一部であり、Proライセンス以上で利用可能です。WPForms LiteまたはBasicをご利用の場合は、アドオンをご利用いただくにはアップグレードが必要です。
Google Places APIは無料で利用できますか？
Google Cloudを利用するには課金アカウントが必要ですが、Google Placesには、ほとんどの中小企業にとって十分な無料利用枠となる手厚い月額クレジットが付与されています。フォームへのアクセス数が膨大でない限り、ほぼ間違いなく無料枠内に収まるでしょう。また、安心したい場合は、Google Cloudで利用の上限を厳格に設定することも可能です。
「住所」フィールドと「地図」フィールドの違いは何ですか？
「住所」フィールドでは、顧客の住所を入力します。顧客が入力すると、オートコンプリート機能によって適切な住所が選択されます。「地図」フィールドでは、あらかじめ設定された店舗や拠点が地図上に表示され、顧客はその中から選択できます。受け取り場所の選択には「地図」フィールドを、「配送先住所」の入力には「住所」フィールドを使用します。多くの注文フォームでは、この両方が使用されています。
1つの「マップ」フィールドに、いくつの受け取り場所を追加できますか？
上限はありません。+ボタンをクリックし続けることで、さらに項目を追加できます。実用的な観点からは、1つのフォームにつき10項目以内に抑えることをお勧めします。30店舗以上を展開する地域チェーンの場合は、まず郵便番号の入力欄を追加し、条件分岐機能を使って、関連する近隣の店舗のみを表示するように設定することを検討してください。
地図上で他の店舗や観光スポットを非表示にできますか？
はい、ただし追加の手順が必要になります。レストランや近隣の店舗などのPOIを非表示にして、独自のマーカーのみを表示させるには、Google Cloud Consoleでカスタムマップスタイルを作成し、コードスニペットを使用して「Map」フィールドに適用する必要があります。この方法を利用したい場合は、WPFormsのデベロッパードキュメントにカスタムマップスタイルの適用方法について記載されています。
顧客がフォームを送信した後、どの場所を選択したかを確認するにはどうすればよいですか？
「WPForms」»「エントリー」に移動し、送信データを開きます。選択した場所が、名前や住所を含めてエントリーの詳細に表示されます。場所がエントリーレコードやメール通知に表示されるように、マップフィールドの「詳細」タブで「エントリーに表示」が有効になっていることを確認してください（デフォルトでは有効になっています）。
ピックアップの提出内容をGoogleカレンダーに連携することはできますか？
その通りです。これは、受け取りフォームにとって最も便利な機能アップグレードの一つです。Googleカレンダーのアドオンをインストールし、フォームをチームの共有カレンダーに連携させれば、受け取り注文が入るたびに自動的にカレンダーの予定が作成されます。これにより、多くの店舗が抱える「カウンターでの手書きメモ」という問題を解消できます。
次に、複数の拠点に対応したWordPressの予約フォームを作成します
注文フォームに選択リストを追加する以外にも、この強力な機能を活用する方法はあります。WordPressのフォームを使って予約やイベントの申し込みを受け付けていますか？それを複数拠点対応の予約フォームに変えてみてはいかがでしょうか？マップフィールドを使えば、それが可能です！詳しい手順については、チュートリアルをご覧ください。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
