WordPressフォームに住所の自動入力を追加する方法（ステップバイステップ）

住所フィールドはイライラします。ユーザーは通りの名前をスペルミスしたり、郵便番号を忘れたり、不完全な住所を入力したり、または単に住所の入力を面倒に感じてフォームを完全に破棄したりします。

Googleマップのオートコンプリートは、ユーザーが入力するにつれて完全で検証済みの住所を提案することでこれを解決します。3〜4文字入力すると、ユーザーは実際の住所のドロップダウンリストから選択できるようになります。

フォームにこれを設定して、タイポをなくし、フォームの入力をスピードアップしたいですか？このガイドでは、Googleマップのオートコンプリート住所フォームを作成する方法をステップバイステップで説明します。

Googleマップのオートコンプリート住所フォームを作成する方法

WPForms ProとGeolocationアドオンを使用すると、数分でWordPressフォームにGoogle住所の自動入力を追加できます。開始するには、次のステップバイステップの手順に従ってください。

ステップ1：WPFormsプラグインをインストールする

まず、WPFormsプラグインをインストールする必要があります。これは、お問い合わせフォーム、登録フォームなどを簡単に作成できる強力なフォームビルダーです。

これは、2,100以上のWordPressフォームテンプレートを使用でき、フォームにマップを表示するのをはるかに簡単にする組み込みのジオロケーションツールが付属しています。

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

WordPressに慣れていない場合や、プラグインのインストールプロセス中に問題が発生した場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドを確認してください。

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

ステップ2：Geolocationアドオンを有効にする

WPForms Proがインストールされたので、Geolocationアドオンをアクティブ化する必要があります。これが、お問い合わせフォームのすべてのマップ機能を強化するものです。

アドオンをアクティブ化するには、WordPressダッシュボードに移動し、WPForms » Addonsをクリックします。

検索バーにGeolocationと入力します。次に、Install Addonボタンをクリックして、ステータスをActiveに変更します。

アドオンは自動的にインストールされます。ファイルをダウンロードしたり、何かを設定したりする必要はありません。次に、Googleマップに接続します。

ステップ3：Geolocation設定を構成する

Geolocationアドオンを有効にしたら、その設定を構成する必要があります。これを行うには、WPForms » Settingsをクリックします。

WPFormsの設定ページで、上部のタブからGeolocationをクリックして設定にアクセスします。

ここでは、さまざまなニーズや要件に基づいてGeolocationアドオンを構成するためのさまざまなオプションが表示されます。

• Places Provider：ジオロケーション情報を受け取るプロバイダーを選択できます。ここでは、Google Places APIをプレイスプロバイダーとして選択します。

• Current Location：ユーザーの場所をフォームに事前入力できるようにするには、このオプションを有効にします。

• Google Places API: オートコンプリート住所機能 を有効にし、フォーム内にGoogleマップを表示するには、APIキーを生成し、WPFormsと連携させる必要があります。

APIキーを生成する完全なプロセスを見てみましょう。

GoogleデベロッパーコンソールからAPIキーを生成する

Googleデベロッパーコンソールに移動し、上部にあるプロジェクトを選択メニューからプロジェクトを選択します。

以前に作成したプロジェクトがない場合は、新規プロジェクトをクリックして新しいプロジェクトを作成します。

新しいプロジェクトを正常に作成したら、APIとサービスを有効にするをクリックします。

これにより、Google APIライブラリが開きます。

ここから、3つのAPIを有効にする必要があります。

1. Geocoding API
2. Maps JavaScript API
3. Places API

このAPIライブラリは簡単な検索オプションを提供します。検索ボックスにAPI名を入力し、APIに移動して有効にするボタンをクリックします。

すべてのAPIを有効にしたら、Googleコンソールダッシュボードに戻り、認証情報タブに移動します。

上部にある認証情報を作成ボタンをクリックし、APIキーオプションを選択します。

APIキーが表示されたポップアップが開きます。ポップアップの右下隅にあるキーを制限オプションをクリックします。

新しいページが開きます。ここで次の設定を構成する必要があります。

• アプリケーションの制限: ここから、APIキーを使用できるウェブサイト、IPアドレス、またはアプリケーションを選択できます。ここでは、キーがウェブサイト内で使用されることを許可するために、HTTP参照元オプションを選択する必要があります。

• ウェブサイトの制限: HTTP参照元を選択すると、新しいオプションウェブサイトの制限が表示されます。ここでウェブサイトのドメイン名を追加して、APIキーが指定されたウェブサイトでのみ使用されるように制限する必要があります。

• APIの制限: アプリケーションとウェブサイトでキーを制限した後、APIでキーを制限する必要があります。これを行うには、キーを制限オプションをクリックします。

これにより、複数のAPIオプションが表示されたドロップダウンが開きます。ドロップダウンから次のAPIを選択します。

