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

WordPressフォームが長すぎたり、入力が面倒だったりして顧客を失った経験はありませんか？それはよく起こります。購入者は購入する準備ができていますが、特にモバイルデバイスで長い住所を入力するのに手間取ってしまいます。

わずかな入力ミスが配送の失敗につながり、多くの場合、顧客は完了する前に諦めてしまいます。

だからこそ、住所自動入力は非常に役立ちます。ユーザーが入力し始めるとすぐに正しい住所を提案し、プロセスをより速く、より簡単にし、エラーが発生する可能性を低くします。その結果、顧客はより満足し、販売機会の損失が少なくなります。

さらに、セットアップも簡単です。このガイドでは、WPFormsとそのジオロケーションアドオンを使用して、WordPressフォームに住所の自動補完を追加する方法をステップバイステップで説明します。

WordPressに住所オートコンプリートを追加する理由

WordPressサイトに住所の自動補完を追加することは、ウェブサイトのユーザーエクスペリエンスを向上させる簡単な方法です。たとえば、eコマースストアでは、顧客が住所をより速く入力し、タイプミスを回避するのに役立ちます。

仕組みは次のとおりです。買い物客が入力すると、Google Places/Mapsから取得した住所の候補が表示されます。これにより、正しいものを選択するだけで、フォームが自動的に入力されます。

これによりエラーが減り、チェックアウトが迅速化されます。そして、より速く、より正確なチェックアウトは売上を伸ばし、購入者が再訪する可能性を高めます。

オンラインストア以外にも、住所の自動入力は登録フォームや予約フォームのエラーを減らすのに役立ちます。さらに、特にモバイルでのフォーム入力を大幅に容易にします。

WordPress にオートコンプリート住所フィールドを追加するメリットを理解したところで、次にその設定方法をステップバイステップでご紹介します。

この記事で説明するすべての手順の簡単な概要を以下に示します。

• ステップ1：Google Places APIキーを生成する
• ステップ2：WPFormsプラグインとジオロケーションアドオンをインストールする
• ステップ3: WordPressフォームで住所オートコンプリートを有効にする
• ステップ4：住所オートコンプリート付きフォームを作成する
• ステップ5：住所自動入力付きWordPressフォームの埋め込み
• ボーナスのヒント：WordPressでフォーム放棄を追跡し、削減する
• WordPressフォームの住所フィールドのオートコンプリートに関するFAQ
• WordPressフォームの使用に関するその他のガイド

準備はいいですか？始めましょう。

ステップ1：Google Places APIキーを生成する

WPFormsをGoogle Mapsに接続し、住所の自動入力機能を有効にするには、Google Places APIキーが必要です。手順を説明します。

キーを取得するには、Google Cloud Console 内で管理されている Google Maps Platform にアクセスする必要があります。コンソールは少し複雑に見えるかもしれませんが、心配しないでください。必要な正確な手順を説明します。

まず、「プロジェクトの作成」をクリックします。

次の画面で、新しいプロジェクトに名前を付ける必要があります。後で簡単に見分けられるような名前をお勧めします。

次に、接続したい組織がある場合は、「参照」リンクをクリックしてオプションのドロップダウンを表示できます。または、「組織なし」を選択することもできます。

すべてがうまくいったら、「作成」ボタンをクリックできます。

次の画面で、「ライブラリ」タブを開いてください。

そこから、3つの特定のAPIを有効にする必要があります。これらは連携して機能するチームだと考えてください。

• Places API: これは、入力中に住所の自動補完候補を提供するスタープレイヤーです。
• Maps JavaScript API： これにより、選択した住所のマップビューをフォーム上に直接表示できます（これはクールなオプション機能です）。
• ジオコーディングAPI: これは、住所を地図座標に変換するためにバックグラウンドで機能します。

それらを見つける最も簡単な方法は、検索バーを使用することです。検索してAPIを選択し、「有効にする」をクリックするだけです。3つのAPIすべてがアクティブになるまで繰り返します。

それが完了すると、サイトがGoogleのAPIと通信するために使用する一意のキーが生成されます。

そのため、3つの異なるAPIを有効にしたとしても、3つの個別のキーは必要ありません。適切な制限を設定しておけば、単一のAPIキーでサイトがすべてにアクセスできるようになります。

これを行うには、「認証情報」タブに移動できます。次に、認証情報を作成 » APIキーをクリックします。

これにより、APIキーを設定するためのパネルが開きます。

「アプリケーションの制限」の下で「ウェブサイト」を選択すると、キーがあなたのウェブサイトでのみ機能するようになります。

これにより、「ウェブサイトの制限」設定オプションが開きます。

ここで、ドメイン名を入力して「完了」をクリックするだけです。

その後、「API の制限」セクションに進むことができます。

まず、「キーの制限」オプションを有効にしましょう。

次に、「APIの選択」ドロップダウンメニューで、有効にしたばかりの3つのAPIを選択し、「OK」をクリックします。

