AIサマリー
こんな場面を想像してみてください。ある支援者が、冬用コートを寄付しようと非営利団体のウェブサイトを訪れます。コートを届ける準備はできているのですが、フォームには3つの住所が並ぶドロップダウンメニューが表示されているだけです。地図も説明文もありません。そこで、新しいタブでGoogleマップを開き、それぞれの住所を1つずつ貼り付けて、どこが最も近いかを確認してから、フォームに戻って手続きを完了させます。
そうする人もいるだろう。でも、ほとんどの人はそうしないだろう……
ここで、フォーム内にインタラクティブな地図が表示されている様子を想像してみてください。3つの降車地点には、「ノース・コミュニティ・センター」、「ダウンタウン図書館」、「イーストサイド教会」というラベルが付いたカスタムアイコンがピン留めされています。ユーザーが最も近い場所をタップすると、ピンが跳ねて選択が確定し、その選択内容がフォームに正確に反映されます。ページを離れることなく、ほんの数秒で完了します。
これがWPFormsの「地図」フィールドの実例です！ 場所を選択できる予約フォームが真っ先に思い浮かぶ活用例かもしれませんが、その用途はそれだけにとどまりません。店頭受取、商品の返品、イベントのチェックイン、サービスエリアの選択、ボランティアの申し込み……物理的な場所の選択を伴うあらゆるフォームで、この機能を活用すればさらに便利になります。
設定方法と、それを活用するいくつかの方法をご紹介します。
WordPressのフォームにインタラクティブな場所選択ツールを追加する方法
必要なもの
- WPForms Pro— 「マップ」フィールドは、すべてのProプランに含まれる「Geolocation」アドオンの一部です
- Google Places API キー— 設定は無料です。これにより、地図機能や住所の自動補完機能が動作します
- WordPressサイトにインストールされているWPFormsの最新バージョン
WPForms Liteをご利用の場合は、Geolocationアドオンを利用するためにPro版へのアップグレードが必要です。WPFormsを初めてご利用になる場合は、Pro版から始めることをお勧めします。
手順 1：位置情報アドオンをインストールする
WordPressのダッシュボードから、「WPForms」»「アドオン」に移動し、「Geolocation」を検索して、「アドオンをインストール」をクリックします。
有効化したら、WPForms » 設定 » 位置情報設定に移動し、Google Places API キーを入力して Google マップと連携させてください。
APIキーの設定手順の詳細については、Geolocation Addonのドキュメントをご覧ください。
ステップ 2：フォームにマップフィールドを追加する
WPFormsビルダーで、新規または既存のフォームを開きます。左側のパネルの「Fancy Fields」にある「Map」フィールドを探し、ドラッグして追加します。
どのようなフォームでも利用可能です。お問い合わせフォーム、予約フォーム、登録フォーム、寄付フォームなど、あらゆる種類のフォームに対応しています。
ステップ3：所在地を追加する
「マップ」フィールドをクリックして、フィールドオプションの設定画面を開きます。「一般」タブの「場所」で住所の入力を開始すると、Google Placesのオートコンプリート機能により、一致する候補が表示されます。
適切なものを選択し、名前（「メインストリート店」など）と、必要に応じて説明（営業時間、駐車に関する注意事項、訪問者に役立つ情報など）を入力してください。
「+」をクリックして、さらに場所を追加してください。追加数に制限はありません。
「場所の一覧を表示」を有効にすると、地図の下に場所の名前と住所が整理されたリストとして表示されます。
これにより、訪問者は視覚的な地図に加えてテキストによる参照情報も確認できるようになり、小さなピンをタップするのが難しいモバイル端末では特に便利です。
ステップ4：位置情報の選択を有効にする
2つ以上の場所を追加したら、「場所の一覧」トグルの下にある「場所の選択を許可」をオンにします。これにより、地図の下にラジオボタンが表示され、フィールドが視覚的な表示から実際のフォーム入力欄に切り替わります。
訪問者がピンをクリックするか、リストから選択すると、マーカーが跳ねて操作が確定します。送信されると、その場所の名前、住所、座標、および「地図で見る」リンクが、フォームの入力欄に直接反映されます。
注：場所の選択を行うには、「場所の一覧を表示」オプションが有効になっていること、および少なくとも2つの場所が設定されている必要があります。
ステップ5：マーカーをカスタマイズする
ここで、「マップ」フィールドは、一般的なGoogleマップの埋め込みとは一線を画します。追加した各場所の横には、「アイコン」ドロップダウンがあります。
「アイコン」を選択すると、Font Awesomeの豊富なアイコンライブラリを利用できます。地図のピンや建物のアイコンなど、シンプルなものがマーカーとして適していますが、カレンダーやハートなど、より具体的なアイコンも利用可能です。
各ピンは完全にカスタマイズ可能です：
- アイコン— 2,000点以上のFont Awesomeアイコンから選択できます。小売店には買い物かご、寄付サイトにはハート、回収ボックスにはリサイクルマークなど。
- 画像— メディアライブラリから独自のロゴやブランドマークをアップロードしてください。
- 色— カラーピッカーを使用するか、16進数を入力して、ブランドの色にぴったり合わせてください。
- サイズ— ピンを「小」、「中」、「大」のいずれかに設定します。マーカーを大きくすると、Google マップのデフォルトのスポットとは一目で区別できるようになります。
各ピンはクリックすると名前や説明のポップアップを表示できるため、訪問者はフォームを離れることなく、詳細な情報を確認できます。
ステップ6：表示の微調整
[詳細設定]タブでは、訪問者にとって不要な要素（全画面表示の切り替えボタン、地図タイプの選択（衛星写真／地形図）、ストリートビューの操作ボタン、および他店舗の位置情報カード）を非表示にすることで、地図インターフェースをすっきりさせることができます。
また、ドラッグ操作やスクロールホイールによるズーム機能を無効にすることで、ピン留めした場所に視線を集中させることができます。
エントリーについては、WPForms » エントリー内の送信ページで直接地図のプレビューを表示するには、「エントリーでサムネイルを表示」を有効にしてください。
ステップ7：位置情報に基づく通知の設定
複数の拠点に対応した予約フォームを公開する前に、通知と確認メールの設定を済ませておくことをお勧めします。フォームビルダーで、「設定」»「通知」に進んでください。
WPFormsでは、フォームが送信されるたびに、WordPressの管理用メールアドレスへ自動的に通知が送信されます。この画面から、件名や受信者のメールアドレスなど、デフォルトの設定を変更することができます。
スマートタグを使用すると、フォームを送信した本人に対して、受信確認と今後の対応について知らせる通知を直接送信するように設定することもできます。これは、WordPressで複数の拠点向けのフォームを使用する場合に特に役立つ機能です。詳細な手順については、WordPressでのフォーム通知の設定方法に関するドキュメントをご参照ください。
設定が完了したら、「設定」メニューの「確認」に移動し、送信が成功した後の動作を設定してください。
選択肢は3つあります：
- メッセージ：同じページに感謝のメッセージを表示します。シンプルさを重視する場合に最適です。
- ページの表示：訪問者をサイト内の別のページ（次の手順を説明するページや、追加の連絡先情報を掲載したページなど）にリダイレクトします。
- URLへ移動（リダイレクト）：訪問者を外部のURLへ誘導します。サードパーティの予約システムやカスタムランディングページを利用する場合に最適です。
ご自身の環境に合わせて、いずれかのオプションをお選びください。「メッセージ」オプションを選択した場合、デフォルトのテキストをカスタマイズできます。例：「ご予約ありがとうございます！ご入力いただいたメールアドレス宛に、まもなく確認メールをお送りします。」
その他の確認方法については、フォームの確認設定に関するドキュメントを参照してください。
地図フィールドと住所の自動補完：その違いは？
これらは、互いに逆の動作をする2つの別々の位置情報アドオン機能であり、混同されやすいものです：
| マップフィールド | 住所オートコンプリート | |
| 何が示されているか | 登録済みの場所 | 住所を入力する際の候補表示 |
| 何が写っているか | 訪問者が選択する場所 | 訪問者が入力するアドレス |
| 最適 | 支店、拠点、または会場から選択する | 配送先、請求先、またはサービス提供先の住所の登録 |
同じフォーム内で両方を使用することができます。例えば、フードデリバリーの注文フォームでは、「地図」フィールドを使って顧客に店舗を選ばせ、自動補完機能付きの「住所」フィールドを使って配送先住所を入力してもらうといった使い方ができます。
住所の自動補完機能を有効にするには、任意の住所入力フィールドを開き、「詳細設定」タブに移動して、「住所の自動補完を有効にする」をオンにします。詳しい手順については、「Google マップの住所自動補完フォームの作成方法」をご覧ください。
投稿内の位置情報の確認
すべての位置情報は、WPForms » エントリーに保存されています。
投稿を開くと、選択した場所の名前、住所、および「地図で見る」リンクが表示されます。「詳細設定」で地図のサムネイルを有効にしている場合は、投稿ページ上で地図のプレビューを確認できます。
Google スプレッドシートにエクスポートする場合は、Google スプレッドシート用アドオンを使用して、選択した場所のフィールドをマッピングしてください。これは、受け取り場所ごとに整理された配送リストを作成したり、サイトごとのボランティア登録者数を追跡したりするのに便利です。
さあ、始めましょうか？「マップ」フィールドは、WPFormsのフォームビルダーで、すべてのProユーザーにご利用いただけます。Geolocationアドオンがすでにインストールされている場合は、「Fancy Fields」セクションに表示されています。
WordPressのフォームにインタラクティブな場所選択ツールを追加する方法に関するよくある質問
「マップ」フィールドはモバイルでも動作しますか？
はい。「マップ」フィールドは完全にレスポンシブ対応しています。マップの下にあるラジオボタン付きの場所リストにより、スマートフォンでも簡単に選択できます。小さなピンを正確にタップする必要はありません。
ジオロケーションアドオンには追加料金がかかりますか？
いいえ。2,000種類以上のフォームテンプレートやその他のすべてのProアドオンと同様に、すべてのWPForms Proプランに追加費用なしで含まれています。
場所を1つだけ追加した場合はどうなりますか？
場所が1か所の場合、「マップ」フィールドは表示機能として動作します。つまり、地図上にブランド名のピンが表示され、場所の選択は不要です。場所の選択機能は、場所が2か所以上あり、「場所の一覧を表示」が有効になっている場合にのみ有効になります。
訪問者が選択した場所に基づいて、条件分岐ロジックを使用することはできますか？
はい。WPFormsの条件分岐機能を使用すれば、選択された場所に応じて、入力フィールドの表示・非表示を切り替えたり、通知を異なる受信者に転送したり、異なる確認メッセージを表示させたりすることができます。
自分のロゴを地図上のマーカーとしてアップロードすることはできますか？
はい。「フィールドオプション」の「場所」セクションで、アイコンのドロップダウンメニューから「画像」を選択し、メディアライブラリから任意の画像をピンマーカーとしてアップロードしてください。
これらのユースケースでさらに深く掘り下げてみましょう
特定のユースケースについてさらに詳しく知りたいですか？以下のガイドが役立つと思います：
- 複数拠点対応のWordPress予約フォームの作成方法— サービス業や予約制スケジュールのための完全ガイド
- レストランのオンライン注文フォームの作成方法— 注文・決済フローに店舗選択機能を追加する
- WordPressで多段階フォームを作成する方法— 複雑なフォームをページごとに分割し、最初のステップとして場所の選択を行う
- Google マップの住所自動補完フォームの作成方法— 地図フィールドに訪問者の住所自動補完機能を追加する
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
