Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで住所フィールドにオートコンプリートを追加する方法

住所フィールドにオートコンプリートを追加することで、WordPressのフォームをよりユーザーフレンドリーにすることができます。ユーザーが住所を入力する際、候補の中から素早く住所を選ぶことができ、入力のスピードアップとエラーの軽減につながります。

最近、あるユーザーから、フォームのオートコンプリートの設定方法について問い合わせがありました。オートコンプリートを使えば、ユーザーはよりスムーズな操作で正確な住所入力を行うことができます。

この投稿では、Google Places APIを使ってWordPressサイトに住所オートコンプリートを追加する手順を説明します。フォームを改善し、より効率的にする簡単な方法です。

How to Add Autocomplete for Address Fields in WordPress

なぜWordPressにオートコンプリート・フィールドを追加するのか?

WordPressにオートコンプリートのアドレスフィールドを追加することで、サイトのユーザーエクスペリエンスを向上させることができます。

例えば、eコマースストアを経営している場合、カスタマイザーは住所を素早く入力でき、タイプミスを防ぐことができます。

買い物客が住所を入力すると、現在地から考えられる住所が画面に表示されるので、買い物客は正しい住所を選ぶだけでよい。ユーザーに表示されるオプションはGoogle PlacesやGoogle Maps APIと連携しているため、エラーを減らすことができる。

アドレスフィールドのオートコンプリートは、ユーザーに提供できる最も便利な機能の1つです。購入手続きを素早く済ませることができれば、購入者は購入手続きを完了する可能性が高くなります。

これにより、売上が向上し、時折来店するカスタマイザーを常連客に変えることができる。

WordPressにオートコンプリートのアドレスフィールドを追加するメリットをご理解いただけたところで、ステップ・バイ・ステップでその方法をご紹介します。

この投稿で取り上げるすべてのステップを簡単に紹介しよう:

準備はいいかい?まずは動画チュートリアルから。

動画チュートリアル

Subscribe to WPBeginner

文書による指示がお好きな方は、このまま読み進めてください。

ステップ1: オートコンプリートGoogleアドレスのインストールと有効化

まず最初に行う必要があるのは、オートコンプリートGoogleアドレスプラグインを インストールして有効化することです。

Autocomplete Google Address plugin

詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご参照ください。

有効化したら、WordPressダッシュボードから設定 ” オートコンプリートに移動して、プラグインの設定を行いましょう。

Autocomplete WordPress

その後、Google Places API Keyの入力を求められます。このAPIキーにより、あなたのサイトはGoogleマップと接続し、Googleマップのデータベースからオートコンプリート候補をリアルタイムで取得することができます。

ステップ2:Google Places APIキーにアクセスする

Google Places API キーにアクセスするには、Google Developer Consoleサイトにアクセスし、新規プロジェクトを作成します。

Google Console create a project

プロジェクトの名前を入力するページが表示されます。プロジェクトを簡単に識別できる名前を使用することをお勧めします。

次に、「作成」ボタンをクリックします。

接続したい組織がある場合は、’Browse’リンクをクリックすると、オプションのドロップダウンが表示されます。

Create a project in Google Console

数秒待つと、自動的に「API & Services」ページにリダイレクトされます。

ここから左サイドパネルに移動し、「ライブラリ」タブをクリックする。

Library in Google Console

これで、プロジェクトで有効化できる一般的なGoogle APIのリストが表示されます。左側のパネルで「Maps」を選択し、マップに関連するオプションをフィルターにかけます。

ここから、「Places API」オプションを見つけてクリックする必要がある。

Places API

Places API」の概要ページが表示されます。

有効化」ボタンをクリックするだけで、APIが認可されます。

Enable Places API

Google Consoleが正しく設定されていれば、APIキーのポップアップウィンドウが表示されるはずです。

ただし、Google Consoleアカウントを初めて設定する場合は、請求先情報を入力する必要があります。

