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

住所オートコンプリート WordPress フォームを Web サイトに追加する方法を知りたいですか? それでは、この記事はまさにあなたが今必要としているものです。

WordPress フォームにアドレス フィールドがある場合は、オートコンプリート機能を追加することをお勧めします。 このようにして、ユーザーがアドレス フィールドに入力し、フォームを正常に送信することがより簡単になります。

そのため、住所オートコンプリートの WordPress フォームの作成方法に関する詳細なガイドを用意しました。 というわけで、最後まで読んでください。

ただし、チュートリアルの前に、住所のオートコンプリート機能の利点と、それをフォームに追加する最良の方法について説明しましょう.

アドレス オートコンプリート オプションはオンライン フォームでどのように役立ちますか?

WordPress フォームには通常の Address フィールドを使用できます。 では、なぜ住所のオートコンプリート オプションを追加するのでしょうか。

さて、住所のオートコンプリート オプションが役立ついくつかの重要な方法を次に示します。

• 住所のオートコンプリート フィールドは、ユーザーの入力に基づいて場所を自動的に提案します。
• ユーザーは、使用可能な住所候補のリストから正確な住所を選択できます。
• ユーザーは完全なアドレスを入力する必要がないため、比較的迅速にフォームに入力できます。
• オートコンプリート機能により、フォームへの入力が簡単かつ迅速になります。 これにより、フォームの送信が成功し、フォームの放棄が減少します。

したがって、フォームにオートコンプリート アドレス フィールドを含めることをお勧めします。

ただし、WordPress はデフォルトではこの機能を提供していません。 それで、あなたの最良の選択肢は何ですか？

次のセクションでは、住所のオートコンプリート フィールドを追加する最良の方法について説明します。

住所オートコンプリート WordPress フォームを作成する最良の方法

WordPress では、デフォルトでアドレス オートコンプリート機能の追加が許可されていないため、代わりにプラグインを使用する必要があります。

適切な WordPress プラグインを使用すると、手間をかけずに機能をフォームに追加できます. そのようなプラグインの 1 つが Everest Forms です。

人気のドラッグ アンド ドロップ フォーム ビルダー プラグインは、WordPress Web サイトに追加するのに最適な場合があります。

この強力なツールがすべてを行います。 コードを 1 行も変更することなく、カスタム フォームを作成できます。

20 以上のフォーム フィールドを使用して、連絡フォーム、休暇申請フォーム、注文フォーム、または必要なフォームを作成できます。

さらに、オートコンプリートオプションを簡単に有効にできるアドレスフィールドを提供します. したがって、フォームにこの機能を装備する最善の方法として、Everest Forms プラグインをお勧めします。

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

このチュートリアルでは、Everest Forms を使用して、住所のオートコンプリート WordPress フォームを作成するプロセスを示しました。

次の 7 つの簡単な手順に従って、WordPress の Google アドレス オートコンプリート オプションをフォームに追加します。

ステップ 1: Everest Forms Pro をインストールしてアクティブ化する

サイトに Everest Forms Pro プラグインをインストールしてアクティブ化することから始めます。 このプレミアム バージョンは、コアの無料の Everest Forms プラグイン上で動作します。

したがって、住所のオートコンプリート機能を機能させるには、プラグインの無料バージョンとプレミアム バージョンの両方をセットアップする必要があります。

Web サイトで Everest Forms Pro を適切にセットアップする方法については、別のガイドをご用意しています。 そのため、プラグインのインストールと有効化についてサポートが必要な場合は、チェックしてください。

ステップ 2: Geolocation Add-on をインストールしてアクティブ化する

Everest Forms Pro を正しく設定していれば、利用可能なすべてのアドオンにアクセスできるはずです。 アクセスできるアドオンは、購入したプランによって異なります。

そのため、WordPress ダッシュボードでEverest Forms >> Addons を開きます。

下にスクロールしてGeolocationアドオンを見つけ、 Install Addonをクリックします。 インストールを完了するには、後で [ Activate ] ボタンを押します。

