WordPressのコンタクトフォームに地図を表示する方法

WordPressのコンタクトフォームに地図を追加して、訪問者が簡単にあなたの事業所の場所を見つけられるようにしませんか？フォームに地図を追加することで、訪問者は連絡を取る前に正確な所在地を把握できます。

特に実店舗やオフィス、サービスエリアなど、顧客が訪問する必要がある場所がある場合に便利です。しかし、コンタクトフォーム上の地図は、単に所在地を表示するだけではありません。

適切な設定により、自動補完機能で訪問者が住所欄を素早く入力できるよう支援したり、複数の事業所や店舗がある場合には複数の所在地を表示することも可能です。

このチュートリアルでは、WordPressのコンタクトフォームに地図を追加する2つの方法をご紹介します。どちらの方法もWPFormsとそのジオロケーションアドオンを使用します。さっそく始めましょう！

今すぐWordPressフォームを作成

なぜコンタクトフォームに地図を追加するのか？

確かに、ウェブサイトを持つ中小企業のオーナーのほとんどが、コンタクトフォームが必要な理由は理解しているのは周知の事実です。しかし、そのコンタクトフォームに地図を追加する理由が気になるかもしれません。

地元でビジネスを運営している場合、お問い合わせフォームに地図を追加すると、所在地が一目でわかります。これはいくつかの理由から非常に有効な方法です：

• お客様が直接店舗を訪れる必要がある場合、地図があれば迷うことはありません。事前に正確な場所を確認できるため、問い合わせ時に「どこにあるのですか？」といった質問が減ります。
• 住所の自動補完を有効にすると、訪問者は数文字入力するだけでドロップダウンから完全な住所を選択できます。これによりフォーム入力が迅速化され、コミュニケーションの問題を引き起こす可能性のある入力ミスが減少します。
• 複数のオフィスや店舗をお持ちですか？すべての所在地を表示するインタラクティブマップを埋め込み、訪問者が連絡または訪問したい場所を選択できるようにできます。これにより、問い合わせが自動的に適切なチームに振り分けられます。
• 連絡先ページに地図を掲載することは、実店舗を持つ実在の企業であることを示すサインです。これは特に地域密着型サービス、小売店、または専門事務所にとって重要です。

最高の点は？ウェブサイトに地図を自分でコーディングしたり、ウェブ開発者に依頼したりする必要がなく、WPForms Proで簡単に実現できることです。WordPress向け最高のマッププラグインの一つです！

WordPressのコンタクトフォームに地図を追加する方法

WPForms Proとジオロケーションアドオンを使えば、お問い合わせフォームに地図機能をすぐに追加できます。以下の簡単な手順に従って始めましょう：

ステップ1: WPFormsプラグインをダウンロードする

WPFormsは、コンタクトフォームや 登録フォームなどを作成する強力なフォームビルダーです。2,100種類以上のWordPress用フォームテンプレートが利用可能です。

WPFormsで最も気に入っている点は、フォーム作成機能と組み込みの地理位置情報ツールが統合されていることです。フォームに地図を追加するために複数のプラグインを組み合わせたり、カスタムコードを書いたりする必要はありません。

連絡先フォームに地図を追加するには、WPForms Proが必要です。これにはジオロケーションアドオンと、このチュートリアルで説明するすべての地図機能が含まれています。

まず始めに、WPForms Proライセンスを購入してください。その後、ウェブサイトにWPFormsをインストールして有効化します。インストール方法がわからない場合は、WordPressプラグインのインストール手順を解説したこちらのガイドを参照してください。

今すぐWPForms Proにアップグレードしましょう

ステップ2: ジオロケーションアドオンのインストールと有効化

WPForms Proのインストールが完了しましたので、次にジオロケーションアドオンを有効化する必要があります。このアドオンが、コンタクトフォームの地図機能をすべて実現する基盤となります。

