お問い合わせフォームにGoogleマップを埋め込む方法（地図ピン付き）

オンラインフォームの入力は数多くこなしてきましたが、同じ住所を何度も再入力することになる場面に遭遇することがよくあります。

これを想像してみてください。訪問者があなたの連絡先ページにアクセスし、住所が自動入力され、地図上にピンがすでに配置されている状態です。これは迅速で、パーソナルで、時間を節約できます。

WordPressのお問い合わせフォームに、場所を示すピン付きのGoogleマップを追加することは、些細なことのように思えるかもしれませんが、大きな効果をもたらす可能性があります。WPFormsでの経験から、フォームの完了率を高め、ユーザーによりスムーズで満足のいく体験を提供できることがわかっています。

このステップバイステップガイドでは、コード不要でインタラクティブなGoogleマップをWordPressの問い合わせフォームに直接埋め込む方法を説明します。🗺️

お問い合わせフォームにGoogleマップを埋め込む理由

WordPressサイトをセットアップする際、訪問者があなたの製品やサービスについて連絡できるように、お問い合わせフォームを追加したことでしょう。また、実店舗がある場合は、人々があなたの場所を簡単に見つけられるように、おそらくGoogleマップを追加したはずです。

多くの事業主が知らないのは、ジオロケーションを使用して、お問い合わせフォームの住所フィールドを自動的に入力し、訪問者の場所を地図上に表示できることです。その後、住所が正しいか簡単に確認したり、必要に応じてピンをドラッグして変更したりできます。

これは全体的なユーザーエクスペリエンスを向上させ、フォーム放棄を減らすのに役立ちます。

ユーザーの位置情報を把握することで、ジオロケーションターゲティングを使用してパーソナライズされたコンテンツを表示し、コンバージョン率を向上させることもできます。

さて、お問い合わせフォームにGoogleマップを埋め込む方法を見ていきましょう。この記事で取り上げるすべてのトピックの概要は次のとおりです。

• How to Embed a Google Map in a Contact Form
  • Google Places APIキーの生成
  • Google Places APIキーの制限
  • WPFormsの設定にGoogle APIキーを追加する
  • WordPressで埋め込みGoogleマップを使用したお問い合わせフォームの作成
  • ウェブサイトに連絡フォームを追加する
  • お問い合わせフォームでGoogleマップを表示する
• フォームでユーザーの位置データを表示する方法
• 動画チュートリアル：お問い合わせフォームにGoogleマップを埋め込む
• ボーナスリソース 🔗: WordPressでマップを使用するためのベストガイド

さあ、始めましょう！

問い合わせフォームにGoogleマップを埋め込む方法

このチュートリアルでは、WordPressのWPFormsを使用します。これはWordPress向けの最高のコンタクトフォームプラグインです。簡単なドラッグ＆ドロップフォームビルダーで、あらゆる種類のフォームを簡単に作成できます。

WPFormsの無料版では、基本的なお問い合わせフォームを作成するために必要なすべての機能が備わっています。ただし、このチュートリアルでは、Googleマップアドオンが含まれているWPForms Proを使用します。

ℹ️ ご存知でしたか？ WPBeginnerでは、WPFormsを様々な用途に使用しています。例えば、お問い合わせフォームや年次読者満足度調査などに活用しています。私たちはWPFormsで素晴らしい経験をしており、WPFormsの詳細レビューでさらに詳しく知ることができます。

まず最初に行うべきことは、WPFormsのアカウントを作成することです。WPFormsのウェブサイトで「Get WPForms Now」をクリックし、登録プロセスを完了してください。

これが完了すると、WPFormsのアカウントダッシュボードにアクセスでき、WPForms ProのZIPファイルとライセンスキーを取得できます。

次に、WPFormsプラグインをインストールして有効化できます。

WordPress管理画面から、プラグイン » 新規追加に移動します。

次に、検索バーを使用して、WPFormsプラグインをすばやく見つけます。

検索結果で、「今すぐインストール」ボタンをクリックし、次に「有効化」をクリックしてWordPressサイトでの使用を開始します。

詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、ライセンスキーを入力するために WPForms » 設定 ページにアクセスする必要があります。この情報はWPFormsのアカウントエリアで見つけることができます。ライセンスを有効にするために、「キーを確認」ボタンをクリックしたことを確認してください。

次に、WPForms » アドオンに移動し、Geolocation Addonを見つける必要があります。

画面上部の検索オプションを使用するか、利用可能なアドオンをスクロールして確認できます。

見つけたら、「アドオンのインストール」ボタンをクリックしてください。

Geolocation アドオンが有効になったので、設定を構成する必要があります。そのためには、WPForms » 設定 に移動し、「Geolocation」タブをクリックしてください。

このページで、ジオロケーションプロバイダーを選択する必要があります。

このチュートリアルでは、「Google Places API」を選択します。

「現在の場所」チェックボックスもクリックする必要があります。これにより、ユーザーのブラウザに場所を尋ねて、住所フィールドを自動的に事前入力します。これにより、時間を節約し、精度を向上させることができます。