これにより、WordPress フォームで使用するアドオンがセットアップされます。

ステップ 3: Google コンソールから API キーを取得する

3 番目のステップは、Google コンソールから API キーを取得することです。 これは、Everest Forms プラグインを Google コンソールに接続するのに役立ちます。

まず、Google コンソール ダッシュボードにアクセスします。 このダッシュボードにアクセスするには、 Google アカウントでログインする必要があります。

次に、ダッシュボードの上部からプロジェクトを選択します。

プロジェクトをまだ持っていない場合は、[新しいプロジェクト] をクリックして作成できます。 次に、プロジェクトに名前を付けてCreateを押します。

プロジェクトを選択すると、そのプロジェクトのAPI とサービスのページが表示されます。

このページに自動的にリダイレクトされないとします。 その場合、左上のナビゲーションメニューから毎年開くことができます。

メニューを押してAPIs & Services >> Enabled APIs & Servicesを開きます。

ここで、 +ENABLE APIS AND SERVICESをクリックします。

API ライブラリで、 Places APIを検索して有効にします。

注: API を正常に有効にするには、請求先アカウントが必要です。 そのため、続行する前に Google Cloud Console の課金を有効にしてください。

API を有効にしたら、 APIs & Services >> Credentialsに移動します。 +Create Credentialsをクリックし、 API Keyを選択します。

これにより、新しいAPI キーが生成されます。 ただし、API キーをコピーする前に、いくつかの制限を追加する必要があります。 そのためには、[キーの編集] をクリックします。

まず、アプリケーション制限を設定する必要があります。 これにより、API キーを使用できる Web サイト、IP アドレス、またはアプリを制限できます。 ここでは、 Websitesを選択しましょう。

次に、API キーが有効になる Web サイトを追加し、 Doneを押します。 必要に応じて、複数の Web サイトを追加できます。

その後、[キーの制限] ラジオ ボタンを選択して、 API 制限を設定する必要があります。 これにより、キーはどの有効な API を呼び出すことができるかを知ることができます。

Places API のみが必要なので、ドロップダウンから選択しましょう。 要件に応じて、Maps JavaScript API などの API を有効にして追加できます。

最後に、保存ボタンを押します。

あとは、後で使用するためにキーをコピーするだけです。 次のステップで必要になるため、安全に保管してください。

ステップ 4: Geolocation 設定に API キーを追加する

WordPress ダッシュボードに戻り、 Everest Forms >> Settings >> Geolocationに移動します。

コピーしたAPI キーをGoogle Places API Keyフィールドに貼り付けます。 その後、[変更を保存] ボタンを押します。

これで、Google Places API と Everest Forms の間の接続が完了しました。

Geolocation設定には、もう 1 つのオプションCurrent Locationがあります。 このオプションをオンにすると、フォームは自動的にユーザーの現在地を検出し、住所フィールドに入力します。

これは完全にオプションであるため、オンにするかどうかは要件によって異なります。

ステップ 5: 住所フィールドを含む新しいフォームを作成する

Everest Forms が Google Places API に正常に接続されました。 ただし、住所のオートコンプリート機能が適用されるフォームは引き続き必要です。

そのためには、アドレスフィールドを含む新しい WordPress フォームを作成する必要があります。

問題は、どのような形を作るかです。 まあ、それは完全にあなた次第です！

Everest Forms の最も優れた点は、必要なあらゆる種類のフォームを作成できることです。 お問い合わせフォーム、アンケートフォーム、求人応募フォーム、予約フォームなど。

したがって、 Everest Forms >> Add Newに移動します。

Everest Forms は、さまざまなフォーム用に事前に作成されたテンプレートをいくつか提供しています。 したがって、時間がない場合は、そのうちの 1 つをカスタマイズできます。

しかし、ゼロからフォームをデザインするのも同じくらい簡単です! 必要なフィールドをドラッグ アンド ドロップしてカスタマイズするだけです。

