WordPressのお問い合わせフォームに地図を表示する方法

訪問者が簡単に会社の所在地を見つけられるように、WordPressの問い合わせフォームに地図を追加したいですか？フォームに地図を追加すると、連絡する前に正確な場所を知ることができます。

特に、顧客が訪れる必要がある実店舗、オフィス、またはサービスエリアがある場合に役立ちます。しかし、お問い合わせフォームの地図は、場所を表示する以上のことができます。

適切な設定により、訪問者が住所フィールドをオートコンプリートでより速く入力できるようになるだけでなく、複数のオフィスや店舗がある場合は複数の場所を表示することもできます。

このチュートリアルでは、WordPressのお問い合わせフォームに地図を追加する2つの方法を紹介します。どちらの方法でもWPFormsとそのGeolocationアドオンを使用します。始めましょう！

WordPressフォームを今すぐ作成

問い合わせフォームに地図を追加する理由

確かに、ほとんどの小規模ビジネスのオーナーがウェブサイトを持っている場合、問い合わせフォームが必要な理由は秘密ではありません。しかし、なぜその問い合わせフォームに地図を追加するのか疑問に思うかもしれません。

地域ビジネスを経営している場合、問い合わせフォームに地図を追加すると、どこにあるかがすぐにわかります。これはいくつかの理由で素晴らしいアイデアになります：

• 顧客が直接あなたのビジネスを訪問する必要がある場合、地図があれば推測する必要がなくなります。連絡する前に正確な場所を確認できるため、「どこにいますか？」という問い合わせが受信トレイに届くのを減らすことができます。
• 住所の自動入力を有効にすると、訪問者は数文字入力するだけで、ドロップダウンから完全な住所を選択できます。これにより、フォームの完了が迅速になり、コミュニケーションの問題を引き起こす可能性のある入力ミスが減ります。
• 複数のオフィスや店舗がありますか？すべての場所を表示し、訪問者が連絡または訪問したい場所を選択できるインタラクティブマップを埋め込むことができます。これにより、問い合わせが自動的に適切なチームにルーティングされます。
• 問い合わせページにある地図は、物理的な拠点を持つ実際のビジネスであることを示します。これは、地域サービス、小売店、または専門事務所にとって特に重要です。

一番良いところは？自分でウェブサイトに地図をコーディングしたり、ウェブ開発者に支払ったりする代わりに、WPForms Proを使えば簡単にできます。これはWordPress向けの最高の地図プラグインの1つです！

WordPressの問い合わせフォームに地図を追加する方法

WPForms ProとGeolocationアドオンを使用すると、すぐに問い合わせフォームに地図機能を追加できます。始めるには、これらの簡単なステップバイステップの手順に従ってください：

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

WPFormsは、問い合わせフォーム、登録フォームなどを簡単に作成できる強力なフォームビルダーです。使用できる2,100以上のWordPressフォームテンプレートがあります。

WPFormsで最も気に入っているのは、フォーム作成と組み込みのジオロケーションツールがどのように組み合わされているかです。複数のプラグインを組み合わせたり、カスタムコードを記述したりして、フォームに地図を追加する必要はありません。

お問い合わせフォームにマップを追加するには、WPForms Proが必要です。これにはGeolocationアドオンと、このチュートリアルで説明するすべてのマップ機能が含まれています。

始めるには、WPForms Proライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールして有効化します。インストールにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドに従ってください。

今すぐWPForms Proにアップグレード！:)

ステップ2：Geolocationアドオンをインストールして有効化する

WPForms Proがインストールされたら、Geolocationアドオンを有効にする必要があります。これが、問い合わせフォームのすべての地図機能を強化するものです。

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

アドオンが有効になると、フォームでマップを使用するための3つの方法にアクセスできるようになります。

• ビジネスの場所を表示：埋め込みマップを使用して、ビジネスの正確な場所を訪問者に表示します。これは、顧客が直接訪問するローカルビジネス、オフィス、または店舗に最適です。
• 住所の自動入力を有効にする：訪問者は、自動入力の提案により、より速く住所フィールドに入力できます。入力すると、完全な住所がドロップダウンに表示され、エラーが減り、フォームの完了がスピードアップします。

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

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

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

ジオロケーションアドオンが構成されたので、お問い合わせフォームを作成する準備ができました。これには約5分かかります。フォームビルダーを開くには、WordPressダッシュボードでWPForms » 新規追加に移動します。