Copy API Key

これでWordPressサイトに戻ることができる。

次に、Google Consoleの’Google Place API Key’と書かれているところにAPIキーを貼り付けます。

Google Place API Key

WordPressで住所のオートコンプリートが機能するようにするには、Google Maps JavaScript APIを有効化する必要があります。

つまり、Google Developer Consoleのダッシュボードから「API & Services」タブに戻るだけだ。そして、’Maps JavaScript API’を見つけて、’有効化’をクリックしたい。

Enable maps javascript API

これで、フォームIDの追加に移る準備ができました。

次のステップでは、住所のオートコンプリート機能を追加したい住所フィールドのフォームIDが必要です。

ステップ 3: WordPressのフォームフィールドでアドレスのオートコンプリートを有効化する

WordPress フォームビルダープラグインで作成されたフォームフィールドにオートコンプリート機能を追加することができます。

このチュートリアルではWPForms を使用します。WPFormsはドラッグ&ドロップでフォームを作成できる最高のツールであり、初心者にとって最も簡単だからです。しかし、あなたがどのお問い合わせフォームプラグインを使用していても、これらの説明は機能します。

まず、住所フィールドまたは住所フィールドのセットを持つフォームを作成する必要があります。フォームの作成が完了したら、通常と同じようにWordPressサイトにこのフォームを追加することができます。お問い合わせフォームの作成方法については、こちらをご覧ください。

次に、フォームを追加した投稿またはページを開き、アドレスフィールドを右クリックして、ブラウザーメニューから「Inspect」を選択しましょう。

Inspect button

ここでは、入力フィールドのフォームID値がハイライトされた部分が表示されます。

例えば、このスクリーンショットでは、フォームのID値はwpforms-567-field_4です。

Form ID in developer tool

この値をコピー&ペーストしてプラグイン設定ページに貼り付けてください。

しかし、住所フォーム全体にオートコンプリート機能を追加したいでしょう。例えば、ユーザーが配送先住所全体をオートフィルできるようにしたい場合、市区町村、開始地、郵便番号をオートフィルする必要があります。

この場合、「Inspect」をクリックし、各フィールドのフォームIDを見つけて、同じプロセスを踏む必要がある。

Form ID in WordPress

IDをすべて取得したら、「オートコンプリート」ページの「フォームID」と書いてあるところにコピーしてください。

複数のIDを追加する場合は、以下のように各IDをコンマで区切り、引用符で囲む必要があります。

Multiple autocomplete address values

完了したら、『変更を保存』を押すのをお忘れなく。

これですべてです。フォームページにアクセスして、住所を入力してみてください。フォームフィールドにはGoogleプレイスやGoogleマップを使った候補が自動的に表示されます。

address autocomplete

これで Google アドレスオートコンプリート機能がフォームに追加されました。ユーザーがWooCommerce ストアでチェックアウトする場合でも、ユーザー登録のサインアップを完了する場合でも、フォームに自動入力できるようになります。

ボーナスのヒントWordPressでフォームの放棄をトラッキングして減らす

フォーム放棄とは、ユーザーがフォームを送信せずに離脱してしまうことです。

フォームからの離脱を減らすことは、メールリストの増加、eコマースの売上、そしてビジネス全体の成功に影響するため重要です。調査によると、オンラインショッピング利用者の77%以上が購入手続きを完了していないそうです。

よく放棄されるフォームをトラッキングし、改善することで、このような収益損失を減らすことができます。オートコンプリートは役立ちますが、フォーム放棄の要因は他にもあります:

  • オプション設定が必須に:必要のない情報を入力させることは、本当に迷惑なことです。
  • 不明瞭な指示:わかりにくかったり、あいまいなフォームフィールドは、人々をあきらめさせます。
  • モバイルでの使いにくさ:モバイル端末で使いにくいフォームは、大きな反感を買う可能性があります。
  • 技術的な問題:フォームがうまく動作しなかったり、読み込みに時間がかかったりといった問題は、人々がフォームに記入するのを止めてしまう可能性があります。