次に、Google Places API設定までスクロールダウンする必要があります。

ここで、WPForms は Google API キーの入力を求めます。Google からキーを取得し、入力フィールドに貼り付けることができます。その方法は次のセクションで説明します。

Google Places APIキーの生成

Google Cloud Consoleのウェブサイトにアクセスすることで、Google PlacesのAPIキーを取得できます。

まず、ドロップダウンメニューから国を選択し、利用規約に同意してください。国によっては、メーリングリストへの登録を勧められる場合もあります。

次のステップに進む準備ができたら、「同意して続行」をクリックしてください。

次に、APIキーのプロジェクトを選択する必要があります。「プロジェクトを選択」をクリックし、リストから使用したいプロジェクトをクリックするだけです。

プロジェクトをまだ作成したことがない場合、またはGoogleにまだ追加していない新しいウェブサイトの場合は、「新規プロジェクト」をクリックして設定してください。

これで「APIとサービス」ページにいるはずです。ここで、WordPressサイトにGoogleマップを表示するために必要なAPIを有効にできます。

ページ上部の「+ APIとサービスを有効化」ボタンをクリックする必要があります。

これにより、Google の API ライブラリに移動し、3 つのマッピング API を有効にする必要があります。

• Google Places API – ユーザーが入力する際に、フォームが候補となる住所を取得できるようになります。
• Maps JavaScript API – サイトにインタラクティブな地図を表示します。
• ジオコーディングAPI – 住所を正確な座標に変換し、マップがピンを正しく配置できるようにします。

これらは、上部にある検索バーを使用するか、マップセクションの「すべて表示」ボタンをクリックすることで見つけることができます。

ここから、Places API を検索して有効にしましょう。見つけたら、クリックする必要があります。

次のページで、「有効にする」ボタンをクリックしてください。

その後、Maps JavaScript APIとGeocoding APIについても同様のことを行う必要があります。

3つのAPIを有効にしたら、APIキーを作成できます。

左側のメニューで、APIとサービス » 認証情報に移動する必要があります。

ここから、画面上部の「+認証情報を作成」ボタンをクリックし、「APIキー」オプションを選択できます。

APIキーが作成され、ポップアップウィンドウに表示されます。

このチュートリアルの後半で、そのキーを WPForms の設定にコピーする必要があります。今のところ、APIキーの使用に制限をかける方法を見てみましょう。

Google Places APIキーの制限

APIキーを使いすぎると、無料枠を超えてしまい、予想以上の費用がかかる可能性があります。不正または予期しない使用を防ぐために、キーを制限することをお勧めします。

そのためには、上記のスクリーンショットの「APIキーが作成されました」ポップアップの下部にある「キーを制限する」リンクをクリックする必要があります。

次のページで、いくつかの異なる制限を設定できます。最初のものは「アプリケーション制限」です。

このセクションでは、「HTTP参照元（ウェブサイト）」オプションをクリックする必要があります。そうすると、キーはウェブサイトでのみ使用されるようになります。

次に、あなたのウェブサイトでのみ使用されるようにする必要があります。そうするには、「ウェブサイトの制限」セクションまでスクロールダウンし、「アイテムを追加」ボタンをクリックします。