これにより、キーのアクセスはそのAPIのみに制限されます。

変更を保存すると、一意のAPIキーが表示されます。

次のステップでWPFormsに接続する際に必要になるので、コピーしておいてください。

ステップ2：WPFormsプラグインとジオロケーションアドオンをインストールする

このチュートリアルでは、WordPressのWPFormsを使用します。これはWordPress向けの最高のコンタクトフォームビルダーです。強力なジオロケーションアドオンが付属しており、住所の自動補完を非常に簡単に追加できます。

WPBeginnerでは、お問い合わせフォームの表示や年次読者アンケートの実施にWPFormsを使用しています。プラグインに関する詳細については、WPFormsの完全レビューをご覧ください。

最初に行うことは、WPFormsアカウントにサインアップすることです。彼らのウェブサイトで、「今すぐWPFormsを入手」をクリックして開始してください。

次に、プランを選択してチェックアウトプロセスに進むことができます。

サインアップが完了したら、WPFormsプラグインをインストールして有効化する必要があります。

WordPress管理画面から、プラグイン » 新規プラグイン追加に移動してください。

その後、検索機能を使用してWPFormsプラグインを見つけることができます。

検索結果で「今すぐインストール」をクリックし、表示されたら「有効化」ボタンをクリックします。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドに従ってください。

有効化後、ライセンスキーの確認が必要です。

開始するには、WPForms » 設定に移動し、提供されたフィールドにライセンスキーを入力して、「キーを検証」ボタンをクリックします。ライセンスキーはWPFormsアカウントで見つけることができます。

これが完了したら、WordPress管理画面のWPForms » アドオンに移動して、Geolocationアドオンをインストールできます。

次の画面で、オプションを閲覧するか（または検索バーを使用）、Geolocationアドオンの「アドオンをインストール」をクリックします。

WPFormsは、アドオンを数分以内に自動的にインストールして有効化します。

ステップ3: WordPressフォームで住所オートコンプリートを有効にする

一意のAPIキーとジオロケーションアドオンが用意されたので、WordPressフォームで住所オートコンプリートを有効にする時間です。

WordPressダッシュボードから WPForms » 設定 に移動します。次に、上部にある「Geolocation」タブに切り替えます。

ここには、調整できるいくつかのオプションがあります。

• プレイスプロバイダー – このガイドでは、「Google Places」を選択します。
• API キー – ステップ1で生成した一意のAPIキーを貼り付けてください。これにより、住所の自動補完が有効になり、フォーム内にGoogleマップが表示されます。
• 現在の場所 – これをオンにすると、ユーザーの場所がフォームに自動的に入力されます。

このパネルの下部にある「設定を保存」をクリックすることを忘れないでください。

次に、使用したいフォームでオートコンプリートを有効にするだけです。既存のフォームを編集するか、新しいフォームを作成できます。

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

これで、WPFormsとGoogle Mapsを接続しました。このステップでは、住所フィールドを持つフォームを作成します。

まず、WordPress管理エリアからWPForms » Add Newに移動します。

次の画面で、フォームに名前を付けることができます。

より多くのフォームを作成する際に整理しやすくするために、明確で説明的な名前を使用することをお勧めします。

その後、フォームの作成方法を選択します。空白のキャンバス、既製のテンプレート、またはAIフォームビルダーを使用します。

AI搭載のフォームビルダーを使用したい場合は、簡単なプロンプトを入力するだけです。WPForms AIが数秒でフォームを生成します。

ただし、このチュートリアルでは、既製のテンプレートを使用します。

WPFormsには2,000以上のフォームテンプレートが用意されており、目的にほぼ最適なものを見つけることができます。

ベースとして使用するのに適したテンプレートを見つけたら、その上にカーソルを合わせて「テンプレートを使用」ボタンをクリックするだけです。ここでは、シンプルな問い合わせフォームテンプレートを使用します。

これにより、ドラッグ＆ドロップのフォームビルダーが開きます。

次に、左側のパネルから「住所」フィールドをドラッグしてフォームにドロップします（まだ配置されていない場合）。

「住所」フィールドが配置されたら、それをクリックして「フィールドオプション」パネルを開くことができます。

ここで、フィールドのラベルを調整したり、フィールドの説明を追加したり、異なる住所スキーマ（米国または国際）を選択したりできます。

一般設定をカスタマイズしたら、「詳細設定」タブに切り替えることができます。

次に、パネルを下にスクロールして、「住所自動入力の有効化」オプションを見つけます。それをオンにしてください。

これにより、ユーザーは WordPress フォームに直接、都市、州、郵便番号を含む完全な住所をすばやく自動入力できるようになります。

この機能を有効にすると、「地図を表示」オプションが開きます。「住所」フィールドに地図を追加するには、オンに切り替えるだけです。

次に、フォーム内のフィールドの上または下にマップを表示するかを選択できます。

