Blog

How to autocomplete address field of registration form in WordPress

Autocomplete Address Field of Registration Form in WordPress

Address fields are basically a form field type aiding you to collect user’s address information. It helps you determine the location of your registering users to better understand the your website audience’s demography.

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 you have Google Maps API integrated from your Global Settings >> External Integrations settings.

To know more on how to generate your own Google Maps API Key, check out their quick documentation on it.

Basic Requirements

First and foremost, you need to install the RegistrationMagic plugin. You can either create a new form and add address fields to it. Or, you can add the address field to an existing form. You can also download a form template, such as the General Purpose Registration Form from the template library and configure the address field in it.

For this example, we are going to add the address field to an existing form. Go to the All Forms page of RegistrationMagic and click the Fields link for the form that you want to update.

Then add a new field to it. For more details on how to add a new field to a form, check our add new field guide.

Add the Address field to your form and it will open its settings page automatically. From the Address field’s settings page, select the option “Autocomplete Powered by Google Maps” for “Address Field Type” setting.

Then click the Add to Form button to add the Address field to your form.

Address Auto-Complete in Action

Let us now open the form on the frontend and see how the auto-complete feature works.

As soon as you start typing your address in the first address field, you will get closes matching addresses to select from a dropdown list. 

Now when you select an address from the dropdown list, it’ll fill all the address fields automatically with the selected address from Google Maps.

This is how fast and easy it is to fill in the address field with the help of RegistrationMagic and the Google Maps API. Go ahead and add this address field to your WordPress forms now and make the form submission process so much quicker for your user registrations.

Subscribe
Notify of
guest

12 Comments
Inline Feedbacks
View all comments
irfan
irfan
6 months ago

how do I only show addresses in AU? is there a way to change the field names from “zip code” to “post code”? lastly, if an address doesnt show up on google, is there a way to select add manually?

RegistrationMagic
Admin
RegistrationMagic
6 months ago
Reply to  irfan

Hi Irfan,

At the moment, our plugin does not support limiting address selection to Australia (AU) only. However, we do plan to include this feature in a future update. In the meantime, you’ll need to manually select “Australia” as the country within the form.

If you’d like to change the “Zip Code” label to “Post Code,” you can easily do this within the field settings. Simply click on the “Zip Code” label in the Address field settings—this will allow you to edit the label. Update it to “Post Code” and make sure to save your changes.

Regarding address search: if a location doesn’t appear in Google Maps auto-complete, you can still manually enter the full address using the individual address fields. The map search feature is designed to assist with auto-filling, but the fields are fully editable and can be manually updated at any time.

irfan
irfan
6 months ago

Hi, if I select “Address Field Type” -> “Autocomplete Powered by Google” then it doesnt give me an option to edit the field settings

RegistrationMagic
Admin
RegistrationMagic
6 months ago
Reply to  irfan

Hi Irfan,

We’ll fix this in one of the upcoming version updates. Thanks for bringing this to our attention.

irfan
irfan
6 months ago

Another things aswell, if I sumbit a user registration and fill the address and in the field settings “Add Field to WordPress User Profile” -> “Associate with existing user meta key”, it says “array”, how do I parse this array?

RegistrationMagic
Admin
RegistrationMagic
6 months ago
Reply to  irfan

Hi Irfan,

The Address field data is composed of multiple individual address components (such as street, city, state, and zip code), which are stored together in the database as a serialized array.

To work with this data, you’ll first need to unserialize it and then use the individual elements of the Address array.

Craig Beatson
Craig Beatson
1 year ago

How do you break the address field from a single meta value to individual components (street / city / state / code / etc) so it can be used in woo for shipping???

RegistrationMagic
Admin
RegistrationMagic
1 year ago
Reply to  Craig Beatson

Hi Craig,

To save meta information in the WooCommerce shipping address, please use our dedicated field labeled ‘WooCommerce Shipping Field’. This field is specifically designed to automatically capture and store the information submitted through the form directly into the user’s WooCommerce shipping address. There’s no need to configure any additional user meta settings. For seamless functionality, please use this field rather than the standard Address field.

Adrian
Adrian
5 years ago

Is there an easy way to regionalise the API ie adding Region=GB to it?

RegistrationMagic
RegistrationMagic
5 years ago
Reply to  Adrian

Sorry, your question is not clear. Could you please explain this in detail in order to allow us assist you.

Paul
Paul
5 years ago

Is there a way to set the address 2 for autocomplete option?
The regular fields have street number and street address and no where to put apt. or suites.
Adding suite to any of these inputs after the autocomplete will prevent the address to show on any google maps.

RegistrationMagic
RegistrationMagic
5 years ago
Reply to  Paul

You may enable the autocomplete option in address field by selecting Auto Complete Powered by Google Maps in address field settings. Please check this- https://prnt.sc/r0ojbc