AI要約
想像してみてください。支援者が非営利団体のウェブサイトを訪れ、冬物のコートを寄付しようとしています。寄付するために立ち寄る準備はできていますが、フォームには3つの番地が記載されたドロップダウンメニューしか表示されません。地図やコンテキストは含まれていません。ユーザーは新しいタブでGoogleマップを開き、番地を一つずつ貼り付け、最も近い場所を特定し、フォームを完了するために戻ってきます。
一部の人はそうするでしょう。ほとんどの人はそうしないでしょう…
次に、フォーム内にインタラクティブな地図が表示されるのを想像してみてください。3つのドロップオフ場所は、カスタムアイコンでピン留めされ、「北コミュニティセンター」、「ダウンタウン図書館」、「イーストサイド教会」とラベル付けされています。ユーザーは最も近い場所をタップすると、ピンがバウンドして確認され、選択がエントリにきれいにキャプチャされます。わずか数秒で、ページを離れることなく完了します。
それがWPFormsのマップフィールドの機能です！場所を選択できる予約フォームはおそらく最初に思い浮かぶユースケースですが、それだけではありません。小売店のピックアップ、製品の返品、イベントのチェックイン、サービスエリアの選択、ボランティアのサインアップ…物理的な場所を選択するあらゆるフォームが、これによって改善されます。
設定方法と、それを活用する複数の方法をご紹介します。
インタラクティブな場所ピッカーを任意のWordPressフォームに追加する方法
必要なもの
- WPForms Pro — マップフィールドは、すべてのProプランに含まれるジオロケーションアドオンの一部です
- Google Places APIキー — 設定は無料です。これがマップと住所の自動入力を可能にします
- WordPressサイトにインストールされているWPFormsの最新バージョン
WPForms Liteをご利用の場合、ジオロケーションアドオンにアクセスするにはProへのアップグレードが必要です。WPFormsを初めてご利用になる場合は、Proから始めるのが最適です。
ステップ1：ジオロケーションアドオンのインストール
WordPressダッシュボードから、WPForms » アドオンに移動し、「Geolocation」を検索してアドオンのインストールをクリックします。
有効になったら、WPForms » 設定 » ジオロケーションに移動し、Google Places APIキーを入力してGoogleマップに接続します。
APIキーの設定方法の詳細については、ジオロケーションアドオンのドキュメントを参照してください。
ステップ2：フォームにマップフィールドを追加する
WPFormsビルダーで任意のフォーム（新規または既存）を開きます。左側のパネルのFancy Fieldsの下にあるMapフィールドを見つけてドラッグします。
連絡先フォーム、予約フォーム、登録フォーム、寄付フォームなど、あらゆる種類のフォームで機能します。
ステップ3：場所を追加する
マップフィールドをクリックして、フィールドオプション設定を開きます。GeneralタブのLocationsの下で、住所の入力を開始します。Google Placesの自動入力が候補を提案します。
正しいものを選択し、Name（例：「Main Street Location」）とオプションのDescription（営業時間、駐車場情報、訪問者にとって役立つ情報など）を入力します。
+をクリックして場所を追加します。上限はありません。
場所リストを表示を有効にすると、地図の下に場所の名前と住所がすっきりとしたリストで表示されます。
これにより、訪問者は視覚的な地図と並んでテキスト参照情報を得ることができ、特に小さなピンをタップするのが難しいモバイルでは非常に役立ちます。
ステップ4：場所の選択を有効にする
2つ以上の場所を追加したら、場所リストのトグルスイッチの下にある場所の選択を許可をオンにします。これにより、地図の下にラジオボタンが追加され、フィールドが視覚的な表示からライブフォーム入力に変わります。
訪問者がピンをクリックするかリストから選択すると、マーカーがバウンスして確認されます。送信された情報には、場所の名前、住所、座標、および地図で表示リンクがフォームエントリに直接含まれます。
注意：場所の選択には、場所リストの表示オプションと、少なくとも2つの設定済み場所の両方が必要です。
ステップ5：マーカーをカスタマイズする
ここで、地図フィールドは一般的なGoogleマップの埋め込みから離れます。追加した各場所の横には、アイコンドロップダウンがあります。
アイコンを選択すると、Font Awesomeアイコンの大規模なライブラリにアクセスできます。地図のピンや建物のアイコンのようなシンプルな選択肢はマーカーとしてうまく機能しますが、カレンダー、ハートなど、より具体的なオプションも利用できます。
各ピンは完全にカスタマイズ可能です：
- アイコン — 2,000以上のFont Awesomeアイコンから選択します。小売店にはショッピングバッグ、寄付サイトにはハート、回収場所にはリサイクルシンボルなど。
- 画像 — メディアライブラリから独自のロゴまたはブランドマーカーをアップロードします。
- 色 — カラーピッカーを使用するか、16進値を貼り付けてブランドに正確に一致させます。
- サイズ — ピンを小、中、大に設定します。より大きなマーカーは、Googleマップのデフォルトの興味のある場所から、場所をすぐに際立たせます。
各ピンは、クリック時に名前と説明のポップアップを表示することもできるため、訪問者はフォームを離れることなく完全なコンテキストを得ることができます。
ステップ6：表示を微調整する
詳細設定タブでは、訪問者が必要としない要素（全画面表示トグル、地図タイプセレクター（衛星/地形）、ストリートビューコントロール、他のビジネスの情報カード）を非表示にすることで、地図インターフェイスを整理できます。
ドラッグやマウスホイールのズームを無効にして、ピン留めされた場所に焦点を合わせ続けることもできます。
エントリでは、エントリにサムネイルを表示を有効にして、WPForms » Entries内の提出ページに地図のプレビューを直接表示します。
ステップ7：場所を認識する通知を設定する
複数場所予約フォームを公開する前に、通知と確認を設定する時間を取る価値があります。フォームビルダーで、設定 » 通知に移動します。
WPFormsは、フォームが送信されるたびにWordPress管理者のメールに自動的に通知を送信します。この画面から、件名や受信者のメールアドレスなどのデフォルト設定を調整できます。
スマートタグを使用すると、フォームに入力した人に直接送信される通知を設定し、受信を確認して、担当者がフォローアップすることを知らせることもできます。これは、WordPressの複数拠点フォームに特に便利なステップです。詳細については、WordPressでフォーム通知を設定する方法に関するドキュメントを参照してください。
それが完了したら、[設定]メニューの下にある[確認]に移動して、正常に送信された後に何が起こるかを決定します。
3つのオプションがあります。
- メッセージ：同じページに感謝のメッセージを表示します。シンプルさが優先される場合に適しています。
- ページを表示：訪問者をサイトの別のページにリダイレクトします。たとえば、次のステップの概要や追加の連絡先情報を提供するページなどです。
- URLに移動（リダイレクト）：訪問者を外部URLに送信します。これは、サードパーティの予約システムまたはカスタムランディングページが関与している場合にうまく機能します。
セットアップに適したオプションを選択してください。メッセージオプションを選択した場合、デフォルトのテキストは、「ご利用いただきありがとうございます！まもなく提供されたアドレスに確認メールを送信します。」のようにカスタマイズできます。
他の確認タイプについては、フォーム確認の設定に関するドキュメントを参照してください。
マップフィールドと住所自動入力：違いは何ですか？
これらは、反対のことを行う2つの別々のジオロケーションアドオン機能であり、混同しやすいです。
| マップフィールド | 住所自動入力 | |
| 表示されるもの | 事前に定義された場所 | 任意の住所の入力候補 |
| キャプチャされるもの | 訪問者が選択した場所 | 訪問者が入力した住所 |
| 最適 | 支店、サイト、または会場から選択する | 配送先、請求先、またはサービス先住所を収集する |
同じフォームで両方を使用できます。食品配達注文フォームでは、マップフィールドを使用して顧客に支店を選択させ、住所フィールドと自動入力を組み合わせて配達先住所を収集することができます。
住所の自動入力を有効にするには、いずれかの住所フィールドを開き、[詳細設定]タブに移動して、[住所の自動入力を有効にする]をオンにします。完全なチュートリアルについては、Googleマップの住所自動入力フォームを作成する方法を参照してください。
エントリでの場所データの表示
すべての場所データは、WPForms » エントリに保存されます。
いずれかの送信を開くと、選択した場所の名前、住所、および[マップで表示]リンクが表示されます。高度な設定でマップサムネイルを有効にした場合は、エントリページに視覚的なプレビューが表示されます。
Googleスプレッドシートにエクスポートする場合は、Googleスプレッドシートアドオンを使用して選択した場所フィールドをマッピングします。これは、ピックアップ場所ごとに整理されたフルフィルメントリストの作成や、サイトごとのボランティアサインアップ数の追跡に役立ちます。
始めましょうか？マップフィールドは、すべてのProユーザー向けのWPFormsフォームビルダーで利用できます。ジオロケーションアドオンが既にインストールされている場合は、[ファンシーフィールド]セクションに用意されています。
WordPressフォームにインタラクティブな場所ピッカーを追加することに関するFAQ
マップフィールドはモバイルで動作しますか？
はい。マップフィールドは完全にレスポンシブです。マップの下にあるラジオボタン付きの場所リストにより、電話での選択が簡単になります。小さなピンを正確にタップする必要はありません。
ジオロケーションアドオンに追加料金は必要ですか？
いいえ。WPForms Proプランにはすべて追加料金なしで含まれており、2,000以上のフォームテンプレートとその他のすべてのプロアドオンも利用できます。
場所を1つだけ追加した場合はどうなりますか？
場所が1つだけの場合、マップフィールドはディスプレイとして機能します。ブランドのピンがマップ上に表示され、選択は不要です。場所の選択は、2つ以上の場所があり、「場所リストを表示」が有効になっている場合にのみアクティブになります。
訪問者が選択した場所に基づいて条件付きロジックを使用できますか？
はい。WPFormsの条件付きロジックを使用すると、選択した場所に基づいてフィールドを表示または非表示にしたり、通知を異なる受信者にルーティングしたり、異なる確認メッセージをトリガーしたりできます。
マップマーカーとして独自のロゴをアップロードできますか？
はい。フィールドオプションの「場所」セクションで、アイコンのドロップダウンから**画像**を選択し、メディアライブラリから任意の画像をピンマーカーとしてアップロードします。
これらのユースケースでさらに深く掘り下げる
特定のユースケースについてさらに詳しく知りたいですか？これらのガイドがお役に立つと思います。
- WordPressの複数拠点予約フォームの作成方法 — サービス業や予約制スケジューリングのための完全なウォークスルー
- レストランのオンライン注文フォームの作成方法 — 完全な注文および支払いフローに場所選択を追加
- WordPressで複数ステップフォームを作成する方法 — 場所選択を最初のステップとして、複雑なフォームをページに分割
- Googleマップの住所自動入力フォームの作成方法 — マップフィールドを訪問者の住所自動入力で補完
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