完了したら、変更を適用するために上部にある「保存」ボタンをクリックすることを忘れないでください。

ここで、通知と確認をカスタマイズできます。詳細については、問い合わせフォームの作成方法に関するガイドをご覧ください。

ステップ5：住所自動入力付きWordPressフォームの埋め込み

これで、フォームをWordPressサイトに追加する準備が整いました。

まず、フォームビルダーの上部にある「埋め込み」ボタンをクリックします。

ポップアップが表示され、既存のページにフォームを追加するか、新しいページを作成するかを選択できます。

このチュートリアルでは、「既存のページを選択」を選びます。

次のポップアップで、ドロップダウンからページを選択できます。

次に、「Let’s Go!」をクリックして続行します。

WPFormsは、WordPressブロックエディターにリダイレクトします。

ここで、「+」アイコンをクリックして、WPFormsブロックを追加します。

次に、ドロップダウンメニューからフォームを選択します。

WPFormsはそれを自動的にコンテンツエディターに読み込みます。

右側のパネルで、「フォーム設定」を調整できます。

例えば、フォームのタイトルや説明を表示して、訪問者に詳細なコンテキストを提供したい場合があります。

また、サイトのテーマに合わせてフォームを スタイル設定 することもできます。デザインに満足したら、「保存」ボタンを押してください。

これで完了です！フォームページにアクセスして、住所を入力してみてください。

住所フィールドは、Google Mapsからの候補を自動的に表示し、ユーザーはワンクリックで住所を入力できるようになります。

フォームにGoogle住所自動入力機能を追加することに成功しました。

ユーザーは、WooCommerceストアでのチェックアウト時や、ユーザー登録のサインアップ時など、フォームの自動入力を利用できるようになります。

ユーザーが自動入力された住所候補を選択すると、このようになります。

ボーナスのヒント：WordPressでフォーム放棄を追跡し、削減する

フォーム放棄とは、ユーザーエクスペリエンスの悪さから、人々がフォームを送信せずに離脱してしまうことです。

フォームの放棄を減らすことは、メールリストの成長、eコマースの売上、および全体的なビジネスの成功に悪影響を与える可能性があるため重要です。

オンラインショッパーの77%以上がチェックアウトフォームを完了しないという調査結果があり、これは不完全な販売による多額の損失を意味します。

人々が放棄しがちなフォームを追跡および改善することで、これらの収益損失を減らすことができます。

自動補完は役立ちますが、フォーム放棄につながる可能性のある他の要因もまだあります。

• 必須項目に変更された任意項目：必須ではない情報を入力させるのは非常に迷惑な場合があります。
• 不明瞭な指示：フォームフィールドが不明瞭または曖昧だと、ユーザーは諦めてしまう可能性があります。
• モバイルでの使いにくさ: モバイルデバイスでの使用が難しいフォームは、大きなマイナス要因となります。
• 技術的な問題：フォームがうまく機能しない、または読み込み時間が遅いなどの問題は、ユーザーがフォームを完了するのを妨げる可能性があります。

詳細については、WordPressでのフォーム放棄の追跡と削減方法に関するガイドをご覧ください。WordPressでのフォーム放棄の追跡と削減方法。

WordPressフォームの住所フィールドのオートコンプリートに関するFAQ

住所の自動入力機能はどのように機能しますか？

フォームは、Google PlacesやMapboxのような位置情報サービスに接続されます。ユーザーが入力すると、一致する住所の候補が表示されます。ユーザーが1つを選択すると、フィールド（番地、市、郵便番号など）が自動的に入力されます。

私のWordPressテーマでも動作しますか？

通常はそうです。自動補完はほとんどの最新のWordPressテーマで機能しますが、カスタムスクリプトや大幅に変更されたテーマが競合を引き起こす場合があります。

WordPressプラグインで住所の自動入力に対応しているものはどれですか？

いくつかのフォームプラグインが、通常アドオンや連携機能を通じてこれを提供しています。ジオロケーションアドオンを備えたWPFormsは、最良の選択肢の1つです。

サジェストが表示されない場合は？

一般的な原因としては、APIキーの欠落または誤り、JavaScriptエラーまたはテーマの競合、API制限（ドメイン設定の誤りなど）が挙げられます。

WordPressフォームの使用に関するその他のガイド

この記事で、WordPressで住所フィールドにオートコンプリートを追加する方法を学べたことを願っています。

これがお役に立った場合は、他の役立つガイドも参照してください。

• ドロップダウンフィールドを使用してWordPressフォームを作成する方法
• WordPressで多言語フォームを作成する方法
• WordPressリードフォームでユーザーのジャーニーを追跡する方法
• よりインタラクティブなフォームを作成し、コンバージョンを増やすための専門家によるヒント
• WordPressフォームで条件付きロジックを使用する方法（主なユースケース）
• WordPressでカスタムAirtableフォームを作成する方法
• WordPress フォーム使用の究極ガイド

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。