AI要約
このようなシナリオを想像してみてください。お客様があなたのサイトにアクセスし、注文フォームに2つの商品を追加し、購入の準備ができてチェックアウトに進みます。次に、配送セクションに到達して一時停止します。彼らはあなたの店から3ブロック離れたところに住んでいます。昼休みに歩いて行けるのに、配送料を支払って2日間待つことを本当に望むでしょうか？
もしあなたのフォームにピックアップオプションがなければ、彼らはタブを閉じて代わりにあなたに連絡するでしょう。あるいはもっと悪いことに、ピックアップを簡単にできる競合他社から購入するかもしれません。
オンラインで購入、店舗で受け取り（BOPIS）は、もはや大手小売業者だけのものではありません。地元の店舗、レストラン、ベーカリー、さらには花屋も提供しており、顧客がそれを期待しているからです。そして良いニュースは、それが機能するために完全なeコマースプラットフォームを必要としないということです。WPFormsとGeolocationアドオンを使用すると、WordPressの注文フォームにインタラクティブな店舗ピックアップセレクターを追加できます。
その方法を正確にお見せします。さあ、始めましょう！
WordPress注文フォームに店舗ピックアップセレクターを追加する方法（ステップバイステップ）
始める前に必要なもの
始める前に簡単な在庫確認：
- WPForms Pro以上。GeolocationアドオンはProプラン以上に含まれています。
- Geolocationアドオンがインストールされ、有効化されていること。
- Google Places APIキーまたはMapboxアクセストークン。どちらでも機能します。どちらを設定するかを説明します。
- ピックアップ場所のリスト（完全な住所、店舗名、顧客に見せたい詳細（営業時間、駐車場の注意点、入り口の説明）を含む）。
以上です！カスタムコード？いいえ。別の店舗ロケータープラグイン？不要です。複数のツールを使い分ける？絶対にありません！
しかし、なぜ？
通常のドロップダウンではなく、ピックアップセレクターを追加する理由
店舗の場所をリストした通常のドロップダウンフィールドを使用することもできます。それは機能するでしょう。しかし、インタラクティブなマップは、ドロップダウンでは決してできない3つのことを行います：
- 「私の最も近いのはどれ？」に視覚的に答えます。これは、場所の名前がわかりにくい場合（顧客は名前で「リバーサイド」と「ブリッジビュー」を区別できないかもしれません）に特に役立ちます。
- 信頼を築きます。実際の地図上のピンは、顧客にあなたが実際の住所を持つ実際のビジネスであることを伝えます。これは初めての購入者にとって重要です。
- ピックアップの誤解を減らします。顧客が地図上のピンを見て自分で選択すると、間違った場所に現れる可能性がはるかに低くなります。
ステップ1：Geolocationアドオンをインストールして有効化する
WordPressダッシュボードにログインし、**WPForms » Addons**に移動します。「Geolocation」を検索して「Install Addon」をクリックします。残りはWordPressが処理します。
有効化されると、WPFormsの設定に新しいGeolocationタブが表示されます。
ステップ2：Google Placesを接続する
マップフィールドはGoogle Placesから地図データを取得します。無料のGoogle CloudアカウントとAPIキーが必要です。
APIキーを取得したら、WPForms » 設定 » ジオロケーションに移動し、キーを貼り付けて設定を保存してください。
APIキーのステップでつまずいた場合は、ジオロケーションアドオンのドキュメントに詳細なセットアップガイドがあります。Google Cloud Consoleの画面ごとに手順を追って説明しています。
これは、セットアップ全体で唯一少し技術的なステップです。約10分で完了し、一度だけ行う必要があります。
ステップ3：店舗ピックアップ注文フォームテンプレートから始める
このフォームはゼロから作成することもできますが、WPFormsにはすでに作業の90%を完了するテンプレートがあります。WPForms » 新規追加から、「店舗受け取り注文フォーム」を検索してください。
テンプレートには以下の機能がプリロードされています：
- 画像ベースの製品選択
- 数量と色のオプション
- 顧客連絡先フィールド
- 場所選択のためのマップフィールド
- Stripeクレジットカードフィールド
- リアルタイムで更新される計算済み合計金額
- 利用規約同意チェックボックス
このテンプレートを使用すると、受け取り選択機能が組み込まれた機能的な注文フォームがすぐに利用できます。ここから先は、ゼロから構築するのではなく、カスタマイズを進めます。
ステップ4：マップフィールドにピックアップ場所を追加する
フォームビルダーで、[Fancy Fields]セクションにあるマップフィールドを見つけます。それをクリックするか、フォームプレビューにドラッグして追加します。
次に、プレビューでマップフィールドをクリックして[Field Options]を開きます。[General]タブの下に、表示したい各受け取り場所のフィールドがある[Locations]セクションがあります。
各場所について：
- [Address]フィールドに住所を入力します。Google Placesが自動補完するので、正しい候補を選択してください。
- [Name]を追加します（「ダウンタウン本店」や「イーストサイド受け取りカウンター」など、顧客が認識できる名前）。
- [Description]を任意で追加します。ここに、カスタマーサービスの問い合わせを減らすための詳細（受け取り時間、使用するドア、到着時に電話するかどうかなど）を記載します。
- +ボタンをクリックして、次の場所を追加します。
知っておくと便利な管理画面側の設定がいくつかあります：
- 近くの場所を検索 — ビルダーでこのトグルをオンにすると、ブラウザがあなたの場所（管理者）を尋ね、住所の自動補完があなたの近くの候補を優先します。すべての受け取り場所があなたのデスクと同じ市内にある場合に便利です。これは、顧客がフロントエンドで見るものには影響しません。
- ズームレベル — デフォルトは15で、良好な通りレベルのズームです。この設定は、場所が1つしかない場合にのみ使用されます。複数の場所を追加して選択を有効にすると、マップはそれらすべてを表示するように自動調整され、この設定は無効になります。
ステップ5：マップをセレクターに変換する（これが重要な部分です）
デフォルトでは、マップフィールドは表示専用です。顧客はあなたの場所を確認できますが、選択することはできません。実際の受け取り選択機能にするには、[General]タブの下にあるこれらのトグルを両方有効にします：
- 場所のリストを表示 — 各場所の名前と住所を、マップの下のテキストリストに表示します。これは、アクセシビリティと、小さなマップピンの操作が難しいモバイルユーザーにとって重要です。
- 場所の選択を許可 — リストの各場所の横にラジオボタンを追加します。これにより、マップがフォーム入力になります。
ステップ6：マップマーカーと表示をカスタマイズする
地図が一般的ではなく、ブランドイメージに合うようにするためのいくつかの調整：
カスタムマーカー — 各場所について、アイコンのドロップダウンを開き、以下を選択します：
- アイコン — 2,000以上のFont Awesomeアイコンから選択します（アイコンピッカーで検索）。デフォルトは星です。
- 画像 — 画像をアップロード をクリックして、ロゴまたはメディアライブラリからカスタムピンを使用します。
次に、サイズ（小、中、大）と色をピッカー（プリセットカラー、カスタムドラッグアンドドロップピッカー、または16進値）を使用して設定します。より大きなブランドマーカーは、地図上の他のビジネスから店舗を目立たせるのに役立ちます。
高度なタブ設定 — フィールドオプションの高度なタブをクリックして、表示と操作のコントロールを行います：
- 表示：全画面表示を非表示、地図タイプ（衛星/地形）を非表示、場所情報を非表示（マーカーをクリックすると表示されるポップアップ）、ストリートビューを非表示。ほとんどは、よりクリーンな外観のためにデフォルトで非表示になっています。
- インタラクティブ：カメラコントロールを非表示、ズームを非表示、ドラッグを無効にする、マウスズームを無効にする。
- その他：エントリーに表示、エントリーにサムネイルを表示（送信レコードに地図が表示される方法）、ラベルを非表示。
ステップ7：条件付きロジックを使用してピックアップ専用の詳細を表示する
ほとんどのチュートリアルでスキップされる詳細：注文フォームには、おそらく受け取りと発送の両方に適用されるのではなく、どちらか一方にのみ適用されるフィールドがあります。両方のオプションを提供している場合は、フォームの上部にラジオボタンを追加します。「注文をどのように受け取りたいですか？」という質問で、受け取りと発送のオプションを設定します。
次に、条件付きロジック（WPForms Proに組み込まれています）を使用して以下を表示します：
- 「受け取り」が選択された場合にのみ地図フィールドを表示します。
- 「発送」が選択された場合にのみ発送先住所フィールドを表示します。
これにより、フォームは短く、顧客が実際に望むものに関連したものになります。
ステップ8：テストしてから公開する
フォームを保存し、WPFormsブロックを使用してページに埋め込みます。どこかに宣伝する前に、デスクトップとモバイルの両方で自分で実行してみてください：
- 地図はすぐに読み込まれますか？
- 選択した場所は確認メールに実際に表示されますか？
- 送信を表示するときに、WPForms » エントリーに正しく表示されますか？
高度なタブで、エントリーに表示（およびオプションでエントリーにサムネイルを表示）がオンになっていることを確認してください。これは、受け取り側で注文を準備している人に、顧客が選択した場所を表示させるものです。
多くの店舗オーナーが次に進む場所
基本的な受け取りフォームが機能したら、知っておくと便利なアップグレードが2つあります：
- Googleカレンダー連携。フォームをチームの共有カレンダーに接続すると、すべての受け取りが自動的にイベントとして表示されます。いくつかのWPFormsのお客様から、これによりカウンターの紙のノートが不要になり、二重予約につながることがなくなったと聞いています。
- 保存して再開。注文フォームが長い場合、保存して再開を使用すると、顧客は進捗を失うことなく後で戻ることができます。
どちらも受け取り選択機能が機能するために必須ではありません。準備ができたときに便利なアップグレードです。
これでセットアップは完了です！マップフィールドとジオロケーションアドオン、そして数分の設定で、実際のインタラクティブなピックアップセレクターが完成します。
サイトにピックアップ機能を追加する準備はできましたか？まだお持ちでない場合はWPForms Proを入手し、ジオロケーションアドオンをインストールして、ストアピックアップ注文フォームテンプレートから始めましょう。すぐに動作するフォームを公開できます！
店舗ピックアップセレクターの追加に関するFAQ
マップフィールドを使用するにはWPForms Proが必要ですか？
はい。マップフィールドはジオロケーションアドオンの一部であり、Proライセンス以上に含まれています。WPForms LiteまたはBasicをご利用の場合は、アドオンが利用可能になる前にアップグレードする必要があります。
Google Places APIは無料で利用できますか？
Google Cloudでは請求先アカウントが必要ですが、Google Placesには、ほとんどの中小企業にとって無料利用をカバーする十分な月間クレジットが含まれています。フォームに大量のトラフィックを誘導しない限り、ほぼ確実に無料枠内に収まります。安心のために、Google Cloudでハードな使用上限を設定することもできます。
住所フィールドとマップフィールドの違いは何ですか？
住所フィールドは顧客の住所を収集します。顧客が入力し、オートコンプリートが正しい住所を選択するのに役立ちます。マップフィールドは、事前に設定された場所を地図に表示し、顧客が1つを選択できるようにします。ピックアップセレクターの場合はマップフィールドを使用します。配送先住所の場合は住所フィールドを使用します。多くの注文フォームで両方が使用されています。
単一のマップフィールドにいくつのピックアップ場所を追加できますか？
厳密な制限はありません。+ボタンをクリックし続けることで、さらに追加できます。実際には、単一のフォームでは10未満に抑えることをお勧めします。30以上の店舗を持つ地域チェーンの場合は、まず郵便番号フィールドを追加し、条件付きロジックを使用して関連する近くの店舗のみを表示することを検討してください。
地図上の他のビジネスや関心のある地点を非表示にできますか？
はい、ただし追加の手順が必要です。レストランや近隣の店舗などのPOIを非表示にして、カスタムマーカーのみを表示するには、Google Cloud Consoleでカスタムマップスタイルを作成し、コードスニペットを使用してマップフィールドに適用する必要があります。WPFormsには、この方法を採用したい場合のためのカスタムマップスタイルの適用に関する開発者向けドキュメントがあります。
フォーム送信後、顧客がどの場所を選択したかを確認するにはどうすればよいですか？
WPForms » Entriesに移動し、送信を開きます。選択された場所は、名前と住所を含むエントリ詳細に表示されます。場所がエントリレコードやメール通知に表示されるように、マップフィールドの高度なタブで「エントリに表示」が有効になっていることを確認してください（デフォルトで有効になっています）。
ピックアップの送信をGoogleカレンダーに接続できますか？
はい。これはピックアップフォームにとって最も便利なアップグレードの1つです。Googleカレンダーアドオンをインストールし、フォームを共有チームカレンダーに接続すると、すべてのピックアップ注文が自動的にカレンダーイベントを作成します。これにより、多くの店舗が直面しているカウンターでのノートブックの問題が解消されます。
次に、複数店舗対応のWordPress予約フォームを作成する
注文フォームにピックアップセレクターを設置することは、この強力な機能を活用する方法のすべてではありません。WordPressフォームで予約やイベントを予約していますか？それを複数場所予約フォームに変えてみませんか？マップフィールドを使えば可能です！完全なチュートリアルでその方法をご確認ください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
