Blog

How to autocomplete address field of registration form

About Autocomplete Address Field Feature

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.

Basic Requirements

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.

Autocomplete Address Field

configure address field

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.

2018-03-29 (6)

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.

2018-03-29 (2)

2018-03-29 (3)

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.

2018-03-29 (8)

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.

2018-03-29-9-1-1024x500

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.

2018-03-29-11-1-1024x525

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.

2018-03-29 (10)

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.

 

About rmagic

RegistrationMagic Editorial Staff (rmagic) is a team of WordPress registration experts and major contributor to the development of RegistrationMagic - WordPress User Registration Plugin.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares