Autocomplete Address Field in WordPress
Autocomplete Address Field feature is primarily a characteristic of the ‘Places’ library inside the Google Maps API key. Such an exclusive feature makes the registration form genuine and easy to process for the users. This tutorial will mainly be about step by step instructions on how to autocomplete address field of the registration form. Let us first have an insight on what is ‘autocomplete address field’ feature in general and how does it work.
Address fields are basically a form field type aiding you to collect user addresses information across the border. It helps you determine which components of an address must be included in a form with field widget.
Autocomplete is ideally a feature which makes it non-troublesome for users while filling the address fields in a form. Customers can easily choose their address from the suggestions once they type their house name/street number in the address field. This feature can only be enabled if the Google Places API is activated on your form.
First and foremost, you need to install RegistrationMagic plugin. You can either create the new form and add address fields to it. Or, you can download the General Purpose Registration Form from the template library and configure the address field.
To autocomplete address field of registration form you need to configure the Address Autocomplete using Google Place API plugin.
Go to RegistrationMagic’s All forms section and click on fields. You can now “Add Field” and select “Address” from the list.
This takes you to a page where you can view two options for the address field type. One is the regular address field type with the other is the autocomplete feature powered by Google Maps. Google Maps do not always have all the addresses in the world stored in their database. For this reason, the “regular” address field type made available for our users, to customize the address manually.
After selecting the autocomplete feature, the first step in integrating the Google Maps API with address fields.
Go to the RegistrationMagic’s Global Settings >> External Integrations to integrate Google Maps API. There will be a section to input the Google Maps API key.
Configure and create a Google Place API Key
You need to navigate to the Google Developer Console webpage a commence a fresh project. Click the hyperlink just beside the Google Maps API key field to configure your API key.
This will take you to the Google Developer console which will ask you to log in using your e-mail ID. Now you can click continue with the “create project” option enabled.
Choose a name for your project like “testAPI” and click on create. You will be able to see a pop-up which will hold your API key. Copy your API key and go back to the global settings and paste in on the Google Maps API key field. Click on save.
Here you need to enable a couple of API’s. Under Google API’s you must be able to locate “Google Places API Web Service” which is the first one of the two.
Go to the library of the Google Developer Console and look for “Google Places API Web Service”. Click the “enable” option for “Google Places API Web Service” on the top of the screen.
The Google Developer Console will immediately activate Google Places API.
Once the Google Maps API key is saved, you have successfully installed the autocomplete feature for the address fields on your registration form.
- How to Approve WordPress User Accounts Without Logging Into Dashboard - January 25, 2021
- How to Set up Two Factor Authentication in WordPress - April 4, 2019
- How to Edit or Replace Default WordPress Registration Form - April 2, 2019
- How to Check WordPress Form Submission in Dashboard - March 29, 2019
- How to Allow Users to Edit WordPress Forms After Submission - January 31, 2019
- WordPress Class Registration Plugin – Enrol Users, Collect Payments & More - November 28, 2018
- WordPress User Management Plugin Guide - November 27, 2018
- How to Allow WordPress Login and Registration using Email - October 5, 2018
- How to Display WordPress Member Directory - October 1, 2018
- How to Disable WordPress Admin Bar for all Users Except Admin - September 29, 2018