Name Your Formフィールドにフォームの名前を入力します。たとえば、「お問い合わせ」のような名前が適しています。ここにはいくつかのオプションが表示されます。時間を節約したい場合は、2,100以上のWordPressフォームテンプレートから選択できます。

シンプルな問い合わせフォームテンプレートを選択することをお勧めします。これにより、必須フィールドがすべて追加された、すぐに使用できる問い合わせフォームが作成されます。

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

次に、通知や確認など、設定したい他のフォーム設定がいくつかあるでしょう。もしそうであれば（そして強くお勧めしますが）、最初のフォーム作成に関する詳細ガイドをご覧ください。

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

ステップ4：問い合わせフォームに地図を追加する

次に、連絡先フォームにマップを追加する重要な部分です。WPFormsでは、達成したいことに応じて2つの方法でこれを行うことができます。

• オプション1：ビジネスの場所を表示（マップフィールド）
• オプション2：訪問者向けに住所の自動入力を追加（一行テキストまたは住所フィールド）

ニーズに合った方を選択できるように、両方のオプションを順を追って説明します。

オプション1：マップフィールドで場所を表示

このオプションは、訪問者にビジネスの場所を示したい場合に使用します。これにより、連絡先フォームにインタラクティブマップが直接埋め込まれます。

フォームビルダーで、左側のパネルを Fancy Fields までスクロールすると、その中に Map フィールドが表示されます。それを右側のフォームプレビューにドラッグしてください。

配置場所はあなたの好みによります。すぐに表示できるように一番上に置く人もいれば、下の方に置くことを好む人もいます。フォームレイアウトに自然に感じるものを選んでください。

Map フィールドを追加した後、それを選択して左側にある設定オプションを表示します。 Locations セクションを見つけてください。ここにビジネスの住所を入力します。

Address ボックスをクリックして、場所の入力を開始します。入力中に自動入力の提案が表示されることに気づくでしょう。正しい候補を選択して、正確なマップ座標をロックします。

次に、この場所の Name を追加します。「西支店」や「本社」など、わかりやすい名前を使用してください。訪問者はマーカーと対話するときにこのラベルを見るので、明確さが重要です。

また、営業時間、特定の連絡先情報、または場所固有のメモなどの補足情報を追加したい場合は、Description フィールドもあります。

オプション2：訪問者向けの住所オートコンプリートを追加する

連絡先フォーム（見積もり依頼、サービス予約、配送問い合わせなど）に訪問者に住所フィールドを入力してもらう必要がある場合は、このオプションを使用します。マップは、住所を正確に入力するのに役立ちます。

フォームビルダーで、フォームに1行テキストフィールドまたは住所フィールドのいずれかを追加します。フィールド名をクリックするか、フォームにドラッグして追加できます。

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

下にスクロールして、住所オートコンプリートを有効にするをオンにします。これにより、訪問者は住所の入力を開始し、ドロップダウンから選択できるようになります。

次に、マップを表示をオンにします。ドロップダウンメニューを使用して、マップを入力フィールドの上または下に表示するかどうかを選択できます。

これで、訪問者がこのフィールドに入力すると、入力中に更新されるマップが表示されます。マップピンをドラッグして、正確な場所を微調整することもできます。

このオプションは、サービス業、配送フォーム、または訪問者の住所が必要なあらゆる状況に最適です。どちらかのオプションを使用してマップを追加したら、右上隅にある保存をクリックします。

ステップ5：問い合わせフォームの地図を公開する

マップ付きの連絡先フォームを公開する準備はできましたか？WPForms Proプラグインを使用すると、フォームをサイトに簡単に埋め込むことができます。ビルダーでフォームを開いたまま、右上隅にある埋め込みボタンをクリックします。

ここで、既存のページまたは新しいページなど、任意のWordPressページを選択できます。このチュートリアルでは、新しいページを作成をクリックします。

ページにタイトルを付けます。「お問い合わせ」や「ご連絡ください」など、ニーズに合ったものにしてから、開始する！ボタンをクリックします。

WPFormsは自動的にフォームをページに挿入します。マップが配置された連絡先フォームが表示されます。ここから、フォームの上に紹介文を追加したり、ページレイアウトを調整したり、フォームのスタイルを少し変更したりできます。

連絡フォームの外観を調整するには、ページ編集エディターでフォームの周りのどこかをクリックします。これにより、右側にスタイリングパネルが表示され、フォームの外観をカスタマイズできます。

