< Back

How to Add an Address Lookup on WordPress Forms

WS Form is compatible with Google Maps, but it can do a lot more than display them. WS From includes an address lookup feature that will autofill the address fields on your forms and display that address within a Google map. It also includes several features to restrict the type of address it searches for and what type of user can see the field.

In this article, we’ll see how to use WS Form to add an address lookup on WordPress forms.

Demo

1. Obtaining a Google API Key

Obtaining a Google API Key

First, you’ll need a Google API Key with Google Maps and Places enabled. Go to Get Started with Google Maps Platform. If you’ve never used a Google Cloud Console, select Get Started. This will step you through the process. If you have used Google Cloud Console, click Go to the project selector page and create your cloud project. We’ll click Get Started and go through the steps.

Obtaining a Google API Key

A modal will open informing you about the account. Select Activate to activate your full account.

Obtaining a Google API Key

Once your full account is activated, click Continue.

Obtaining a Google API Key

You’ll then see your API key. Copy the key and select Maybe Later. The key isn’t usable until you close this modal.

Obtaining a Google API Key

We recommend that you restrict your API key to your production and development hostnames. This keeps others from using your key and Google Maps account (which will be costly). Select the restriction type, enter your IP address and click Restrict Key. Your API key is now enabled, and you can add the Google API key to WS Form.

2. Adding the Google API key to WS Form

Adding the Google API key to WS Form

Next, add your Google API key to your global WS Form settings. This allows all of your WS Forms access to your Google API key. In the WordPress dashboard, go to WS Form > Settings and select the Advanced tab.

Adding the Google API key to WS Form

Scroll down to the API Keys section and enter your key into the Google field. Save your changes.

Adding the Google API key to WS Form

You can now add Google Address and Google Map fields to a form.

3. Adding a Google Address Field to a Form

Adding a Google Address Field to a Form

The Google Address field enables autocomplete for your address fields. To add a Google Address to any form, simply drag the Google Address field from the Advanced section of the Toolbox to your form. You can filter by country, restrict to businesses, etc. It uses the Google Places Autocomplete API.

Adding a Google Address Field to a Form

Hover over the field and click the gear icon to open the Google Address settings. You’ll see settings for the Label, Address Fields, Accessibility, Exclusions, and Hidden Behavior. The Advanced tab includes Style, Labels, Restrictions, Validation, and Custom Attributes.

Adding a Google Address Field to a Form

Restrictions are especially interesting. You can restrict the search to just businesses, choose specific countries to include, and select a user status that will see the field.

Adding a Google Address Field to a Form

To restrict to certain countries, add a country by clicking the plus icon to add a country. Click the field and choose the country from the dropdown box. The United States is added by default. Add as many as you want.

Adding a Google Address Field to a Form

The restrict based on user status, select the user status from the dropdown box. Choose between Any, Logged In, Logged Out, or a specific user role or capability. Only the users you select will see this field. By default, any user can see the field.

4. Mapping Google Places Address Parts to WS Form Fields

Mapping Google Places Address Parts to WS Form Fields

In order to use the Google Address field, you’ll need to map the address fields. This tells it which fields to add which information to. Click on the Address Field’s gear icon to open its settings. In the Basic tab, scroll down to Address Fields. You’ll see the fields available on your form with a description of each.

Mapping Google Places Address Parts to WS Form Fields

Field Mapping includes two sets of fields. The first are the fields on the form. The second identifies the data for each type of field. Open the dropdown for each field in the Form Field column and match it to its data type in the Component column.

You can map them according to this table:

Component Form Field
Street full – Long Address Line 1
Locality (City) – Long City
AL! (State) – Short State
Postal Code (Zip) Full Zip Code
Country – Short Country

5. Showing the Looked-Up Address in a Map

Showing the Looked-Up Address in a Map

You can also have a map to display the address you’ve looked up. First, drag a Google Map field to your form.

Showing the Looked-Up Address in a Map

In the Google Address field, select the gear icon to open its settings. In the Basic tab, scroll down until you see Google Map.

Showing the Looked-Up Address in a Map

Click on the dropdown box and choose your Google Map field from the list. The Google Map will now display the address that was automatically entered by the Google Address field.

Showing the Looked-Up Address in a Map

Once you’ve entered an address or selected an address that the Google Address field searches for, the map changes to show that address.

Ending Thoughts

That’s our look at how to add an address lookup with WS Form. This is a time-saving feature for users and makes it much easier for them to enter their information. You can restrict it to business addresses, addresses in certain countries, and even users with specific roles. Once the address has been added to the field, you can have it to display within a Google map. Google address lookup is easy to set up and use and it gives forms a more professional look and feel.

We want to hear from you. Do you use these address lookup features on your WordPress forms? Let us know about it in the comments.

< Back

Rapid, Responsive, Accessible, No-Code WordPress Forms