次に、ウェブサイトのドメイン名を「新規アイテム」フィールドに、*example.com/*のパターンを使用して入力します。

複数のウェブサイトでGoogleマップを使用する場合は、「アイテムの追加」ボタンをクリックして、必要なだけドメインを追加できます。

APIキーをあなたのウェブサイトのみに制限したので、上記で追加したGoogle APIでのみ機能するように制限することもできます。

ページの「API制限」セクションまでスクロールダウンし、「キーを制限」オプションを選択する必要があります。これによりドロップダウンが表示され、「ジオコーディングAPI」、「マップJavaScript API」、「Places API」のチェックボックスをオンにします。

それが完了したら、設定を保存するために「OK」リンクをクリックしてください。

最後に、選択したすべての制限を有効にするために、必ずページ下部にある「保存」ボタンをクリックしてください。

設定が有効になるまで最大5分かかる場合があります。

WPFormsの設定にGoogle APIキーを追加する

これで、利用可能な他のAPIとともにAPIキーが表示されます。コピーアイコンをクリックして、WPForms のジオロケーション設定ページにキーを追加できるようにします。

APIの設定や制限を変更する必要がある場合は、右側の編集アイコンをクリックできることに注意してください。

次に、ウェブサイトに戻る必要があります。これはまだ WPForms » 設定 » 位置情報 ページにあるはずです。

そこに着いたら、WPForms の設定の「Google Places API」フィールドにキーを貼り付けます。そして、「設定を保存」ボタンをクリックしてください。

WordPressで埋め込みGoogleマップを使用したお問い合わせフォームの作成

WPFormsとGoogle Placesの設定が完了したので、WordPressで問い合わせフォームを作成する準備ができました。

WPForms を使用して WordPress フォームを構築するには、いくつかの異なる方法があります。

まず、空白のキャンバスから始めることができます。これにより、フォームフィールドをゼロから追加および配置する完全な制御が可能になり、完全にカスタマイズされたデザインに最適です。

次に、AIフォームビルダーを使用して、簡単なテキストプロンプトに基づいて完全なフォームを生成できます。これは、どこから始めればよいかわからない場合に、時間を大幅に節約できます。

最後に、2,000以上の既製のフォームテンプレートから選択できます。お問い合わせフォーム、アンケート、予約フォーム、またはそれ以上に複雑なものが必要な場合でも、ニーズに合ったテンプレートがある可能性が高いです！

WordPressで連絡フォームを作成する方法」に関するガイドに従って開始できます。

基本的なフォームを作成したら、住所フィールドを追加する必要があります。住所ブロックまたは一行テキストフィールドのいずれかを使用できます。

このチュートリアルでは、「一行テキスト」フィールドを使用します。したがって、「一行テキスト」ブロックをフォームにドラッグするだけです。

次に、フィールドの設定をカスタマイズします。

これを行うには、フィールドをクリックして、単一行テキストの設定を表示する必要があります。

まず、フィールドのラベルを「住所」に変更する必要があります。これにより、ユーザーは何を入力すべきかが明確になります。

その後、WordPressフォームにマップが表示されるようにフィールドの設定を変更する必要があります。これを行うには、「詳細設定」タブをクリックする必要があります。

そこに着いたら、設定の一番下にある「住所の自動入力」オプションを探し、「オン」の位置に切り替えてください。

次に、「マップを表示」という別のオプションが表示されるので、これも有効にする必要があります。マップをフィールドの上または下に表示することを選択できます。

ウェブサイトに連絡フォームを追加する

お問い合わせフォームをウェブサイトに追加する最も簡単な方法は、「埋め込み」ボタンをクリックすることです。フォームエディタ画面の上部にある「保存」ボタンの隣にあります。

フォームを既存のページに追加するか、新しいページを作成するかを尋ねられます。

このチュートリアルでは、「新しいページを作成」ボタンをクリックします。

次に、ページに名前を付け、「開始！」ボタンをクリックしてください。

その名前の新しいページが作成され、問い合わせフォームが自動的に追加されます。

「公開」ボタンをクリックするだけで、ページを公開できます。

お問い合わせフォームでGoogleマップを表示する

ユーザーが問い合わせフォームにアクセスすると、あなたのウェブサイトが位置情報にアクセスすることを許可するかどうか尋ねられます。

「許可する」ボタンをクリックすると、現在の場所が住所フィールドに入力され、その場所のピンがマップに追加されます。

この自動補完機能は、訪問者が住所を入力するのをより速く、より簡単にすることで時間を節約します。

アドレスを変更する必要がある場合は、新しいアドレスを入力するか、マップ上の別の場所にピンをドラッグするだけで変更できます。

フォームでユーザーの位置データを表示する方法

位置情報サービスを有効にすると、WPFormsはフォーム送信時に各ユーザーの位置情報も記録します。ユーザーの位置情報を知ることは、より良いリードを見つけるのに役立つ場合があります。

WPForms » エントリに移動し、問い合わせフォームをクリックする必要があります。

これで、そのフォームにユーザーが入力したエントリのリストが表示されます。

特定のフォーム送信を表示するには、右側にある「表示」リンクをクリックするだけです。

これで、ユーザーが送信したフォームデータ（名前、ビジネスメール、ビジネス電話番号など）と、いくつかの位置情報データが表示されます。

これには、Googleマップ上のピン、ユーザーの位置、郵便番号、国が含まれます。精度はユーザーのデバイスに依存することに注意してください。通常、携帯電話からのGPSデータは非常に正確ですが、デスクトップコンピューターからのIPベースの位置情報は近似値である場合があります。

もちろん、ユーザーがフォームに位置情報を知る許可を与えなかった場合、位置データは表示されません。

これで完了です。WordPressに連絡フォームへのGoogleマップの追加が正常に完了しました。WPFormsを使用すると、WordPressでアンケートを作成したり、オンライン決済を受け付けるための支払いフォームを作成したりすることもできます。

動画チュートリアル：お問い合わせフォームにGoogleマップを埋め込む

どのように機能するか見てみませんか？下のビデオチュートリアルの再生▶️ボタンをクリックするだけで、連絡先フォームにGoogleマップを埋め込む方法を学ぶことができます。

WPBeginnerを購読する

ボーナスリソース 🔗: WordPressでマップを使用するためのベストガイド

このチュートリアルで、連絡フォームにGoogleマップを埋め込む方法を学べたことを願っています。次に、ウェブサイトでマップを使用するための他のガイドも参照してください。

• WordPressにGoogleマップを追加する方法（正しい方法）
• WordPressにGoogleマップストアロケーターを追加する方法
• WordPressにBingマップを埋め込む方法（ステップバイステップ）
• WordPressにインタラクティブマップを追加する方法
• WordPress向けのベストGoogleマッププラグイン（ほとんど無料）
• おすすめのMapbox WordPressプラグイン
• おすすめのWordPressジオロケーションおよびGeoIPプラグイン

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。