このガイドでは、アドレス フィールドを含む簡単な連絡先フォームを最初から作成します。

そのため、 Start from Scratch をクリックします。 次に、フォームのタイトルを入力して [続行]をクリックします。

これにより、フォーム ビルダーが表示されます。 ご覧のとおり、すべてのフォーム フィールドが左側にグループ化されています。 それらを右側のフォーム行にドラッグ アンド ドロップできます。

したがって、 Name 、 Email 、 Subject 、 Message 、そして最も重要なAddressなど、必要なフィールドをフォームに追加します。

アドレス オートコンプリートの WordPress フォームが完成したら、上部の [保存] ボタンを押して新しいフォームを保存します。

ステップ 6: 住所フィールドの住所オートコンプリートを有効にする

各フィールドには、多くのカスタマイズ オプションがあります。 同様に、住所フィールドにもいくつかのオプションがあり、そのうちの 1 つが住所のオートコンプリート機能です。

ここではAddressフィールドに焦点を当てていますが、他のフィールドもカスタマイズしてください。

編集するフィールドをクリックします。 そのカスタマイズ オプションが左側に開きます。

ここから、フィールドのLabel 、 Description 、 Field Visibilityなどを変更できます。 Required 、 Enable Tooltip 、 Hide Labelを有効にし、 CSS Classesを追加することもできます。

さらに、個々のフィールドに条件付きロジックを設定することもできます。

しかし、ここでハイライト フィールドに戻りましょう。 Addressフィールドをクリックすると、上で説明したのと同様のオプションがField Optionsに表示されます。

ただし、詳細オプションには、住所フィールド用に厳選されたいくつかの機能が含まれています。

たとえば、 Address Line 1 、 Address Line 2 、 CountryなどのPlaceholderとDefault Valueを変更できます。さらに、 Default Countries Listからユーザーが利用できるようにする国を選択できます。

最も重要なことは、チェックボックスをオンにするだけで住所のオートコンプリート機能を有効にできることです。

[保存] ボタンをクリックすると、[住所] フィールドが、フォームに入力するユーザーに場所を自動的に提案します。

ステップ 7: アドレス オートコンプリート WordPress フォームをサイトに表示する

おめでとう！ このチュートリアルの最後のステップです。

アドレス オートコンプリートの WordPress フォームが用意されているので、それを Web サイトのフロント エンドに追加する必要があります。

Everest Forms を使用すると、いくつかの簡単な手順でそれを行うことができます。

まず、WordPress フォームを追加するページまたは投稿を開きます。

Gutenberg エディターに入ったら、ブロック挿入 ( + ) ボタンを選択します。

Everest Formsブロックを検索し、クリックしてページ/投稿に追加します。

次に、ドロップダウンから住所オートコンプリート フィールドを含むフォームを選択します。 これにより、フォームがページ/投稿に自動的に追加されます。

最後に、上部の更新ボタンを押します。

フォームをまったく新しいページ/投稿に追加することもできます。 同じ手順に従って、最後に [公開] ボタンを押すだけです。 そして、あなたは完了です！

アドレス オートコンプリートの WordPress フォームに、フロント エンドからユーザーがアクセスできるようになりました。

まとめ

おわかりのように、WordPress の Google アドレス オートコンプリート フォームの作成は非常に簡単です。 特に Everest Forms プラグインが手元にある場合。

この素晴らしいプラグインを使用すると、フォームを Google コンソールにすばやく接続できます。 そのため、ユーザーはオートコンプリート機能を使用して住所フィールドに簡単に入力できます。

しかし、知っていましたか？ Everest Forms には他にもたくさんあります。

これを使用して、メール テンプレートのカスタマイズ、フォーム送信のスケジュール設定、フォーム フィールドの自動入力などを行うことができます。

このプラグインの詳細については、ブログをご覧ください。 視覚的に学習する方は、YouTube チャンネルで簡単なビデオ チュートリアルをご覧ください。

また、毎週の投稿の更新については、Twitter と Facebook をフォローしてください。