クイックスタイリングのために、フォームテーマドロップダウンから事前作成済みのデザインを選択します。モダン、クラシック、ミニマルなどのオプションは、サイトのデザインに合った、すぐにプロフェッショナルな外観のフォームを作成します。

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

すべてが正しく表示され、マップが正しく位置を表示したら、公開をクリックします。マップ付きの連絡フォームが公開されました。以下はその表示例です。

WordPressでマップ付き連絡フォームを追加する方法に関するFAQ

WordPressの連絡フォームにマップを追加することについてご質問がありますか？よくある質問とその回答を以下に示します。

WPFormsでマップを使用するためにGoogle Maps APIキーは必要ですか？

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

心配いりません！WPFormsは、ジオロケーションアドオンのドキュメントでAPIキーを取得するためのステップバイステップの手順を提供しています。セットアップは通常約10分で完了します。

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

• マップフィールドは、訪問者にあなたのビジネスの場所を表示します。どこにあるかを示します。これは、人々が連絡フォームであなたのオフィス、店舗、またはサービスエリアを見てもらいたい場合に使用します。
• マップ付き住所自動入力は、訪問者が自分の住所をより速く入力するのに役立ちます。入力すると、住所が提案され、マップ上に表示されます。これは、訪問者の場所を収集する必要がある場合に使用します。

1つのマップに複数のビジネスの場所を表示できますか？

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

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

ステップバイステップの手順については、マップフィールドのドキュメントを確認してください。

マップはモバイルデバイスでも機能しますか？

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

訪問者は、デスクトップと同じようにマップをズーム、パン、操作できます。住所自動入力機能もモバイルでシームレスに機能します。

マップを追加すると、連絡フォームが遅くなりますか？

いいえ。WPFormsはマップを効率的に読み込むため、ページが遅くなることはありません。マップは必要なときにのみ読み込まれ、フォームのパフォーマンスに影響しません。

WPFormsは、マップなどのインタラクティブな機能を使用しても、サイトを高速に保つように最適化されています。

フォーム上のマップの外観をカスタマイズできますか？

はい。マップフィールドを使用すると、ブランドに合わせてマーカーのアイコンと色をカスタマイズできます。

また、表示されるマップコントロール（ズーム、フルスクリーン、マップタイプなど）を制御し、初期ズームレベルを調整することもできます。

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

フォーム送信がどこから来るのかをマップで確認できますか？

はい。ジオロケーションアドオンがアクティブな場合、WPFormsは訪問者の許可を得て、すべてのフォーム送信の場所データを自動的にキャプチャします。

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

次に、他のWPForms Pro機能もチェックしましょう

これらの素晴らしいマップを追加できるジオロケーションアドオンにアクセスするには、今すぐWPForms Proを入手してください。

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

• 使いやすいビルダー – コードを一行も書かずに、数分で独自のフォームを作成できます。
• アンケート – アンケートや投票を通じてデータを収集し、美しいレポートで確認できます。また、長いアンケートに「保存して続行」機能を追加して、ユーザーが一時停止して後でフォームを完了できるようにすることもできます。
• フォームページ – クリックするだけで、気を散らすことのないフォームページを作成し、より多くの人にフォームを完了してもらいましょう。
• 注文フォーム – ストライプ（全プラン）、スクエア（Pro）、ペイパル（Pro）をフォームに直接統合し、オンラインでお金を稼ぎましょう。
• ユーザー行動レポート – フォームに入力する前に、ユーザーがサイトのどこにいたかを確認できます。
• セキュアフォーム – カスタムキャプチャ、hCaptcha、またはGoogle reCAPTCHA v2またはv3などのスパム対策オプションでフォームを保護します。
• 会話型フォーム – エンゲージメントが高くモダンな見た目のフォームで、コンバージョン率を急上昇させましょう。
• 2,100以上のテンプレート – 一般的なフォームタイプの既製のテンプレートを使用して、フォームをゼロから作成する必要はもうありません。
• プレミアムサポート – ウェブサイトフォームでヘルプが必要な場合に、適切な方向へ導いてくれる、フレンドリーで知識豊富なチームにアクセスできます。
• …その他多数。

実際、WPForms LiteとProの比較を見ると、Proが非常に人気がある理由がたくさんわかります。

WordPressフォームを今すぐ作成

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

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