WordPressダッシュボードで、WPForms » アドオンに移動します。検索バーを使用してジオロケーションアドオンを探し、「アドオンをインストール」をクリックします。インストールが完了したら（通常は数秒程度）、「有効化」をクリックします。

アドオンを有効化すると、フォーム内でマップを使用する3つの方法が利用可能になります：

• 事業所の所在地を表示：フォームに埋め込みマップを設置し、訪問者に正確な所在地を案内しましょう。顧客が直接来店する地域密着型事業、オフィス、店舗に最適です。
• 住所の自動補完を有効にする：訪問者は自動補完の候補により住所欄を素早く入力できます。入力中に住所全体がドロップダウンに表示されるため、入力ミスが減り、フォーム入力が迅速化されます。

技術的に聞こえるかもしれませんが、WPFormsにはステップバイステップのガイドがあり、想像以上に簡単です。完全な設定手順については、ジオロケーションアドオンのドキュメントをご確認ください。

APIキーを追加して設定を保存したら、準備は完了です。ジオロケーションアドオンが使用可能になり、フォームにインタラクティブマップを追加できるようになります。

ステップ3: お問い合わせフォームを作成する

ジオロケーションアドオンの設定が完了したら、コンタクトフォームの作成準備が整いました。所要時間は約5分です。WordPressダッシュボードの「WPForms」→「新規追加」を選択し、フォームビルダーを開いてください。

フォームに名前を付けるには「フォーム名を入力」欄に名前を入力してください。「お問い合わせ」などが適しています。いくつかのオプションが表示されます。時間を節約したい場合は、2,100種類以上のWordPressフォームテンプレートからお選びいただけます。

シンプルなお問い合わせフォームテンプレートをお選びになることをお勧めします。これにより、必要な項目が既に追加された完成済みのお問い合わせフォームが利用できます。

テンプレートには、名前フィールド、メールアドレスフィールド、コメントまたはメッセージフィールドが含まれています。これらのフィールドはカスタマイズしたり、新しいフィールドを追加したり、不要なフィールドを削除したりできます。フォームビルダーはドラッグ＆ドロップ方式を採用しているため、フィールドの配置変更も簡単です。

さて、おそらく通知や確認メッセージなど、フォーム設定以外に設定したい項目がいくつかあるかもしれません。その場合は（強くお勧めします）、初めてのフォーム作成に関する詳細ガイドをご覧ください。

WPForms AIビルダーをお試しください！🙂

ステップ4: 連絡先フォームに地図を追加する

コンタクトフォームに地図を追加する重要な手順です。WPFormsでは目的によって2つの方法が用意されています：

• オプション1： 事業所の所在地を表示 （地図フィールド）
• オプション2： 訪問者向け住所自動補完機能の追加 （単一行テキストまたは住所フィールド）

両方の選択肢を順を追って説明しますので、ご自身のニーズに合った方をお選びください。

オプション1: マップフィールドで現在地を表示する

訪問者に貴社の所在地を表示したい場合、このオプションをご利用ください。これにより、インタラクティブな地図が連絡先フォームに直接埋め込まれます。

フォームビルダーで、左パネルを下にスクロールして「ファンシーフィールド」まで進み、「マップ」フィールドが表示されているのを確認してください。それを右側のフォームプレビューにドラッグして追加してください。

配置場所は好みによります。すぐに目に入るように上部に置く人もいれば、下の方に置くことを好む人もいます。フォームのレイアウトに自然に馴染む位置を選んでください。

マップフィールドを追加したら、それを選択して左側に設定オプションを表示させます。「場所」セクションを探してください。ここに事業所の住所を入力します。

住所欄をクリックし、場所の入力を開始してください。入力すると、自動補完の候補が表示されます。正しい候補を選択して、正確な地図座標を確定してください。

この場所に名前を追加してください。「西支社」や「本社」など、わかりやすい名称を使用してください。訪問者はマーカーを操作する際にこのラベルを確認するため、明確さが重要です。

