WordPressの住所欄にオートコンプリートを追加したいですか？
最近、あるユーザーから WordPress フォームの住所フィールドにオートコンプリートを追加する方法を尋ねられました。オートコンプリートを使用すると、ユーザーは入力中にリアルタイムで生成される候補から住所をすばやく選択することができます。
この投稿では、Google Places APIを使ってWordPressの住所フィールドにオートコンプリートを追加する方法を紹介する。
WordPressにオートコンプリート・フィールドを追加する理由
WordPressにオートコンプリートのアドレスフィールドを追加することで、サイトのユーザーエクスペリエンスを向上させることができます。
例えば、eコマースストアを経営している場合、カスタマイザーは住所をより速く入力することができ、タイプミスを防ぐことができます。
買い物客が住所を入力すると、現在地から考えられる住所が画面に表示されるので、買い物客は正しい住所を選ぶだけでよい。ユーザーに表示されるオプションはGoogle PlacesやGoogle Maps APIと連携しているため、エラーを減らすことができる。
アドレスフィールドのオートコンプリートは、ユーザーに提供できる最も便利な機能の1つです。購入手続きを素早く行うことができれば、購入に至る可能性が高くなります。
各購買を迅速かつシンプルにすることで、売上を向上させ、たまに買い物をする人を定期顧客にする可能性が高くなる。
WordPressにオートコンプリートのアドレスフィールドを追加するメリットをご理解いただけたところで、ステップ・バイ・ステップでその方法をご紹介します。
動画チュートリアル
動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。
まず最初に行う必要があるのは、オートコンプリートGoogleアドレスプラグインを インストールして有効化することです。
詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、WordPressダッシュボードの設定 ” オートコンプリートページにアクセスしてプラグイン設定を行う必要があります。
Google Places API Keyの入力を求められます。このAPIキーにより、あなたのサイトがGoogleマップに接続し、Googleマップのデータベースからオートコンプリート候補をリアルタイムで取得できるようになります。
Google Places APIキーにアクセスする
Google Developer Consoleのサイトにアクセスし、新規プロジェクトを作成します。
プロジェクトの名前を入力するページが表示されます。
後でプロジェクトを識別するのに役立つ名前を付けて、「Create」ボタンをクリックします。接続したい組織がある場合は、’Browse’リンクをクリックするとオプションのドロップダウンが表示されます。
数秒待つと、API & Servicesページに自動的にリダイレクトされます。
ここから左サイドパネルに移動し、「ライブラリ」タブをクリックする。
プロジェクトで有効化できる一般的なGoogle APIのリストが表示されます。左のパネルで’Maps’を選択し、マップに関連するオプションのみでフィルターをかけます。
Places API’オプションを見つけてクリックする必要がある。
そこから、Places APIの概要ページが表示されます。
有効化」ボタンをクリックするだけで、APIが認可されます。
Google Consoleが正しく設定されていれば、API Keyのポップアップウィンドウが表示されるはずです。
ただし、Google Consoleアカウントを初めて設定する場合は、請求先情報を入力する必要があります。
これでWordPressサイトに戻ることができる。
Google ConsoleのAPIキーを’Google Place API Key’と表示されている場所に貼り付けます。
WordPressで住所のオートコンプリートが機能するようにするには、Google Maps JavaScript APIを有効化する必要があります。
そのため、Google Developer Consoleのダッシュボードから「API & Services」タブに戻るだけでよい。そして、「Maps JavaScript API」を見つけて、「有効化」をクリックする。
これで、フォームIDの追加に移る準備ができました。
次のステップでは、住所のオートコンプリート機能を追加したい住所フィールドのフォームIDが必要です。
WordPressのフォームフィールドでアドレスのオートコンプリートを有効化する
WordPress フォームビルダープラグインで作成されたフォームフィールドにオートコンプリート機能を追加することができます。
このチュートリアルではWPForms を使用します。WPFormsはドラッグ＆ドロップでフォームを作成できる最も優れたプラグインで、初心者にも使いやすいからです。しかし、どのお問い合わせフォームプラグインを使用していても、このチュートリアルは有効です。
まず、住所フィールドまたは住所フィールドのセットを持つフォームを作成する必要があります。
完了したら、通常と同じようにWordPressサイトにこのフォームを追加します。
次に、フォームを追加した投稿またはページに行きます。アドレスフィールドを右クリックし、ブラウザーメニューから「Inspect」を選択する必要があります。
ここでは、入力フィールドのフォームID値がハイライトされた部分が表示されます。
例えば、このスクリーンショットでは、フォームのID値はwpforms-567-field_4です。
この値をコピー＆ペーストしてプラグイン設定ページに貼り付けてください。
しかし、住所フォーム全体にオートコンプリート機能を追加したいでしょう。例えば、ユーザーが配送先住所全体をオートフィルできるようにしたかった場合、市町村、番地、郵便番号をオートフィルする必要があります。
この場合、「Inspect」をクリックし、各フィールドのフォームIDを見つけて、同じプロセスを踏む必要がある。
IDをすべて取得したら、オートコンプリートページの「フォームID」と書いてあるところにコピーしてください。
複数のIDを追加する場合は、以下のように各IDをコンマで区切り、引用符で囲む必要があります。入力が終わったら、忘れずに「変更を保存」を押してください。
これですべてです。フォームページにアクセスして、住所を入力してみてください。
フォームフィールドは自動的にGoogleプレイスとGoogleマップを使用した提案を表示し始めます。
これで Google アドレスオートコンプリート機能がフォームに追加されました。ユーザーがWooCommerce ストアでチェックアウトする場合でも、ユーザー登録のサインアップを完了する場合でも、フォームに自動入力できるようになります。
WordPressで住所欄にオートコンプリートを追加する方法について、この投稿がお役に立てば幸いです。ビジネスサイトに必須のWordPressプラグイン24個のリストや、メールマガジンの作成方法についてのガイドもご覧ください。
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.
Syed Balkhi says
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!
M K Soleman Ahmed says
It is not working now.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look and find an alternative.
管理者
Vinod says
autocomplete is coming in the first filed but not in zip and state fields, please advice.
WPBeginner Support says
Hi Vinod,
Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields
管理者
Mooki says
It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site
WPBeginner Support says
Glad our site could help you
管理者
Fabiano Hirtz says
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?
Jay Kuntal says
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 says
Hi jay,
did you get it working? i’m stuck, can’t seem to get it working.
Tess says
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.
asima says
How to populate the ‘current location’ in ‘area/neighborhood ‘ select dropdown as the first select option (rest of the options coming from the database) ?
steve hajjaj says
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 says
Hi Steve,
Make sure that you are targeting the correct CSS class or ID used by your form’s address field.
管理者
Luke says
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 says
Also, the zip code is always missing!
Luke says
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 says
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.
管理者
Sarah says
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 …
Camilo says
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 says
Hi Camilo,
Currently it is only possible if you use the single field for complete address.
管理者
Zafar Rathore says
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
Nicholas Johnson says
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.