詳しくは、WordPressでフォーム離脱をトラッキングして減らす方法をご覧ください。

WordPress で住所フィールドにオートコンプリートを追加する方法について、この投稿がお役に立てれば幸いです。また、よりインタラクティブなフォームを作成し、コンバージョンを増加させるための専門家のヒントやWordPress フォームのカスタマイズとスタイルについてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

23件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. M K Soleman Ahmed

    It is not working now.

    • WPBeginner Support

      Thank you for letting us know, we’ll be sure to take a look and find an alternative.

      管理者

  3. Vinod

    autocomplete is coming in the first filed but not in zip and state fields, please advice.

    • WPBeginner Support

      Hi Vinod,
      Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields

      管理者

  4. Mooki

    It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site

    • WPBeginner Support

      Glad our site could help you :)

      管理者

  5. Fabiano Hirtz

    I have a travel site, tours and transfers, I would like to install this tool, when the client selected the place of visit and the arrival was not transferred, or tour, but it is not a contact form, but rather a search form, does it work? I put the class, did everything correctly, it still does not work. Can someone help me?

  6. Jay Kuntal

    Hey, I tried a lot with getting API. It works fine when i use custom code from google on code pen. But when i put the same API on this plugin, it doesn’t work.

    I have enabled two APIs – Places Web and Maps JS with credentials on Places Web.

    What am i missing here

    Thanks

    • ahmer

      Hi jay,
      did you get it working? i’m stuck, can’t seem to get it working.

  7. Tess

    Curious to know how to set a default country to appear first (instead of the default US addresses). Do you have any idea if there is a shortcode or some way to do this with this plugin?

    BTW, I got the plugin working by just adding into the “Name” field. It works fine for me apart from wanting it to show AU addresses first. :)

  8. asima

    How to populate the ‘current location’ in ‘area/neighborhood ‘ select dropdown as the first select option (rest of the options coming from the database) ?

  9. steve hajjaj

    Hi there thanks for the article. I have followed the process you described but I still cannot get autocomplete to work at all. Is there something wrong with my google developers account ? as I can see the 2 APIs are enabled but cannot see any requests. Thanks

    • WPBeginner Support

      Hi Steve,

      Make sure that you are targeting the correct CSS class or ID used by your form’s address field.

      管理者

  10. Luke

    I found a bug. When you type in the name of the business, the auto-completed address does NOT include the street number, only the street name (Main St, not 123 Main St). Big problem!!!

    • Luke

      Also, the zip code is always missing!

    • Luke

      Also, the only thing that comes through on form submission is the keys a user started typing. The address the user selects is what is shown, but not what is submitted with the form

    • WPBeginner Support

      Hey Luke,

      If you think you have found a bug, then please report it to plugin authors. They may be aware of a fix or can then work on it.

      管理者

  11. Sarah

    If there is one thing we are mindful; it’s the ‘mission creep’ of Google into websites and related app areas.

    Where able, we try not to engage google into our sites so as to remain ‘in control’ in what we do.

    But thanks for the insight …

  12. Camilo

    Can it be possible to have the autocomplete fill out the zipcode, state and country as well? I just followed everything here and the address populates automatically but the user still has to manually input their zip code, state, and city

    • WPBeginner Support

      Hi Camilo,

      Currently it is only possible if you use the single field for complete address.

      管理者

  13. Zafar Rathore

    Excellent article for autocomplete. I was looking for such a easy to go method and you guys made it.
    Autocomplete really saves a lot of time for end users which ultimately contributes to user friendly environment.

    Keep it up guys.
    Thank you

  14. Nicholas Johnson

    I’m planned to create WP form with autocomplete, but I don’t know how to do that. After reading this post, I have an idea to create auto-complete forms.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。