オンラインフォームには数多く記入してきましたが、同じ住所を何度も再入力しなければならないことがよくありました。そこで、もっと簡単な方法があればいいのにと思い始めました。
これを想像してみてください。訪問者があなたの連絡先ページにアクセスし、住所が自動入力され、地図上にピンがすでに配置されている状態です。これは迅速で、パーソナルで、時間を節約できます。
WordPressのお問い合わせフォームに、場所のピンが付いたGoogleマップを追加することは、些細なことのように思えるかもしれませんが、大きな効果をもたらす可能性があります。WPFormsでの経験から、フォームの完了率を高め、ユーザーによりスムーズで満足度の高い体験を提供することに役立ちます。
このステップバイステップガイドでは、コード不要でインタラクティブなGoogleマップをWordPressの問い合わせフォームに直接埋め込む方法を説明します。🗺️
お問い合わせフォームにGoogleマップを埋め込む理由
WordPressウェブサイトを作成したとき、おそらく連絡フォームを追加して、訪問者があなたの製品やサービスについて簡単に連絡できるようにしたことでしょう。
そして、あなたのビジネスに物理的な場所がある場合、おそらくあなた自身の場所のGoogleマップを追加して、人々があなたの店を訪れるように促しているでしょう。
多くの事業主が知らないのは、ジオロケーションを使用して連絡フォームのアドレスフィールドを自動的に入力し、ユーザーの場所をマップに表示できることです。その後、アドレスが正しいことを簡単に確認したり、必要に応じてピンをドラッグして変更したりできます。
これにより、全体的なユーザーエクスペリエンスが向上し、フォームの放棄が削減されます。
ユーザーの位置情報を把握することで、ジオロケーションターゲティングを使用してパーソナライズされたコンテンツを表示し、コンバージョン率を向上させることもできます。
ということで、連絡先フォームにGoogleマップを埋め込む方法を共有します。この記事で取り上げるすべてのトピックの概要は次のとおりです。
さあ、始めましょう！
問い合わせフォームにGoogleマップを埋め込む方法
このチュートリアルでは、WordPressのWPFormsを使用します。これはWordPress向けの最高のコンタクトフォームプラグインです。簡単なドラッグ＆ドロップフォームビルダーで、あらゆる種類のフォームを簡単に作成できます。
WPFormsの無料版では、基本的なお問い合わせフォームを作成するために必要なすべての機能が備わっています。ただし、このチュートリアルでは、Googleマップアドオンが含まれているWPForms Proを使用します。
ℹ️ ご存知でしたか？ WPBeginnerでは、WPFormsを様々な用途に使用しています。例えば、お問い合わせフォームや年次読者満足度調査に利用しています。私たちはWPFormsで素晴らしい経験をしており、詳細なWPFormsレビューでそのすべてを見つけることができます。
まず、WPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、ライセンスキーを入力するために WPForms » 設定 ページにアクセスする必要があります。この情報はWPFormsのアカウントエリアで見つけることができます。ライセンスを有効にするために、「キーを確認」ボタンをクリックしたことを確認してください。
次に、WPForms » アドオンに移動し、Geolocation Addonを見つける必要があります。
画面上部の検索オプションを使用するか、利用可能なアドオンをスクロールして確認できます。
見つけたら、「アドオンをインストール」ボタンをクリックしてアドオンをインストールしてください。
Geolocation アドオンが有効になったので、設定を構成する必要があります。そのためには、WPForms » 設定 に移動し、「Geolocation」タブをクリックしてください。
このページで、ジオロケーションプロバイダーを選択する必要があります。この記事では、Google Places APIを選択します。
「現在の場所」チェックボックスもオンにしてください。これにより、ユーザーが連絡フォームに入力する際に住所を検出し、住所を自動入力できるようになり、時間短縮と精度の向上が期待できます。
次に、Google Places API設定までスクロールダウンする必要があります。
Google APIキーの入力を求められます。Googleからキーを取得し、入力フィールドに貼り付けてください。次のセクションでその方法を説明します。
Google Places APIキーの生成
Google Cloud Consoleのウェブサイトにアクセスすることで、Google PlacesのAPIキーを取得できます。
ドロップダウンメニューから国を選択し、利用規約に同意するよう求められます。一部の国では、メーリングリストへの登録機会が提供される場合もあります。
次のステップに進む準備ができたら、「同意して続行」をクリックしてください。
次に、APIキーのプロジェクトを選択する必要があります。「プロジェクトを選択」をクリックし、リストから使用したいプロジェクトをクリックするだけです。
プロジェクトをまだ作成したことがない場合、またはGoogleにまだ追加していない新しいウェブサイトの場合は、「新規プロジェクト」をクリックして設定してください。
📝 注: Google Places APIを使用するには、Googleでそのプロジェクトの請求を有効にする必要があります。最初の300ドルは無料ですが、このチュートリアルで作成しているような簡単なマップ埋め込みには十分です。
トラフィックの少ないサイトでは料金はかからず、料金が発生する前にアップグレードの許可を求められます。
これで「APIとサービス」ページにいるはずです。ここで、WordPressサイトにGoogleマップを表示するために必要なAPIを有効にできます。
ページ上部の「+ APIとサービスを有効化」ボタンをクリックする必要があります。
これにより、GoogleのAPIライブラリに移動し、3つの異なるマッピングAPIを有効にする必要があります。
ページ上部の検索機能を使用するか、[Maps] セクションの横にある「すべて表示」リンクをクリックして見つけることができます。
まず、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制限」セクションまでスクロールし、「キーを制限」オプションを選択する必要があります。これによりドロップダウンが表示され、「Geocaching API」、「Maps JavaScript API」、「Places API」のチェックボックスをオンにします。
それが完了したら、設定を保存するために「OK」リンクをクリックしてください。
最後に、選択したすべての制限を有効にするために、必ずページ下部にある「保存」ボタンをクリックしてください。
設定が有効になるまで最大5分かかる場合があります。
WPFormsの設定にGoogle APIキーを追加する
他に利用可能なAPIキーがあれば、その中にAPIキーが表示されます。キーをWPFormsのジオロケーション設定ページに追加するために、「コピー」アイコンをクリックしてください。
APIの設定や制限を変更する必要がある場合は、右側の編集アイコンをクリックできることに注意してください。
次に、ウェブサイトに戻る必要があります。これはまだ WPForms » 設定 » 位置情報 ページにあるはずです。
そこに着いたら、WPFormsの設定にあるGoogle Places APIフィールドにキーを貼り付けます。それが終わったら、「設定を保存」ボタンをクリックしてください。
📝 注: Google Placesでは、サイトにSSL証明書が必要です。取得方法については、無料SSL証明書の取得方法に関する初心者ガイドをご覧ください。
WordPressで埋め込みGoogleマップを使用したお問い合わせフォームの作成
WPFormsとGoogle Placesの設定が完了したので、WordPressで問い合わせフォームを作成する準備ができました。
WPFormsでWordPressフォームを構築するには、いくつかの方法があります。まず、空白のキャンバスから始めることができます。これにより、フォームフィールドをゼロから追加および配置する完全な制御が得られ、完全にカスタマイズされたデザインに最適です。
次に、AIフォームビルダーを使用して、簡単なテキストプロンプトに基づいて完全なフォームを生成できます。これは、どこから始めればよいかわからない場合に、時間を大幅に節約できます。
そして最後に、2,000以上の既製フォームテンプレートから選択できます。連絡フォーム、アンケート、予約フォーム、またはそれ以上に複雑なものが必要な場合でも、ニーズに合ったテンプレートが見つかる可能性が高いです！
WordPressで連絡フォームを作成する方法」に関するガイドに従って開始できます。
基本的なフォームを作成したら、住所フィールドを追加する必要があります。住所ブロックまたは一行テキストフィールドのいずれかを使用できます。このチュートリアルでは、「一行テキスト」フィールドを使用します。
「一行テキスト」ブロックをフォームにドラッグするだけです。
次に、フィールドの設定をカスタマイズします。
これを行うには、フィールドをクリックして、単一行テキストの設定を表示する必要があります。
まず、フィールドのラベルを「住所」に変更する必要があります。これにより、ユーザーは何を入力すべきかが明確になります。
その後、WordPressフォームにマップが表示されるようにフィールドの設定を変更する必要があります。これを行うには、「詳細設定」タブをクリックする必要があります。
そこに着いたら、設定の一番下にある「住所の自動入力」オプションを探し、「オン」の位置に切り替えてください。
次に、「マップを表示」という別のオプションが表示されるので、これも有効にする必要があります。マップをフィールドの上または下に表示することを選択できます。
ウェブサイトに連絡フォームを追加する
お問い合わせフォームをウェブサイトに追加する最も簡単な方法は、「埋め込み」ボタンをクリックすることです。フォームエディタ画面の上部にある「保存」ボタンの隣にあります。
既存のフォームに追加するか、新しいページを作成するかを尋ねられます。
このチュートリアルでは、「新しいページを作成」ボタンをクリックします。
次に、ページに名前を付け、「開始！」ボタンをクリックしてください。
その名前の新しいページが作成され、問い合わせフォームが自動的に追加されます。
「公開」ボタンをクリックするだけで、フォームを公開できます。
お問い合わせフォームでGoogleマップを表示する
ユーザーが問い合わせフォームにアクセスすると、あなたのウェブサイトが位置情報にアクセスすることを許可するかどうか尋ねられます。
「許可する」ボタンをクリックすると、現在の場所が住所フィールドに入力され、その場所のピンがマップに追加されます。
この自動入力機能は、訪問者が住所を入力するのをより速く簡単にすることで、訪問者の時間を節約します。
アドレスを変更する必要がある場合は、新しいアドレスを入力するか、マップ上の別の場所にピンをドラッグするだけで変更できます。
フォームでユーザーの位置データを表示する方法
ジオロケーションを有効にすると、WPFormsはユーザーがフォームに入力した際のユーザーの場所も記録します。ユーザーの場所を知ることは、より良いリードを見つけるのに役立つ可能性があります。
WPForms » エントリに移動し、問い合わせフォームをクリックする必要があります。
これで、そのフォームにユーザーが入力したエントリのリストが表示されます。
特定のフォーム送信を表示するには、右側にある「表示」リンクをクリックするだけです。
これで、ユーザーによって入力されたフォームデータ（名前、ビジネスメール、ビジネス電話番号など）と、いくつかの位置データが表示されます。
これには、Googleマップ上のピン、ユーザーの位置、郵便番号、国、およびおおよその緯度と経度が含まれます。
もちろん、ユーザーがフォームに位置情報を知る許可を与えなかった場合、位置データは表示されません。
これで完了です。Googleマップを連絡フォームに正常に追加しました。WPFormsを使用して、WordPressでアンケートを作成したり、オンライン決済を受け付ける支払いフォームを作成したりすることもできます。
動画チュートリアル
どのように機能するか見てみませんか？下のビデオチュートリアルの再生▶️ボタンをクリックするだけで、連絡先フォームにGoogleマップを埋め込む方法を学ぶことができます。
ボーナスリソース 🔗: WordPressでマップを使用するためのベストガイド
このチュートリアルで、連絡フォームにGoogleマップを埋め込む方法を学べたことを願っています。次に、ウェブサイトでマップを使用するための他のガイドも参照してください。
- WordPressにGoogleマップを追加する方法（正しい方法）
- WordPressにGoogleマップストアロケーターを追加する方法
- WordPressにBingマップを埋め込む方法（ステップバイステップ）
- WordPressにインタラクティブマップを追加する方法
- WordPress向けのベストGoogleマッププラグイン（ほとんど無料）
- おすすめのMapbox WordPressプラグイン
- おすすめのWordPressジオロケーションおよびGeoIPプラグイン
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デビッド・リム
I’ve been thinking about and struggling with this map insertion for a while, but this guide and video have made my job a lot easier. I saved this page to my bookmarks. Thank you
WPBeginnerサポート
You’re welcome
管理者
イジー・ヴァネック
WP Formsを使用しており、連絡フォームにマップを統合して、場所を一目でわかるようにすることを検討しています。この記事を見るまで、WP Formsでこれができることを知りませんでした。
WPBeginnerサポート
Glad we could share the functionality
管理者