補足情報（営業時間、具体的な連絡先、場所に関する注意事項など）を追加したい場合は、説明欄もご利用いただけます。

オプション2：訪問者向け住所自動補完機能の追加

このオプションは、お問い合わせフォームで訪問者に住所欄の入力が必要な場合（見積もり依頼、サービス予約、配送問い合わせなど）に使用します。地図機能により、正確な住所入力が可能になります。

フォームビルダーで、フォームに「単一行テキスト」フィールドまたは「住所」フィールドを追加します。フィールド名をクリックするか、フォーム上にドラッグして配置できます。

追加したフィールドをクリックして設定を開きます。ラベルを「ご住所」または類似の名称に変更します。その後、フィールド設定内の「詳細」タブをクリックします。

下にスクロールし、「住所の自動補完を有効にする」をオンに切り替えてください。これにより、訪問者が住所の入力を開始し、ドロップダウンから選択できるようになります。

次に、「地図を表示」をオンに切り替えます。ドロップダウンメニューから、地図を入力フィールドの上か下かに表示するかを選択できます。

訪問者がこのフィールドに入力すると、入力と同時に更新される地図が表示されます。また、地図上のピンをドラッグして正確な位置を微調整することも可能です。

このオプションは、サービス業、配達フォーム、または訪問者の住所が必要なあらゆる状況に最適です。いずれかの方法で地図を追加したら、右上の「保存」をクリックしてください。

ステップ5: 連絡先フォームマップを公開する

地図付きのお問い合わせフォームを公開する準備はできましたか？WPForms Proプラグインを使えば、フォームをサイトに埋め込むのはとても簡単です。フォーム作成ツールでフォームを開いたまま、右上の「埋め込み」ボタンをクリックしてください。

ここでは、既存のページでも新しいページでも、お好きなWordPressページを選択できます。このチュートリアルでは、「新規ページを作成」をクリックします。

ページにタイトルを付けましょう。「お問い合わせ」や「ご連絡ください」など、ご自身のニーズに合ったお好きなタイトルを入力し、「さあ始めましょう！」ボタンをクリックしてください。

WPFormsは自動的にフォームをページに挿入します。地図が既に配置されたコンタクトフォームが表示されます。ここから、フォーム上部に導入文を追加したり、ページレイアウトを調整したり、フォームのスタイルを少し変更したりできます。

お問い合わせフォームの外観を調整するには、ページエディタでフォーム周辺の任意の場所をクリックしてください。これにより右側にスタイル設定パネルが開き、フォームの外観をカスタマイズできます。

素早いスタイリングには、フォームテーマのドロップダウンから既成のデザインを選択してください。モダン、クラシック、ミニマルなどのオプションで、サイトのデザインに調和したプロフェッショナルな見た目を即座に実現できます。

より細かく制御したい場合は、パネルで色、フォント、間隔、ボタンのスタイルなどの個々の要素をカスタマイズすることも できます。

すべてが正しく表示され、地図に現在地が正確に表示されたら、「公開」をクリックしてください。地図付きのお問い合わせフォームが公開されました。以下に表示例を示します：

WordPressで地図付きお問い合わせフォームを追加する方法に関するよくある質問

WordPressのコンタクトフォームに地図を追加する方法について質問がありますか？よくある質問への回答を以下にご紹介します：

WPFormsで地図を使用するにはGoogle Maps APIキーが必要ですか？

はい、WPFormsの地図機能を利用するには、Google Maps APIキーまたはMapbox APIキーのいずれかが必要です。ジオロケーションアドオンは、地図サービスに接続するためにこれらのいずれかが必要です。

ご安心ください！WPFormsのジオロケーションアドオンのドキュメントには、APIキーの取得方法をステップバイステップで説明しています。設定には通常約10分かかります。

マップフィールドと地図付き住所自動補完の違いは何ですか？