• Places API
• Maps JavaScript API
• Geocoding API

APIの選択が完了したら、保存ボタンをクリックして設定を保存します。これにより、認証情報ページに戻ります。ページからキーをコピーして、WPFormsの設定に戻ります。

WPFormsの設定で、Google Places APIの下にあるAPIキーフィールドにこれを貼り付け、設定を保存ボタンをクリックします。

ジオロケーション設定が構成されました。次に、住所のオートコンプリートが有効になっているフォームを作成します。

ステップ4：オートコンプリート住所フォームを作成する

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

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

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

テンプレートには、名前フィールド、メールアドレスフィールド、およびコメントまたはメッセージフィールドが含まれています。これらのフィールドをカスタマイズしたり、新しいフィールドを追加したり、不要なフィールドを削除したりできます。

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

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

ステップ5：フォームに住所フィールドを追加する

フォームの準備ができたので、住所フィールドを追加する必要があります。左側で、Fancy Fieldsセクションから住所フィールドをドラッグして、フォームに配置します。

住所フィールドには、使いやすさのためにラベルとサブラベルのテキストが既に含まれています。ラベルテキストをカスタマイズしたり、住所スキームを選択したり、フィールドサイズをカスタマイズしたり、ラベルとサブラベルを非表示にしたりする柔軟性があります。

次に、住所フィールドのオートコンプリート機能を有効にします。これは、フィールドをGoogle Places APIに接続する簡単なトグルです。

フォーム内の住所フィールドをクリックし、次に左側のフィールド設定で詳細タブをクリックします。

住所のオートコンプリートを有効にするオプションが表示されるまで下にスクロールします。この設定をオンにして、フォームで住所のオートコンプリートを有効にします。

これを許可すると、さらに1つの機能が有効になります：地図を表示する。問い合わせフォームに地図を表示したい場合は、このオプションもオンにしてください。

ドロップダウンを使用して、地図を住所サブフィールドの上または下に表示するかどうかを指定します。

一番上の保存ボタンをクリックします。オートコンプリート住所フォームの準備ができたので、ウェブサイトに追加する時間です。

ステップ6：Googleマップ住所自動入力フォームを公開する

WPFormsでは、ページ、ブログ投稿、さらにはウェブサイトのサイドバーウィジェットなど、複数の場所にフォームを追加できます。

フォームをページに埋め込む前に、必要であれば、フォームがライブページでどのように表示されるかを確認できます。フォームをプレビューするには、一番上のプレビューボタンをクリックします。

Google Mapsのオートコンプリート住所フォームで問題がなければ、ページに追加する準備ができました。「+」アイコンをクリックし、ブロックエディターからWPFormsブロックを追加します。

次に、ブロックのドロップダウンからフォームを選択します。この場合、上記の手順に従って作成した住所オートコンプリートフォームを選択します。

その後、ページを発行するだけで、フォームが公開され、送信を受け付ける準備が整います。インタラクティブな地図が表示された住所フィールドが公開ページにどのように表示されるかは次のとおりです。素晴らしいですよね？

素晴らしい出来栄えです！Googleマップの住所自動入力フォームを正常に作成しました。詳細については、番地1と番地2に関するこのガイドをご覧ください。

Googleマップの住所自動入力フォームの作成方法に関するFAQ

住所自動入力フォームは、読者の間で人気のあるトピックです。それに関するよくある質問への回答を以下に示します。

フォームにおける住所自動入力とは何ですか？

住所自動入力とは、ユーザーがフォームフィールドに入力する際に、完全で検証済みの住所を提案する機能です。3〜4文字入力すると、Googleのデータベースから一致する住所がドロップダウンで表示されます。

ユーザーは、すべてのフィールドを手動で入力する代わりに、住所を選択します。これにより、入力ミスが排除され、完了がスピードアップされ（特にモバイルで）、住所が正確で配達可能であることが保証されます。

WordPressフォームに住所自動入力を追加するにはどうすればよいですか？

WPForms Pro以上をインストールし、Geolocationアドオンを有効化し、Google Cloud Consoleから無料のGoogle Places APIキーを生成し、APIキーをWPForms » Settings » Geolocationに貼り付けます。

その後、フォームを作成し、Addressフィールドを追加し、フィールドの詳細設定で「住所自動入力を有効にする」をオンにするだけです。

完全なセットアップには20〜30分かかり、このガイドでステップバイステップで説明されています。設定が完了すると、Addressフィールドのあるすべてのフォームで自動入力が機能します。

WPFormsの住所自動入力はGoogleマップで機能しますか？

はい、WPFormsは住所自動入力にGoogle Places APIを使用しており、これはGoogleマップの住所検索を支えるのと同じテクノロジーです。

完全な機能のためには、3つのGoogle API（Places API、Maps JavaScript API、Geocoding API）を有効にする必要があります。

