AIサマリー
住所入力欄は厄介だ。ユーザーは通り名を間違え、郵便番号を忘れ、不完全な住所を入力したり、完全な住所を入力するのが面倒だからとフォームを放棄したりする。
Googleマップのオートコンプリート機能は、ユーザーが入力するにつれて完全かつ検証済みの住所を提案することでこの問題を解決します。3～4文字入力すると、実際の住所のドロップダウンリストが表示され、選択できるようになります。
フォームにこの機能を追加して、入力ミスを減らし、フォーム入力のスピードアップを図りませんか？このガイドでは、Googleマップの自動補完機能付き住所入力フォームを作成する方法を、ステップバイステップでご紹介します。
Google Mapsの住所自動入力フォームを作成するには？
WPForms Proとジオロケーションアドオンを使えば、フォームに地図機能をすぐに追加できます。以下の簡単な手順に従って始めましょう：
ステップ1：WPFormsプラグインをインストールする
まず最初に、WPFormsプラグインをインストールする必要があります。これは強力なフォームビルダーであり、コンタクトフォームや登録フォームなどを作成するのが簡単になります。
2,100種類以上のWordPressフォームテンプレートが利用可能で、組み込みの地理位置情報ツールにより、フォーム上での地図表示が格段に簡単になります。
連絡先フォームに地図を追加するには、WPForms Proが必要です。これにはジオロケーションアドオンと、このチュートリアルで説明するすべての地図機能が含まれています。
WordPressを初めてお使いになる方や、プラグインのインストールでお困りの方は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
ステップ2：ジオロケーションアドオンを有効にする
WPForms Proのインストールが完了しましたので、次にジオロケーションアドオンを有効化する必要があります。このアドオンが、コンタクトフォームの地図機能をすべて実現する基盤となります。
アドオンを有効にするには、WordPressのダッシュボードに移動し、WPForms " Addonsをクリックします。
検索バーに「Geolocation」と入力します。次に「アドオンをインストール」ボタンをクリックし、そのステータスを「有効」に変更します。
アドオンは自動的にインストールされます。現時点でファイルをダウンロードしたり設定したりする必要はありません。次に、Google Mapsと連携させます。
ステップ3：ジオロケーションの設定
Geolocation アドオンを有効にしたら、その設定を行う必要があります。これを行うには、 WPForms " Settingsをクリックします 。
WPFormsの設定ページで、上部のタブからGeolocationをクリックして設定にアクセスします。
ここでは、さまざまなニーズや要件に基づいてGeolocationアドオンを設定するためのさまざまなオプションが表示されます：
- 場所のプロバイダー：ジオロケーション情報を受け取るプロバイダーを選択するオプションがあります。ここでは、Google Places APIをプレイスプロバイダーとして選択します。
- 現在地このオプションを有効にすると、ユーザーの現在地がフォームに事前入力されます。
- Google Places API：住所のオートコンプリート機能を有効にし、フォーム内にGoogleマップを表示するには、APIキーを生成してWPFormsと接続する必要があります。
APIキー生成の完全なプロセスを見てみよう。
Google Developer ConsoleからAPIキーを生成する
Google Developer Consoleにアクセスし、上部にあるプロジェクトの選択メニューからプロジェクトを選択します。
以前に作成したプロジェクトがない場合は、「新規プロジェクト」をクリックして新規プロジェクトを作成します。
新規プロジェクトの作成に成功したら、Enable APIs and Servicesをクリックします。
Google API Libraryが開きます。
ここから3つのAPIを有効にする必要がある：
- ジオコーディングAPI
- マップJavaScript API
- プレースAPI
このAPIライブラリは簡単な検索オプションを提供しています。検索ボックスにAPI名を入力し、APIに移動してENABLEボタンをクリックします。
すべてのAPIを有効にしたら、Google Consoleのダッシュボードに戻り、資格情報タブを開きます。
上部にあるCreate Credentialsボタンをクリックし、 API keyオプションを選択します。
APIキーのポップアップが開きます。ポップアップの右下にある RESTRICT KEYオプションをクリックします。
新しいページが開きますので、そこで以下の設定を行います：
- アプリケーションの制限：ここから、APIキーを使用できるウェブサイト、IPアドレス、アプリケーションを選択できます。ここでHTTP Referrersオプションを選択し、Webサイト内でのキーの使用を許可する必要があります。
- ウェブサイトの制限：HTTP Referrersを選択すると、ウェブサイトの制限という新しいオプションが表示されます。ここで、ウェブサイトのドメイン名を追加して、指定したウェブサイトでのみAPIキーが使用されるように制限する必要があります。
- APIの制限：アプリケーションとウェブサイトでキーを制限した後、APIでキーを制限する必要があります。これを行うには、Restrict keyオプションをクリックします。
これにより、複数のAPIオプションを持つドロップダウンが開きます。ドロップダウンから以下のAPIを選択します：
- プレースAPI
- マップJavaScript API
- ジオコーディングAP
APIの選択が完了したら、[保存]ボタンをクリックして設定を保存します。これにより認証情報ページに戻ります。ページからキーをコピーし、WPFormsの設定画面に戻ってください。
WPFormsの設定で、Google Places APIの下にあるAPI Keyフィールドにこれを貼り付け、Save Settingsボタンをクリックします。
位置情報設定が完了しました。次に、住所の自動補完機能を有効にしたフォームを作成します。
ステップ4: オートコンプリート用住所フォームを作成する
ジオロケーションアドオンの設定が完了したら、コンタクトフォームの作成準備が整いました。所要時間は約5分です。WordPressダッシュボードの「WPForms」→「新規追加」を選択し、フォームビルダーを開いてください。
フォームに名前を付けるには「フォーム名を入力」欄に名前を入力してください。「お問い合わせ」などが適しています。いくつかのオプションが表示されます。時間を節約したい場合は、2,100種類以上のWordPressフォームテンプレートからお選びいただけます。
シンプルなお問い合わせフォームテンプレートをお選びになることをお勧めします。これにより、必要な項目が既に追加された完成済みのお問い合わせフォームが利用できます。
テンプレートには、名前フィールド、メールアドレスフィールド、コメントまたはメッセージフィールドが含まれています。これらのフィールドはカスタマイズしたり、新しいフィールドを追加したり、不要なフィールドを削除したりできます。
さて、おそらく通知や確認メッセージなど、フォーム設定以外に設定したい項目がいくつかあるかもしれません。その場合は（強くお勧めします）、初めてのフォーム作成に関する詳細ガイドをご覧ください。
プロからのアドバイス
すべてのフィールドを手動で設定したくないが、カスタム要件がある場合の別の選択肢は、WPForms AIフォームビルダーに処理を任せることです。
紫色の「AIで生成」ボタンにカーソルを合わせ、「フォームを生成」をクリックするだけです。AIフォームビルダー画面が表示されます。ここで、作成したいフォームの種類を指定します。
独自のプロンプトを入力するか、左側の提案から選択できます。生成ボタンを押すと、AIが数秒かけてフォームを作成します。
ステップ5: フォームに住所フィールドを追加する
フォームの準備ができたので、あとは住所フィールド を追加するだけです。 左側のFancy FieldsセクションからAddress Fieldをドラッグしてフォームに配置します。
アドレスフィールドには、利便性のためにラベルとサブラベルのテキストが既に含まれています。ラベルテキストのカスタマイズ、アドレススキームの選択、フィールドサイズのカスタマイズ、ラベルとサブラベルの非表示といった柔軟な設定が可能です。
次に、住所フィールドのオートコンプリート機能を有効にします。これは、フィールドをGoogle Places APIに接続するシンプルな切り替え機能です。
フォームの「住所」フィールドをクリックし、左側のフィールド設定で「詳細」タブをクリックしてください。
アドレスオートコンプリートを有効にする] オプションが表示されるまでスクロールダウンします。この設定をオンに切り替えると、フォームで住所のオートコンプリートが有効になります。
これを許可すると、もう一つの機能が開きます：地図を表示する。 コンタクトフォームに地図を表示したい場合は、このオプションもオンにしてください。
ドロップダウンを使用して、地図を住所サブフィールドの上または下に表示するかどうかを指定します。
一番上の保存ボタンをクリックしてください。オートコンプリートアドレスフォームの準備が整いました。
ステップ7: Googleマップの自動補完住所フォームを公開する
WPFormsでは、ページ、ブログ記事、ウェブサイトのサイドバーウィジェットなど、複数の場所にフォームを追加することができます。
フォームをページに埋め込む前に、必要であれば、フォームがライブページでどのように見えるかをチェックすることができます。フォームをプレビューするには、上部のプレビューボタンをクリックしてください。
Googleマップの自動補完住所フォームに問題がなければ、ページに追加する準備が整っています。ブロックエディタの「+」アイコンをクリックし、WPFormsブロックを追加してください。
次に、ブロック内のドロップダウンからフォームを選択します。この場合、上記の手順に従って作成した「住所自動入力フォーム」を選択します。
その後、ページを公開するだけでフォームが公開され、送信を受け付けられる状態になります。公開ページ上でインタラクティブマップ付きの住所フィールドがどのように表示されるか、こちらをご覧ください。すごいと思いませんか？
よくやったこれでGoogleマップの住所自動入力フォームの作成は完了です。住所1行目と2行目の詳細については、こちらのガイドをご覧ください。
Google Mapsの住所自動入力フォームの作り方に関するFAQ
オートコンプリートアドレスフォームは、読者の間で人気のあるトピックです。ここでは、それに関するよくある質問にお答えします：
フォームのオートコンプリートアドレスとは何ですか？
自動補完機能は、ユーザーがフォームフィールドに入力する際に、完全かつ検証済みの住所を提案する機能です。3～4文字入力すると、Googleのデータベースから一致する住所がドロップダウンで表示されます。
ユーザーは各項目を手動で入力する代わりに住所を選択します。これにより入力ミスが解消され、入力速度が向上（特にモバイル端末で顕著）、かつ住所の正確性と配達可能性が保証されます。
WordPressのフォームに自動補完アドレスを追加するにはどうすればよいですか？
WPForms Pro またはそれ以上のバージョンをインストールし、ジオロケーションアドオンを有効化してください。Google Cloud Console から無料の Google Places API キーを生成し、その API キーをWPForms » 設定 » ジオロケーション に貼り付けてください。
その後、フォームを作成し、住所フィールドを追加し、フィールドの詳細設定で「住所の自動補完を有効にする」をオンにするだけです。
完全な設定には20～30分かかり、このガイドで段階的に説明します。設定が完了すると、住所フィールドを含むあらゆるフォームでオートコンプリートが機能します。
WPFormsはGoogleマップのオートコンプリート機能に対応していますか？
はい、WPFormsは住所の自動補完にGoogle Places APIを使用しています。これはGoogleマップの住所検索を支える技術と同じものです。
完全な機能を利用するには、3つのGoogle API（Places API、Maps JavaScript API、Geocoding API）を有効にする必要があります。
WPFormsでは、フォーム上にインタラクティブなGoogleマップを表示し、選択された住所の位置を示すこともできます。これを有効にするには、住所フィールドの「詳細設定」にある「マップを表示」で設定してください。
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 » 設定 » 地理位置情報でプロバイダーを切り替えることができます。
WooCommerceのチェックアウトフォームで住所の自動補完機能は使えますか？
WPFormsの住所自動入力機能は、WPFormsで構築されたフォームでのみ動作し、WooCommerceのネイティブチェックアウトでは機能しません。ただし、支払い機能と住所自動入力を統合したWPFormsを使用したカスタムチェックアウトフォームを作成することは可能です。
あるいは、WooCommerceのチェックアウトフィールドと直接連携する、WooCommerce専用の住所自動補完プラグインをインストールしてください。
WooCommerceとの統合が必要な場合は、WooCommerceのプラグインディレクトリで「住所自動補完」または「Google Places」プラグインを検索してください。これらはチェックアウト用に設計されています。
WordPressに最適なGoogle Mapsプラグインとは？
WPForms ProはWordPressのための最高のマッププラグインの一つです。Google MapsやMapboxと連動する住所オートコンプリート機能があらかじめ組み込まれた強力なGeolocationアドオンが含まれています。
この機能は、ユーザーが住所を記入・入力すると、その場所を自動検索し、自動的に提案します。
さらに、Geolocationアドオンを使用すると、WordPressのお問い合わせフォームに地図を追加し、ユーザーが地図上のピンを調整することで場所を追加できるようにすることができます。
Googleの無料利用枠を超過した場合、私のフォームはどうなりますか？
月間28,000件を超えるオートコンプリートリクエストが発生した場合、Googleはクラウドアカウントに課金（課金機能が有効な場合）するか、オートコンプリート提案の提供を停止します（課金機能が有効でない場合）。
フォームは引き続き機能し、住所フィールドは候補表示のない通常のテキスト入力欄になります。ユーザーは手動で住所を入力できます。
Google Cloud Console で使用状況を監視し、請求アラートを設定して予期せぬ請求を回避しましょう。トラフィックが非常に高くない限り、ほとんどのサイトは無料枠を大幅に下回ります。
次に、インタラクティブマップでフォームを強化しましょう
素晴らしい仕事です！ユーザー体験を向上させ、正確な住所データを保証するGoogleマップの自動補完住所フォームの作成に成功しました。住所の自動補完機能が動作するようになったので、WPFormsのMap Fieldでフォームを次のレベルへ進化させましょう。
この機能により、フォームにインタラクティブな地図を直接埋め込むことが可能になります。ユーザーは地図上で場所をクリックして選択したり、カスタムマーカー付きの複数の事業所を表示したり、視覚的な地図から希望のサービスエリアを選択したりできます。マップフィールドは以下に最適です：
- 複数店舗予約フォーム： お客様がすべての店舗を1つの地図上で確認し、希望の支店を選択できるようにします 。
- サービスエリア選択：サービス 提供エリア を視覚的に表示し 、お客様がご自身の地域が対象かどうかを把握できるようにします。
- オフィス所在地付きのお問い合わせフォーム： 訪問者が送信する前に、最寄りのオフィスを簡単に見つけられるようにします 。
- イベント登録： 会場の場所と道順をフォームに組み込んで表示する 。
これらのガイドをチェックして、何が可能か探ってみましょう：
どのフォームが最も効果的か追跡したいですか？WordPressでリードソースを追跡する方法を学び、どのトラフィックソースが最も多くのフォーム送信をもたらすか確認しましょう。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
これはフィールドでエラーを返す動作しません！
こんにちは、ネイサン！フォームのアドレスオートコンプリートでエラーが発生するとのこと、申し訳ございません。トラブルシューティングのお手伝いをさせていただきますので、表示されている問題の詳細をご連絡ください。
連絡を楽しみにしている！
こんにちは、
Google Mapsアドオンは問題なく動作しています！
しかし、選択した住所内の緯度と経度の座標を保存する方法はありますか？
よろしくお願いします！
これは住所を1つのフィールドにまとめてキャプチャするため、標準的な住所、市町村、都道府県、郵便番号のフィールドにパースするのが難しいことに気づきました。何か方法はありますか？
こんにちは、アダム、
あなたが説明したことを行うには、フォームに1行テキストフィールドとドロップダウンフィールドを使用してカスタム住所フィールドを作成することができます。
フォームビルダーの一括追加オプションを使って、ドロップダウンフィールドに素早くオプションを追加することができます。これを行うには、ドロップダウンフィールドをクリックし、左のフィールドオプションパネルで一括追加をクリックします。表示される新しいセクションで、プリセットを表示を選択します。プリセットのリストから選択することができます。以下は、例としてCountriesを追加するプロセスの短いスクリーンキャストです。
参考までに、詳しいチュートリアルもあります。
郵便番号のサブフィールドには、数字フィールドを使用するか、入力マスクメソッドを使用して、ユーザーが1行テキストフィールドに数字のみを追加できるようにすることができます。詳しくはこちらのチュートリアルをご覧ください。
必要であれば、フォームを複数のカラムにフォーマットすることもできます。その方法についてはこちらのチュートリアルをご覧ください。
お役に立てれば幸いです！ 🙂。
通知メールに地図データが含まれていないことに気づいたのですが、問い合わせフォームから問い合わせが送信されたときに、地図データを含める方法はありますか？
こんにちは、ロブ、
これを設定するには、フォームビルダーを開き、設定 " 通知 に進みます。メールメッセージセクションまでスクロールして
{entry_geolocation}スマートタグご参考までに、EメールにGeo Locationの詳細を記載する方法をご紹介します。
お役に立てれば幸いです！ 🙂。
世界中の住所を表示する代わりに、都市または州/県だけを制限する方法はありますか？ありがとうございます！このアドオンは、それ以外ではとてもうまく機能しています🙂。
Hey Rodney - 現在、Geolocationアドオンには、国や場所に基づいて住所の自動入力を制限する機能はありません。これは素晴らしい機能だと思うので、開発者の目に留まるよう、機能リクエストトラッカーに追加しておきます。
こんにちは。空港やホテルなどを自動入力できるようにする方法が必要です。現在、ユーザーが "airport vienna "のようなことを書くと、何も選択できません。有効にする方法はありますか？私のタクシーウェブサイトに追加できたらいいなと思ったのですが、人々を混乱させるだけで、今ではフォーム送信の途中でやめてしまいます。
こんにちは、マテイ、
WPForms で空港やホテルなどの場所のオートフィルを有効にするには、Geolocation アドオンが提供する Address Autocomplete 機能を使用します。この機能は Google Places や Mapbox のようなサービスを利用しており、接続する地図プロバイダから得られるデータに応じて、住所、空港、ホテル、その他の観光スポットなど、さまざまな種類の場所をオートコンプリートすることができます。
お役に立てれば幸いだ！