• マップフィールドは、訪問者にあなたの事業所の所在地を表示します。あなたの場所を知らせるものです。連絡先フォーム上でオフィス、店舗、またはサービスエリアを閲覧者に表示させたい場合に使用してください。
• 住所自動補完機能（地図付き）は、訪問者が自身の住所を素早く入力するのに役立ちます。入力中に住所を提案し、地図上に表示します。訪問者の位置情報を収集する必要がある場合にご利用ください。

1つの地図に複数の事業所を表示できますか？

はい。マップフィールドでは、複数のオフィス、店舗、支店、サービスセンターなど、必要な数の場所を追加できます。

各地点には地図上に独自のマーカーが表示され、マーカーのアイコンや色をカスタマイズできます。訪問者は各マーカーをクリックすると、場所名と詳細を確認できます。

詳細な手順については、マップフィールドのドキュメントを参照してください。

この地図はモバイル端末で動作しますか？

もちろんです。WPFormsで作成されたマップは完全にレスポンシブ対応で、スマートフォンやタブレットでも完璧に動作します。

訪問者はデスクトップと同様に、地図のズームやパン、操作が可能です。住所の自動補完機能もモバイルでシームレスに動作します。

地図を追加すると、コンタクトフォームの動作が遅くなりますか？

いいえ。WPFormsはマップを効率的に読み込むため、ページの表示速度を低下させません。マップは必要な時のみ読み込まれ、フォームのパフォーマンスに影響を与えません。

WPFormsは、マップなどのインタラクティブな機能があってもサイトの高速性を維持するよう最適化されています。

フォーム上のマップの表示方法をカスタマイズできますか？

はい。マップフィールドでは、マーカーアイコンや色をカスタマイズして、ご自身のブランドに合わせて調整できます。

表示するマップコントロール（ズーム、全画面表示、マップタイプなど）を選択したり、初期ズームレベルを調整したりすることもできます。

住所自動補完マップでは、マップを入力フィールドの上か下に表示するかを選択できます。

フォーム送信元を地図上で確認できますか？

はい。ジオロケーションアドオンが有効な場合、WPFormsはすべてのフォーム送信時に（訪問者の許可を得て）位置情報を自動的に取得します。

WordPressダッシュボードで個々のフォームエントリーを確認する際、このデータを地図上で表示できます。これにより、見込み客や顧客が地理的にどこから来ているのかを把握するのに役立ちます。

次に、その他のWPForms Pro機能をご覧ください

今すぐWPForms Proを入手して、これらの素晴らしい地図を追加できるジオロケーションアドオンをご利用ください。

他にもたくさんの便利な機能にアクセスできるようになります。

• 使いやすいビルダー - 1行もコードを書くことなく、数分で独自のフォームを作成できます。
• アンケート-アンケートや投票を通じてデータを収集し、美しいレポートで確認できます。また、長時間のアンケートに保存して続行する機能を追加して、ユーザーが一時停止して後でフォームを完了できるようにすることもできます。
• フォームページ- ワンクリックで邪魔にならないフォームページを作成し、より多くの人にフォームを完了してもらいましょう。
• 注文フォーム- Stripe（全プラン）、Square（Pro）、PayPal（Pro）をフォーム上で統合し、オンラインで支払いを受け付けます。
• ユーザージャーニーレポート - フォームに入力する前に、サイト内のどの位置にいたかを確認できます。
• セキュアフォーム- カスタムキャプチャ、hCaptcha、Google reCAPTCHA v2またはv3などのスパム対策オプションでフォームを保護します。
• 会話型フォーム- 非常に魅力的でモダンなフォームでコンバージョン率が急上昇します。
• 2,100以上のテンプレート– 最も人気のあるフォームタイプの既成テンプレートで、一からフォームを作成する必要はもうありません。
• プレミアムサポート- ウェブサイトのフォームでお困りのことがあれば、フレンドリーで知識豊富なチームが適切な方向へご案内します。
• ...その他いろいろ。

実際、WPForms LiteとProを比較すると、Proが人気な理由がたくさんあることがわかります。

今すぐWordPressフォームを作成

フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。