WPFormsは、選択した住所の場所を示すインタラクティブなGoogleマップをフォームに表示することもできます。これは、Addressフィールドの詳細設定の「マップを表示」でオンにできます。

Googleマップの住所自動入力は無料ですか？

Googleは毎月28,000件の無料住所自動入力リクエストを提供しています。それ以降は、1,000件のリクエストあたり2.83ドルかかります。ほとんどの中小規模のウェブサイトは無料枠内に収まります。

「リクエスト」とは、ユーザーが住所フィールドに入力し、候補が表示されるたびにカウントされます（キーストロークごとではなく、検索セッションごと）。Google Cloud Consoleで使用状況を監視してください。

制限を頻繁に超える場合は、Google Cloudプランのアップグレードを検討するか、自動入力を必須フォームに限定してください。

Google Places APIとMapboxの自動入力の違いは何ですか？

Google Places APIは、より包括的な世界中の住所カバレッジ（200か国以上）と優れた住所検証を提供しますが、月額28,000件の無料枠があります。

Mapboxは無制限の無料自動入力リクエストを提供しますが、地方や一部の国際地域では住所データが詳細ではありません。

WPFormsは両方をサポートしています。精度のためにGoogle Placesを選択するか、無制限の使用のためにMapboxを選択してください。フォームを再構築することなく、WPForms » Settings » Geolocationでプロバイダーを切り替えることができます。

WooCommerceのチェックアウトフォームで住所自動入力を使用できますか？

WPFormsのアドレス自動入力は、WPFormsで作成されたフォームでのみ機能し、WooCommerceのネイティブチェックアウトでは機能しません。ただし、支払い統合とアドレス自動入力を備えたWPFormsを使用してカスタムチェックアウトフォームを作成できます。

または、WooCommerceチェックアウトフィールドに直接統合されるWooCommerce固有のアドレス自動入力プラグインをインストールします。

特にWooCommerce統合が必要な場合は、チェックアウト用に設計された「アドレス自動入力」または「Google Places」プラグインをWooCommerceのプラグインディレクトリで確認してください。

WordPressに最適なGoogle Mapsプラグインは何ですか？

WPForms Proは、WordPressに最適なマッププラグインの1つです。強力なジオロケーションアドオンが含まれており、Google MapsまたはMapboxと連携する事前作成済みのアドレス自動入力機能が付属しています。

この機能は、ユーザーが住所を入力して入力する際に、ユーザーの場所を自動的に検出し、自動的に提案します。

さらに、ジオロケーションアドオンを使用すると、WordPressのお問い合わせフォームにマップを追加し、ユーザーがマップ上のピンを調整して場所を追加できるようにすることができます。

Googleの無料枠を超えた場合、私のフォームはどうなりますか？

月間28,000件の自動入力リクエストを超えると、Googleは請求が有効になっている場合はCloudアカウントに請求するか、請求が有効になっていない場合は自動入力候補の提供を停止します。

フォームは引き続き機能し、住所フィールドは提案のない通常のテキスト入力になります。ユーザーは引き続き手動で住所を入力できます。

Google Cloud Consoleで利用状況を監視し、請求アラートを設定して予期せぬ事態を回避してください。ほとんどのサイトは、トラフィックが非常に多い場合を除き、無料制限を大幅に下回っています。

次に、インタラクティブマップでフォームを強化する

素晴らしい！ユーザーエクスペリエンスを向上させ、正確な住所データを保証するGoogle Maps自動入力住所フォームを正常に作成しました。これでアドレス自動入力が機能するようになったので、WPFormsのマップフィールドでフォームを次のレベルに引き上げましょう。

この機能を使用すると、インタラクティブマップをフォームに直接埋め込むことができ、ユーザーはクリックして場所を選択したり、カスタムマーカーで複数のビジネスの場所を表示したり、視覚的なマップから希望のサービスエリアを選択したりできます。マップフィールドは次のような場合に最適です。

• 複数拠点予約フォーム：顧客はすべての拠点を1つのマップで確認し、希望の支店を選択できます。
• サービスエリア選択：カバレッジゾーンを視覚的に表示して、顧客がサービス提供エリア内にあるかどうかを確認できるようにします。
• オフィスの場所があるお問い合わせフォーム：訪問者が送信する前に最寄りのオフィスを見つけられるようにします。
• イベント登録：会場の場所と、フォームに組み込まれた道順を表示します。

これらのガイドをチェックして、何が可能かを探ってください。

• WordPressのお問い合わせフォームに地図を表示する方法
• WordPressで複数拠点に対応した予約フォームを作成する方法

どのフォームが最もコンバージョンしているかを追跡したいですか？WordPressでリードソースを追跡する方法を学んで、どのトラフィックソースが最も多くのフォーム送信をもたらしているかを確認してください。

WordPressフォームを今すぐ作成

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

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